Interactive consultation
Juvéderm wanted to create an online ‘pre-consultation’ for potential new customers. The user could create an online treatment guide using a selfie or a photo of their choosing. Then take the guide into clinic to help their clinician give them the optimum treatment.
Role
UI/UX designer
Agency
FCB Inferno
Year
2018
Designing the tool
There were several usability issues raised in the wireframing process that we wanted to solve while iterating the visual design.
1. Too many steps
In the beginning the consultation had a lot of steps for the payoff. It was perceived as looking like it took a long time to do. We wanted to reduce the amount of steps without over-simplifying. So we sketched out possible journeys and layout ideas that could simplify the process.
2. Picture perfect
There were very specific criteria the users image needed to meet. We needed to ensure this didn’t frustrate the user at the first hurdle - which was uploading a photo of their face.
We introduced three key pointers for the user to remember and used a face shaped overlay rather than a grid so the user could easily align their face.
3. Optimising waiting times
The image would take a few seconds to process so we used this time to let the user know they would need to listen to the next part of the process by adding a message to the loading screen.
The stakeholder wanted to add a branded video featuring a medical practitioner explaining the treatment. This was not a bespoke video, however the user could view their before and after pictures while watching it for a clearer understanding of the treatment.
4. Before and After
In order to see the difference in the before and after images, they needed to sit side by side. Even on smaller mobile screens, which had been identified as the most used device for customers.
We also needed to fit in options for editing the after image. Users could increase or decrease treatment to a section of their face using sliders.
Website and Style guide
I also updated the Juvéderm responsive website. First looking at the IA, site map and wireframes and then the final UI. I also produced a style guide for for the look and feel and some of the reusable UI components like the footer and the header.
Information architecture and wireframes
There were three different homepages targeted at different types of customer. These would show recommended treatment types and encourage the customer to engage with the consultation tool.
Visual design and style guide
Once wireframes and IA was signed off by the stakeholders I moved into the design phase. Creating a templated and modular responsive website design that was flexible enough to be used it different configurations for multiple international markets.
To ensure efficient rollout of the site across the markets I produced this style guide defining the grid, colour palette, typography and buttons and also included reusable components such as header and footer.
