Client

Skincare Brand

My Role

UX Designer

UX Researcher

Summary

The client asked to design a new machine and interface that would create a streamlined experience without compromising how the user already interacted with the machine.

Outcome

New UI and industrial design styling

Research Methods/Approach

Existing UI Flow

Content Layout

To create a more user friendly layout we needed to understand which content needed the most hierarchy. We experimented with the following based on user needs and most used elements.

• Move the vacuum control front and center: Highlighting the element that was the most used was extremely important for the user. By moving it front and center and making it the largest element on the page the user could focus more on adjusting the vacuum easily.

• Add a clear forward and back button: In the old UI the buttons were too close to each other often causing them to press on the wrong button.

• Make it clear which solution the serum the esthetician was currently using: This was an important insight for us we discovered that the user had no idea which serum they were currently using which meant if the client asked about what was happening they would have to make it up or stop the treatment to find out.

• Downplay secondary information: There was other information on screen that was still important and taking it away would have created some user flow problems. By having dropdown menus the user could still have access the ingredients, benefits, patterns, stroke, and tip types.

User Flow

In conjunction to testing out user content we tested out user flow variants in InVision, we wanted to know which variation the user could navigate and flow through the best. Below is the old user flow, which consisted of menu screens and a “master screen” for ever step. The master screen was the same for each part of the process, which made it difficult for the user to know which step they were currently on. Out three main goals for improvement were to:

• Make it clear which step of the process the user was on

• Differentiate secondary screens from main treatment screens

• Create an easy way to navigate back and fourth through treatment

What did we learn from testing?

• Creative but not user friendly. Concept 3 & 4 were creative ways of presenting important content but strayed too far away from the original design. Changing the content too much presented a learning curve for the user, many users took much longer to walk through the screens than the original UI.

• Technological changes. During testing the engineering team made a quick decision to cut costs of the industrial design. One of those decisions was to go from a capacitive touchscreen to a resistive touch screen. This meant anything with a swiping motion such as in concept 5 was automatically off the table

• The Winner. Concept 1 was a clear winner with users. Users were familiar enough with the interface to click through quiet easily with minimal error. There were a few added features that they found extremely helpful in the process and that was showing which serums they were using and showing which part of the treatment they were on.

Content Layout to UI

Final Design