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
I had a constant feeling of "am I done yet"
so. much. reading.
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 canprovide 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
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
applying branding guidelines to supplement user inputs with illustrations
minimised cognitive overload - supplementary and "further detail" copy are expandable using "i" icons
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
before - there was an attempt to include a progress indicator across desktop and tablet, but actually the indicator remained static throughout the whole consultation experience, meaning that it served minimal purpose in the moment, this progress indicator was also not replicated on mobile
after - consistency achieved across all formats with a sticky progress indicator
carousel showing the before and after of the consultation layout in desktop, mobile and tablet
.png)
.gif)
.gif)
.gif)
.gif)
.gif)
.gif)
.gif)
