MENTAL WELLBEING & EMOTIONAL HEALTH PLATFORM
BETTERLYF : ONLINE COUNSELLING & THERAPY
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.
I decided to divide the redesign into four main phases to keep the work organized and focused.
Phase 01
BetterLyf Overview and User Research
Phase 03
Designing the new landing page
Phase 04
Building the landing page prototype in Framer
Phase 04
Creating responsive layouts and building them in Framer
Phase 05
Designing and developing other website pages
phase 01 : BetterLyf Overview and User Research
In this phase, I focused on user research to understand the needs and challenges of BetterLyf users. Based on the research, I created a new color palette and a refreshed design system to improve usability and consistency. This foundation sets the tone for the whole redesign, ensuring a better and more cohesive user experience.
Case Study
FIGMA
Design File Link here
phase 02 : Designing the new landing page
This is Phase 02 of the BetterLyf project. I designed the entire website UI from scratch, making it clean and easy to use. I improved the design based on user feedback and applied UX principles like simplifying choices and making buttons easy to tap. The new look is fresh, modern, and much more user-friendly than before.
Case Study
phase 03 : Building the landing page prototype in Framer
In this phase, I build the landing page in Framer by setting up files, organizing layers, creating clickable buttons, and adjusting margins and spacing for a clean prototype.
framer link
To be updated
phase 04 : Creating responsive layouts and building them in Framer
In this phase, I make the landing page responsive in Framer, changing how sections like the hero and content blocks adapt between desktop, tablet, and mobile—switching layouts from horizontal to vertical or stacking as needed.
framer link
To be updated
phase 05 : Designing and developing other website pages
In this phase, I design and develop other website pages, including all therapy and help sections, making sure everything follows the new style and navigation stays smooth.
framer link
To be updated