Product Designer

Leading Design for Juvéderm’s Website

Challenge & Background

Juvéderm, a product of Allergan Aesthetics, needed a website redesign that’d work globally for branded and unbranded markets using a modular mindset, user-centered design and mobile-first approach.

The website should be the place to make the final consumers see themselves within the category (facial fillers, as opposed to onabotulinumtoxinA or plastic surgery) and to provide information and tools to lead them to book a consultation.

The “I” Inside the “Team”

Holistic View: Keep track of deliverables and their deadlines acting as a facilitator so the UX and UI designers could focus on their tasks.

Client Facing: Clear and empathic communication presenting our solutions to the client (as well as to project managers and development team during refinement sessions).

Design & Documentation: Creation and support with UI design, and documentation.

Emotional Labor: As part of my personalitty, I’d also checkin-in with my peers to see how was their workload and their health physically and mentally.

A Good Kickoff Is a Good Workshop Session

The workshop had as attendees stakeholders from different areas from the client side together with part of our team. We took them all into time-travel to the future where the project was successfully completed and share with us what goals they think were achieved. With the answeres, dot voting and consensus, we came up with a mission goal that would guide us throughout the project.

Synthesising into a mission goal

“Build a digital experience for Juvéderm that is engaging, informative and personalized to provide the consumers of their products with all the information and encouragement they need to schedule a consultation with confidence. ”

Understanding the Context

The sequence of methodologies below were used to gather knowledge about the user and their pain points. We also relied on the research material that was handed by the client to then build the rationale that’d backup the sitemap creation and later the wireframes.

gif showing the rationale process practiced with the information from the ux workshop and next steps
Create User Stories

to understand patterns of consumer needs, motivations and pain points

Cluster Research data

to identify priorities our design concept should solve

Transform user's challenges

into opportunities that we could address with design solutions

An Intrinsic & Personal Experience Funnel

The stages of the experience could be summed up to: category consideration, personal outcome exploration, social reassurance and procedure details, and appointment booking. The whole experience was then reflected in the information architecture as, as we called, website pillars.

The modular mindset was used in a way to guide the user into deeper levels of category education guiding them to a deeper stage of the conversion funnel to book an appointment.

Sitemap and content structure for the website
Three wireframes showing designs of personal outcome exploration, social reassurance, procedure details and appointment booking

User Interface & Interaction

Our design solution gives the user clear educational journey, allowing them to gather information in an accessible way, explore natural outcomes of different procedures and search for the most suitable practitioner to book a consultation.

Modules with interactivity were designed to engage the user into comparing natural outcomes and to learn more about potential treatments by face area.

Special attention was given to create an interface natural, simple and with movement to bring warmth and a contemporary feel to differentiate itself from regular pharma look from competitors.

gif showing hamburger menu opening gif showing interaction with before&after module gif showing interaction with treatment module

Documentation is Everything

We’ve created a Digital Style Guide that displayed all our user interface choices and their rationale so we could keep stakeholders from different areas on the same page.

It contained the explanation of colours, typography choices, overlapping elements, rounded-corner buttons as well as how a responsive grid works and spacings.

This document also served to get the frontend team onboarded and used as part of the handover documentation, together with a spreasheet describing all modules and elements behaviours.

Details of the Digital Style Guide showing rationale

Final Considerations

During the project’s progress, it was needed to decrease the scope of pages and simplify the sitemap due to possibility of content creation.

Overwall, I’m pleased with the outcome and progression that we’ve made, as well as the sincere and trustworthy relationship we were able to create between us as a team and together with the client.

What I’d do differently: I’d have stressed the importance of bringing the content team in an earlier stage, so specific content modules would be designed more purposefully.

I’d also like to have had the possibility of doing a proper UX research with the final user other then workshop conducted internally.

*This is a overview of the project trajectory. For privacy reasons, I am not at liberty to show more specifically on what I worked. Juvéderm’s website is still in development process.*