To comply with my confidentiality agreement I have omitted and appropriated confidential information.

These designs are a reinterpretation of the original.

Intro
New Products, New Features

The UniFi® Dream Machine Pro (UDM Pro) is an all-in-one network appliance for a scalable network system. It is a new model of router and security gateway of Ubiquiti’s Enterprise System. As this new product features a 1.3’’ LCD touchscreen, I led the entire user experience design around this display from July to October in 2019.

An example of UniFi deployment with UDM Pro and USW Pro

From LED to LCD

The UniFi®  Switch Pro (USW Pro) is an enterprise-class manageable switch. As the LED indicator on UniFi Switch Gen1 doesn’t communicate the system status and events efficiently, we redesigned the second-generation from the ground up, replacing the LED with the 1.3’’ LCD touchscreen.

Goal

We gained a lot of insights by connecting closely with our users in UniFi Community. As appliance installation has always been a pain point, our goal is to enable beginner users with limited IT knowledge to setup a network appliance more easily and smoothly.

 

Secondly,  we want to completely leverage the monitoring and troubleshooting experience.

UDM Pro and USW Pro can be managed through UniFi Network Software

Identify problems and opportunities

I conducted a User Journey Mapping based on our previous router and gateway model, from a user unboxing the product to eventually managing through our UniFi Network controller software. 

Touch point 1: How might we improve hardware installation experience?

I interviewed with our hardware lead to understand the requirements of a successful setup:

Poor communication on previous models, none of the requirements are indicated by the LED, which caused a lot of abandonments.

Always inform user during installation

Based on the requirements, I created the flow chart to show that once UDM Pro is powered on, ongoing states will always be displayed.  Also, LCD guides the user to download UniFi Network app to continue setup to bridge the physical and software experience.

One step further, I added solutions to the error states so users will never hit a wall.

I added visual aids during UI design to make the instruction even clearer

Touch point 2:  How might we bring software experience to the LCD?

UDM Pro is able to host multiple controller softwares, such as UniFi Network for network management, UniFi Protect for video security etc..

Dashboard of UniFi Network Controller

I re-structured and symplified the information of the dashboard of each controller to make it fit into the small display.

Make it Interactive

Then I defined the navigation interaction through multiple controllers and information screens 

To determine how I should facilitate navigation interaction and overview layout, I conducted an A/B Testing. According to the testing result, over 80% percent of participants think that better readability is more important in this case.

Ethernet Port Navigation

Being able to monitor the status of every single ethernet port is the key experience for the switch. USW Pro can have at most 48 ethernet ports, inheriting the same interaction of UDM Pro, I designed an easy-and-quick way of navigating through every port.

Visual communication 

I worked very closely with the firmware developer to prototype on the real display to ensure the proper interactions as well as the best visual communication result.

I created a Design System that can be reused for upcoming new products
Motion

Screen saver

Locating Device

USW Pro loading

Test, Test, Test

We shipped out 15 brand new UDM Pro to our Legal Department as none of them have any IT knowledge.  13/15 users had an easy installation experience. 

“After I powered it on, it said ‘No IP address found. Restart your modem.’ I restarted my modem then it went smooth from there.”

“Had initial issue with UDM not acquiring an IP address when first connected, but the on screen instructions to reset the modem solved the issue.”

“Set up was easy and fast. Nice UI.”

* 10000+ successful installation since GA release in Feb 2020
Target Users
  • LinkedIn
  • Instagram

© 2019 Liang Shi