independent redesign

redesigning the key web touchpoints of a prescription based online skincare brand
project overview
role
user research, usability testing, prototyping, UX & UI design
scope
independent redesign
timeline
2 months • Oct'21 - Nov'21
project toolkit
Figma + Notion
pre-face
this is a self-initiated redesign project is based on the brand Skin+Me

as a portfolio piece, the work completed was not commissioned or implemented by the company
examples of redesigned screens as part of the project
project introduction

improving a "digital skincare consultation"

Skin+Me offers mass customisation in an all-in-one skincare treatment prescribed by dermatoligists

this bespoke beauty brand responds to demand of users wanting prescriptive skincare. they enable clients to receive dermatological treatments via an "online consultation". Skin+Me's monthly subscription covers the cost of the initial consultation and the delivery of their unique all-in-one dose and on-going advice

currently, the brand seems highly focused in lead generation

Skin+Me are offering a significant price reduction for new users in their first month, from £19.99 to £3.50. users can try the product before committing fully

on the outset, that's a great idea!
get's people to start using the services because there is already an initial investment involved
the brand cannot offer the product for free because servicing the customer comes at a cost

enticed, I personally had a disappointing & frustrating experience

business problem

potential high drop off due to 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
current user experience of Skin+Me

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

design assumptions

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

mid-fidelity wireframes

I translated these task flows into mid-fidelity wireframes
consultation mid-fidelity wireframe flow
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 longer
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

landing page in responsive formats

for closer viewing - clicking on each screen will open them in full scale within a new tab

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

carousel showing the before and after of the consultation layout in desktop, mobile and tablet
interactive prototype (mobile)
view prototype in new tab
other projects
introduction researchideationinterfacefinal solutioninteractive prototype