Redesigning the key web touch points of a prescription based online skincare brand

redesign • user research (b2b) • prototyping
pre-face
This is a self-initiated redesign project based on the brand Skin&Me an online, mass customisation and prescription skincare brand, as a portfolio piece. The work was completed was not commissioned or implemented by the company
MY ROLE
User research, usability testing, prototyping, UX & UI design
THE TEAM
Just me
TIMELINE
October 2021 - November 2023 (2 months)
OUTCOME
I learned how to apply tried and tested UI patterns to promptly solve the perceived problem
introduction
Responding to the demand for personalised solutions, Skin+Me offers an all-in-one skincare treatment prescribed by dermatologists through online consultations. At the time, the brand was highly focused on lead generation, enticing users with a significant low cost trials ahead of a full subscription. I explored redesigning the consultation flow using established UX/UI perceptions to reduce the perceived cognitive overload
commercial impact
Potential high drop off due to a demanding user journey
applying my marketing experience, my assumption is that the brand might be struggling to effectively transition majority visitors to customers, let alone high value long term customers

high perseverance is required from users to complete the consultation in one session, with content presented in a way that causes cognitive overload.
opportunity
How might we reduce drops off rates with the objective of securing high value, long-term consumers
user research
Usability testing with more users validated my assumptions and exposed new ones
I asked 3 highly involved skincare users to allow me to observe their experience with Skin+Me's key touch points, the landing page and their consultation process

→ I requested for them to share with me their understanding of the landing page and to speak out loud regarding their thoughts as they completed the consultation

✨new learning

users were incorrect regarding the proposition when beginning the consultation

validated assumption

lack of system visibility status created ambiguity and feelings of no control

validated assumption

content forms were not easily scannable or digestible, creating fatigue
usability review
Identifying priority improvements
Landing page to consultation flow
action: increase clarity around the product in isolation as opposed to using comparative "justification" marketing

be transparent regarding the involvement required from users regarding the online consultation. maximise visual and structured story telling over extensive copy
→
→
external
paid ad
Consultation format
action: reduce cognitive load to sustain user engagement throughout by helping users understand information quickly and clearly, utilise progress disclosure where possible

consider priming techniques to create feelings of certainty, motivation and reduce fatigue
screenshots of consultation process on desktop - many steps, static progress side bar and high amount of copy per screen
ideation
First establishing some design assumptions by imagining the likely constraints

all questions asked are necessary and should be kept

I assume that the existing design has been developed closely with dermatologists and prescribers to create the most holistic understanding on the user

Skin+Me is becoming established, improvements need to feel "on brand"

we will focus on micro-improvements vs. a complete overhaul across the identified user journeys, visual design should be familiar to the current branding
Re-designing the consultation flow
by dividing questions into clusters, we can provide a structure to the consultation process. I identified that it was possible to divide questions into 3-4 main categories

I also took the opportunity to reorder the sequence of questions in order to minimise user recall where the topics are related or dependent on a previous user input

this re-design will allow the creation of usable progress indicators, formatted with structure to ease user perceptions of how thorough it is to complete
Using exit intent pop-ups to save progress
given the time-consumer task and my learnings from users, there is a high liklihood that users would not be able to complete the consultation in one sitting

even though Skin+Me stores cache data that helps to user to return another time to pick up where they left off, this solution is only limited to one device, and there is no way way for the user to be reminded

the opportunity here is to use exit-pop ups to save unauthenticated users' progress for later by allowing the progress to be sent to users' inboxes
process
Translating task flows into mid-fidelity wireframes
user interface
Including more skincare orientated imagery to prime and motivate the user
Placing subtle visuals within the consultation process can have an influence how users respond

I felt that there could be improvements on the type of imagery that the brand already has

I proposed real close up shots of healthy, glowing skin from diverse models, allowing users to look forward to the outcomes of starting their Skin+Me journey, motivating them to complete the consultation
current model imagery
proposed model imagery
Increasing brand coherence between social media + the consultation
I believe that there is an opportunity for the consultation to evoke a stronger emotional response by introducing elements as seen on their socials - diverse use of key brand colours, illustrations and infographics

my hypothesis is that emotions drive user decisions - if a strong connection is developed, engagement increases and users will be more likely stay in the consultation flow for long
vs.
Skin+Me's engaging and dynamic instagram feed vs. the monotonous consultation forms
Subsequent illustration and interface explorations
final solution
Revised landing page

headline

immediate single minded communication of proposition

sticky "start" button

regardless of where the user in the consideration phase, they can immediately start the consultation

getting started steps

this information was pulled to second hierarchy of the landing page from an area deep within the existing site navigation

clarity regarding what the product is

this will further address the ambiguity my users felt during usability testing - users should now proceed to the consultation with greater confidence

more success stories

during usability testing, my participants responded positively to a "before and after image" - adding more in a carousel format will increase the possibility of users finding examples relevant to their needs
anding page in responsive formats
desktop
12 columns
margin; 100
gutter; 30
tablet
12 columns
margin; 32
gutter; 12
mobile
12 columns
margin; 16
gutter; 12
Consultation improvements

consultation preface

each user will start the consultation with clear expectations of the amount of time required and be informed that they are able to leave the consultation whenever they wish

sticky progress indicator

a form of user feedback to display progress throughout the consultation sequence

here, users will see the consultation as a sequence of logical steps

we show which section the user is on, how deep they are within a section and what sections remain

priming through visual cues

Alluring, close up visuals of healthy skin from diverse models displaying confident and happy expressions will be shown at the beginning of consultation sub-section

making interactions look appealing

before
after
vs.

saving user progress with exit intent pop-outs

this reduces the risk that users won't return to complete the remainder of their consultation

the copy has been intentionally positioned in a polite tone of voice to show the genuineness that we really do want help users to continue the task later, where typically these modals can come across as self-serving (for the brand)

correcting the responsiveness on consultation pages

Get in touch

hello@milysin.com

Let's connect

linkedin
medium
dribbble
© 2022 Mily Sin • Made with occasional 🥲 via Webflow • All rights reserved.