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.
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.
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.
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.
Take Aways
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.