A next-generation WiFi 6 router delivers unbeatable performance
My Role
UI/UX Designer
Team
CEO
2 Product Managers
4 Engineers
Timeline
2 months
My Contribution
Icon design, Wireframe, Hi-fi prototype, Information architecture
CONTEXT
Summary
System visibility is crucial to many installations, both for the integrator, as well as end users and facility managers. To help make this visibility more accessible, we introduced a touch screen on UDR that is designed to be the “root” device that powers the UniFi ecosystem of different hardware segments and feature sets. The goal is to design intuitive user interfaces that are accessible for IT professionals, business owners, an even family users.
In order to fit into the Ubiquiti product ecosystem, the first and foremost task was to align the design with other screens on switches. However, the screens on other switches were much bigger and contained more complex information and interactions. To fit in this 0.96 inches screen, it was important to decide what information would be useful for users when they setup their device and monitor their network.
Ubiquiti's goal is to simplify IT for everyone. We want every user to be able to easily setup the device and monitor their network with no hassle and with minimum knowledge. Therefore, to conceptualize the user groups, I outlined 2 representative personas to shape the UDR LCM screen design moving forward.
To help me facilitate a common business understanding of how customers perceive when they interact with the product, I worked with Product Managers to create a customer journey — what customers think, feel, see, hear and do and also raise some interesting “what ifs” and the possible answers to them.
Upon consultation with the CEO and Product Managers, the team determined that customer interaction with the screen needed to be minimal due to screen size limitations. Instead, the screen's purpose was to inform customers when actions were needed, display valuable information, and indicate when an error had occurred. To achieve this, the information architecture was developed around three key aspects:
1. Setup flow, 2. Key Screens, 3. Error states.
By streamlining the user experience through this three-pillar approach, customers were able to easily navigate the system and achieve their goals with ease.
Clarity, inclusivity, and accessibility
The color palette of UDR is part of the company's design library. All the solid colors are the primary colors of each color set to increase readability and accessibility.
Cohesive Iconography System
Aside from this project, I also rebuilt the company's design system and built a set of 200+ unified icons with both 20px and 24px, as well as 3 states for Ubiquiti based on icon grids and keylines. The family of icons live in Ubiquiti's whole product line, from the website to mobile applications.
Usage
The system makes up a powerful visual language consisting of more than 200 individual symbols, spanning a breadth of purposes and tones. They range from the literal to abstract, playful to descriptive, simple to complex; designed to be instantly recognizable yet playful. Here are some icons made in house for UDR.
After several rounds of whiteboarding and high-fidelity prototyping, UDR’s final user interface—complete with a set of custom icons—was ready to roll. It is built with (5) GbE RJ45 ports, including two that supply PoE to compatible devices, and all of its connections can be conveniently monitored from the router's LCM color screen. Designed to be a comprehensive, easy-to-use network hub, the UDR can be set up and configured in minutes via the UniFi Network web application or mobile app.
Create a seamless experience between LCM screen and mobile app.
Since first-time setup can be done in both the mobile application and desktop version, the key is to provide customers with an intuitive workflow that can inform them where to start.
Connect
After customers successfully connect their UDR through the mobile application or web, they will see the connecting status on the screen telling them it's ready to set up.
Setting Up
• There might be software need to update prior to setting up.
• Setup timer is to a metric for both customers and the company to monitor the average setup time for quality control.
Looping Dashboard
Due to the tiny screen size, we decided to break down network status by category and display from a high-level overview by looping the dashboard. We used uniform icons to inform the network connectivity status, the number of devices, and motion detect time, which can be found in the UniFi Network app as well. These screens are also interactive, so users can swipe left and right to revisit any information at any time.
Updating
Keeping software up-to-date can give customers a better user experience. It can also prevent customers from known vulnerabilities and from being exploited, especially for networking devices. Therefore, any update information will be added to the dashboard loop.
System Configuration
Not all alert information requires immediate action. For some low priority alerts that do not need immediate actions, one or more configurations will be displayed. Users can easily go to the UniFi Network app to configure settings.
Actions
For alerts that require immediate specific actions, we highly recommend customers to visit our help center to check frequently asked questions or to connect with our support team.
RETROSPECTIVE
Lesson learned
I was lucky to get assigned to be the solo designer of this project, which gave me an opportunity to work directly with the CEO and product managers. During the design process, I got a holistic view of a product life cycle from concept to launch, specifically from the business owner's perspective. While collaborating with developers to implement the design, I also learned that it was also important to audit and iterate the design to ensure design quality control. We didn't get much of a chance to run usability tests due to the pandemic regulations and the uniqueness of the product. Therefore, this product has only been tested with internal employees and a few people recruited by a third-party usability testing recruiting company. If I got the chance to drive this design exercise again, I would definitely run as many usability tests as possible on these groundbreaking interfaces to deliver the most accessible, user-centered designs.