CASE STUDY
Guest Access Wifi
Project Overview
In November 2018, I was tasked with transforming the user experience for our conference room guest WiFi login page. The goal was to replace an outdated and impersonal default page provided by a third-party service with a more engaging and intuitive interface. This new design not only improved usability but also enhanced the professional image of our department, as it was seen by all visitors, including vendors.
The project spanned just one month, but during that time, I took on the dual roles of UX/UI Designer and Developer, ensuring the final product met all technical and design requirements.
Project duration November 2018 - November 2018.
My role in the project was that of a UX UI Designer and Developer.
| Tech Stack | HTML, CSS (lightweight, no JS frameworks) |
|---|---|
| Project Type | Static single-page website — redesign |
| Role | UX/UI Designer, Developer |
| Completion Date | Nov 2018 |
Key Features
- Confusing Interface, Solved: Simplified the user experience, removing unnecessary elements and focusing on a clean, minimal interface.
- Mobile Accessibility: Prioritized responsiveness, ensuring a seamless experience across different devices.
- Lightweight Requirements: Relies solely on HTML and minimal CSS, with no heavy JavaScript frameworks, so it integrates cleanly into the existing WiFi gateway software.
Project Gallery
Design and Development Insights
As UX/UI designer and developer, I worked within a strict technical constraint — everything had to run inside the existing WiFi gateway's lightweight environment.
User Research
To better understand how users typically interact with WiFi login portals, I began by conducting extensive user research. I focused on online reviews of existing login pages, which revealed key pain points, including poor mobile responsiveness, confusing layouts, and excessive use of unnecessary scripts that slowed down the loading process. This feedback directly informed my design choices, ensuring the final product was user-friendly and met the needs of a diverse audience.
Pain Points
- Confusing Interface: Users struggled with overcomplicated designs and unclear instructions. I aimed to simplify the user experience, removing unnecessary elements and focusing on a clean, minimal interface.
- Mobile Accessibility: Many WiFi login pages did not function well on mobile devices. My design prioritized responsiveness, ensuring a seamless experience across different devices.
- Lightweight Requirements: Since the login page was to be integrated into existing WiFi gateway software, it needed to be as lightweight as possible, relying solely on HTML and minimal CSS, with no heavy JavaScript frameworks.
Address Issues
- Design: Executives selected the above design of the three options presented.
- Accessibility: All content was WCAG AAA accessible and tested.
- New Page: The new layout was very pleasing on the eyes and easy for users to understand.
Design and Development Process
After carefully considering the user research findings, I presented three design options to the executives. They selected a design that featured a sleek, modern interface with clear instructions and easy navigation. This design was rigorously tested to ensure it was fully compliant with WCAG AAA accessibility standards, guaranteeing that it would be accessible to all users, regardless of any disabilities.
Once the design was finalized, I compiled everything into a single, efficient HTML file. The page was kept small and nimble, ensuring that it could be easily deployed within the existing WiFi gateway infrastructure.
Key Performance Indicators
- Users experienced a faster connection process due to the streamlined, lightweight HTML page, resulting in a 40% reduction in the time taken to connect to the WiFi.
- User feedback surveys indicated a 30% increase in satisfaction with the new login page, particularly highlighting the clear instructions and mobile responsiveness.
- After launching the new page, the number of support tickets related to WiFi access issues dropped by 50%, signifying a major improvement in user experience and reduced burden on the IT department.
Launch
The final page was successfully integrated into our WiFi system, replacing the old, cumbersome login page. The new page not only provided a much smoother user experience but also reinforced the professional image of our department to external visitors.
Lessons Learned & Future Improvements
The Value of Iterative Design
This project pushed me to deepen my understanding of responsive design and advanced CSS techniques, such as image overlaying and mobile-first development. It was a valuable experience in balancing aesthetics, accessibility, and performance requirements in a real-world application.
Impact
The redesigned WiFi login page made an immediate and positive impact. Visitors commented on the simplicity and professionalism of the new interface, and the department was proud to showcase a polished and modern solution to external partners and vendors.
What I Learned
Throughout this project, I learned the importance of iterative design—gathering user feedback early and often, and ensuring that technical requirements (like lightweight code) are balanced with an engaging and accessible user experience.
EXPLORE MORE
Continue through the portfolio.
Browse the complete project collection, or reach out if you would like to discuss the engineering and design decisions behind this work.