BETTERLYF : ONLINE COUNSELLING & THERAPY
Phase 01 : BetterLyf Overview and User Research
Introduction
BetterLyf is an online mental health counseling platform. The original website had usability and design issues that impacted user experience and engagement. This case study documents the redesign process to improve clarity, usability, and brand trust.
Timeline
The redesign was completed in one week, starting with designing the landing page in Figma and then developing it in Framer for interactive, responsive design.
Why Redesign:
Cluttered header mixed with content, making navigation confusing.
Weak visual hierarchy and unclear CTA buttons.
Dense paragraphs lacking clear structure.
Scattered, overwhelming sections disrupting user flow.
Color and spacing issues reducing readability and calmness.
About BetterLYF
BetterLYF is a popular online mental health service providing confidential therapy and counseling through chat, call, and video making mental health support accessible to anyone, anywhere.
Founded
2016
Location
New Delhi, India
Founders
Vikram Beri and Varun Handa
current website
The website was picked as a reference, and the redesign work for BetterLyf was created based on the existing platform’s content and structure, as per August 2025.
LIVE WEBSITE LINK
Visit the current official BetterLyf website here:
https://www.betterlyf.com
CURRENT WORKING DESIGN
This is the redesign I am working on based on the current platform:
[Link of website as of August 2025]
focus
This case study focuses on redesigning only the landing page and developing a new, cohesive design system for BetterLYF.
goals
The goal is to improve the website’s usability, visual appeal, and user experience for people seeking mental health support.
UI/UX Issues and Areas for Improvement
I noticed several usability issues on the current BetterLyf website. Going through the site section by section, I saw unclear messaging, inconsistent layouts, and complicated navigation paths. These elements made the experience confusing and less efficient for users.
I believe the design needed a clearer structure, stronger visual hierarchy, and smoother user flows. My redesign focuses on addressing these gaps to create a more intuitive and user-friendly interface.
User Research
I divided my research into two parts: understanding mental health users through direct interviews and surveys, and analyzing competitor platforms. This helped me uncover real user needs, frustrations, and expectations from BetterLYF’s website.
key insights
Many users experience anxiety and hesitation when reaching out for mental health support online; a website should feel safe, welcoming, and easy to navigate.
Users find jack-of-all-trades content overwhelming and prefer clear, guided paths to find exactly what they need quickly — whether it’s individual therapy, couple counseling, or psychiatry.
There is a high demand for simple, jargon-free language that feels relatable rather than clinical or formal.
Users want transparency and control during therapist selection—detailed, easy-to-understand profiles with clear specialties and availability.
The mobile experience must be fast and frictionless because many users access the platform on phones in varying network conditions.
User Survey Ques
How easy was it to find the service you needed on BetterLYF?
Did the website’s language and tone feel relatable to you?
How confident do you feel booking a therapist through the site?
What was your biggest frustration when using BetterLYF?
Would you recommend BetterLYF based on your experience?
Key Responses
60% said it was diffcult to find the right service quickly.
70% felt the language was sometimes too formal and wished for simpler words.
55% were unsure about the therapist selection process : profiles felt too complex or incomplete.
Many noted buttons like 'Start Therapy' were hard to identify as action items.
80% valued the platform’s confidentiality and range of therapy options but want a smoother journey.
competitor analysis
This competitor analysis guides redesign priorities for BetterLYF to address its current weaknesses and capitalize on its strengths relative to market players.
Ideate
This phase focused on understanding the problem space and gathering insights. Activities included:
Paper Sketches
In the early stages of designing Nurture, we started with paper sketches to quickly visualize the app’s layout and flow. This low-fidelity approach allowed us to brainstorm freely and iterate rapidly.
Mid-Fidelity Screens
After sketching initial ideas on paper, we refined them into mid-fidelity wireframes, focusing on user flow, layout, and intuitive interactions. This stage ensures seamless navigation and functionality before adding visuals, making the Nurture app both practical and user-friendly.
re-Building the Brand Colors
When I worked on BetterLYF’s redesign, I wanted the colors to feel calm, trustworthy, and approachable. Researched BetterLyf’s brand presence on Instagram and LinkedIn to identify authentic colors actually used in recent posts.
Selected the updated CTA color and primary shade. Since it’s a mental health platform, the palette had to be soft and reassuring while also following UX laws, accessibility standards, and design system best practices.
Primary (Brand Base)
Chose a new primary color (#289784) for its calming, professional tone. I kept teal as the main brand anchor because it already represents calmness, trust, and healing. This color drives the identity of the platform and is used in navigation, main CTAs, and links.
Secondary colour
Tried matching the secondary color with #00B8D3 as used on the site, but found both colors together too bright and lacking depth. Adjusted by creating tints and shades of both primary and secondary colors to build a richer, more balanced palette. Set a lighter background using 30% opacity of one of the tint shades of 10% of the secondary color for a soothing, spacious feel.
base colours
Used black and white as base colors for clarity, and selected a neutral grey (#787878) and its tints for overlays and soft transparency. Combined, the palette delivers a professional, calm, and accessible user experience that feels true to the BetterLyf brand refresh.
setting up typography
I chose the Inter font because it offers a professional and clean look, which aligns well with the tone I wanted for the website. I considered fonts like Poppins and Lato as well, but Inter felt the most readable and modern for this project. To improve legibility, I adjusted the letter spacing to be slightly tighter, making the text easier to read without feeling cramped.
Font Colors
I chose two main colors for the text to create a clear hierarchy. For headings, I used solid black to give strong emphasis and ensure they stand out. For subheadings and less important text, I applied a softer grey tone with tints and shades, which helps to balance the visual weight and guide the reader’s eye naturally through the content.
Font Sizes
I established a consistent font size scale ranging from 14 to 24 pixels. I used semi-bold, medium, and regular font weights to differentiate headings, subheadings, and card content appropriately. This scale ensured each text element had the right emphasis while maintaining a harmonious and professional look across the site.
Design Systtem
I chose the Inter font because it offers a professional and clean look, which aligns well with the tone I wanted for the website. I considered fonts like Poppins and Lato as well, but Inter felt the most readable and modern for this project. To improve legibility, I adjusted the letter spacing to be slightly tighter, making the text easier to read without feeling cramped.
Moodboard Research
To start the redesign, I created a moodboard by researching various websites, including competitors, to explore effective UI and UX approaches.
I analyzed their color schemes, layouts, typography, and overall style. This helped me gather inspiration and references for each section, ensuring the new design would feel modern, user-friendly, and aligned with mental health platform standards.
lo-fi Wireframe
I started by drawing rough sketches of low-fidelity wireframes based on the original BetterLyf website, identifying how many sections were needed. Using insights from my moodboard inspiration, I mapped out each section’s layout in simple lo-fi frames, which helped me create a more structured wireframe, section by section.
lo-fi wireframe
FigJam File Link