I created a screen inventory by setting up the hardware I received and taking stock of all the pages and user flows that I could identify (a few flows required additional guidance from the client, such as the super admin page). I made sure to document the different states and interactions I encountered, and made note of any questions and suggestions I had along the way.

It was important to understand the major user flows and pain points of the current experience. I collaborated with the client to highlight the main use cases and took note of opportunities for improvement. Aside from modernizing the UI, our main goal was to provide more guidance during the onboarding process. Today, after powering on the device, the user is simply plopped on the homepage and needs to know where to navigate in the settings in order to configure the device. We highlighted the major configuration items required of a standard setup so that we could bring those to the surface.

Though I was able to use the design system I had created for DicksonOne in the UI Refresh, I also identified the need to adjust the system for a tablet device. Not only do touch interfaces require larger inputs in general, but this device would require something bigger and bolder - since the device might be mounted on the wall or a hard-to-reach spot, users might view it from a farther distance (perhaps up to 5-10 feet) or view several devices at once as they’re setting them up.

The first step I took in the visual design phase was to create an inventory of all the components of the current experience. This informed the initial list of components and patterns needed. I then redesigned these components to match the new design system, with some intentional changes to size everything appropriately.

The original UI had many opportunities for improvement. After reviewing the screen inventory, I identified the following as changes I would apply across the board:

• Use more consistent and uniform spacing
• Improve the color contrast for accessibility, especially for disabled inputs
• Avoid combining icons into custom graphics, use a standard icon set
• Improve the affordance for inputs and status indicators

For inspiration on user-friendly onboarding experiences, I did some research in the adjacent market of smart home devices and documented how they handled setup and connectivity. The Google Nest Hub was particularly influential here, as it not only provided guidance on initial connections, but also conveniently surfaced additional settings to the user with the option to skip over them if desired.

Based on trends that I noticed, I made some recommendations for our experience that would mirror the experience of smart home networks.

Designing the new onboarding experience definitely pushed me out of my technical comfort zone, which was both fun and challenging. We went through several situations of the user flow, going back and forth between low-fidelity wireframes, high-fidelity mockups, and flowcharts. As we went through the different iterations, we continued to discover additional requirements needed, making the user flow increasingly more complex until we were able to simplify it in the final steps. While this was not necessarily the most linear or straightforward design process, it was nevertheless useful to filter out the proposals that wouldn’t work and arrive at a more streamlined experience.

Part of the challenge of designing the onboarding experience was that every page contained different content, and it quickly became clear that custom designing each page was not efficient. I decided to create some constraints by creating a set of page templates for each onboarding page. These templates both simplified the design process and created a more consistent, unified feel for the user.