.png)
Quarter-life Therapy Website
Overview
IS THIS IT? is a therapy platform where users can book counselling/therapy sessions online specifically aimed at those struggling with their mental health in their quarter life years (mid 20's - mid 30's). The client approached me to design a new website in their current platform (WIX) so they could continue to alter it in the future when required.
The aims they had for the re-design were:
-
Improve conversion rate once users hit the website (from Instagram).
-
Have a clear brand identity.
-
Improve copy to more closely match and support content already present on Instagram.
Role: UX Designer & Researcher
Tools: Figma, FigJam, Adobe CC, Pencil & Paper (and coffee, always coffee)
Hover
UX Research
-
Background
IS THIS IT? is a therapy platform where users can book counselling/therapy sessions online specifically aimed at those struggling with their mental health in their quarter life years (mid 20's - mid 30's)
Research Goals
To explore how other therapists in similar fields on Instagram obtain/convert new clients and how they reach the website and its primary purpose. And also assess what users are looking for in therapist through Instagram and how the content can be tailored to encourage bookings.
-
Methodologies
Competative Analysis
Behavioural Metrics
-
Competative Analysis
-
Behavioural Metrics
The client provided access to the behavioural metrics for their current website which showed most users were scrolling through the landing page (home) from Instagram and dropping off the website before moving to the 'work with me' section, the desired point of filling out the application form and booking a session.
While the metrics were limited there was drop off at two points.
-
Research Findings
"Discover how to say goodbye to overwhelming anxiety & hello to self-trust."
Therapy with Jess
Colour Palette
Content
Brand & Tone
-
Quite copy heavy.
-
6 header menu options.
-
Pricing listed transparently at base of home page.
-
Welcome video on landing page.
-
Free 'funnel content' to encourage interaction.
-
Neutral & calming.
-
Colour blocking between white and a neutral colour.
-
Language is friendly and warm but professional.
-
Semi-consistent colour use throughout, no vibrant colours.
-
Links back to Instagram at various points.
-
Most opening statements speak to users deeper desires (reduced anxiety).
Laura Wood Therapy
"Therapy for people who take care of everyone else"
Laura Wood Therapy
Colour Palette
Content
Brand & Tone
-
Moderate copy.
-
7 header menu options.
-
Has a dedicated 'my fees' section including a 'why does it cost this much' document (honest and transparent, builds trust).
-
Anonymous testimonials.
-
Neutral & calming.
-
Minimalist bichromatic palette can lack variety.
-
Language is professional and affirming.
-
Colouring is simple and consistent but potentially lacks variety.
-
Links back to Instagram at various points.
-
Most opening statements speak to users directly, using 'you' a lot.
"For the tender, messy & what feels to be impossible moments after a relationship breakup"
Harriet Curry Therapy
Colour Palette
Content
Brand & Tone
-
Minimal copy.
-
Single page, single header menu option leading to page anchor (enquiry form).
-
Pricing within FAQ's.
-
A lot of white space around copy.
-
Regular images of therapist.
-
Neutral & calming.
-
Lots of fabric style pattern
-
Language is friendly and warm but professional.
-
Colours not consistently used, no clear style.
-
Links back to Instagram at various points.
-
Most opening statements speak to users deeper desires (reduced anxiety).
#1
When the user encountered large quantities of hard to read text on the home page (too much copy in too small a size).
#2
When they discover the pricing or when can't find the pricing.
Relevant, easy to read content. Neutral and calming colour palette.
Most users will be skim reading, content should be readable (good contrast and text size) and relevant/succint.
Most users are initially visiting from via mobile.
The mobile offering needs to be the primary focus and desktop secondary, though users appear to re-visit the desktop site after mobile.
Pricing is important, honesty is preferred.
Being transparent with pricing is less likely to waste users time. Explaining how the price was set builds honesty and trust.
Hover
UX Design
Business Goals
-
Increased website interaction.
-
Improved conversion rate of users arriving at website via Instagram.
-
Clearer brand identity.
-
Updated content mirroring more recent Instagram content
User Goals
-
Learn more about the therapist.
-
Read helpful, trust building content.
-
Find the price quickly and transparently.
-
Clearly understand the benefits and purpose of the therapy being offered.
-
Check availability and book a session.
-
Create relevant, easily readable content that utilises graphics where possible to minimise copy
-
Build a brand identity through consistent colour use and copy tone.
-
Provide easy access to the booking system and transparent pricing.
Project Goals
-
Project Goals
UI Design
-
Brand Identity
The client had a text logo and pre-existing colour scheme they wanted to retain, as this had been used on her Instagram extensively.
Buttons
Primary
Secondary
#FF7856
Colour Palette
#87B1FD
#E9F3EF
#E6EFFF
Logo
Typography
H1 - Tinos (Regular) 60px
H2 - Tinos (Regular) 36px
Body - Monserrat (Regular) 20px
Buttons - Monserrat (Bold) 20px
Re-design
Re-design
-
Improvements
Original
Usability
- Increased paragraph text size, bolded paragraphs at certain sections to improve readability when skim reading.
- Improved colour contrast and removed colour combinations with poor readability and contrast.
- Reduced quantity of text and introduced graphics to break up text and increase variety.
- Increased paragraph text size, bolded paragraphs at certain sections to improve readability when skim reading.
Brand Identity
- Improved copy consistency to more closely match the relaxed, informal & friendly tone established on Instagram.
- Utilised existing colour palette but distilled them down to neutrals (used for backgrounds) and accent colours (for CTA's and drawing user attention.
- Utilised curved shape dividers between sections and smoothed any sharp corners to create a softer style.
- Requested, edited and utilised photos of client with a similar style and colour balance.
Flow
- Reduced the number of pages to 5 to 3 (Home, Work with me & About).
- Swapped the booking form from a separate new window to be filled in site.
- Added a back to top button to return to the nav bar (some pages are fairly long).
- Added consistent CTA's to take user directly to the in-site booking form with transparent pricing.
-
Comparison
Home Page
Work with Me -Why choose me...
Re-design
Original
Work with Me - Landing
Re-design
Original
Home - Working together
