Summer 2020, Remote
Landing page redesign
A patient engagement platform that connects mental health professionals and primary care physicians with patients, for early detection of depression and mood disorders.
Product Details
Problem
Rose is a patient engagement platform that connects mental health professionals and primary care physicians with patients, for early detection of depression and mood disorders. For patients, it’s a tool to track symptoms, and for doctors, it’s a resource to stay on top of patients between appointments. However on its current landing page it isn’t meeting the goals of attracting mental health care providers which is causing not enough users will use the platform
Challenge
How might we re:construct a landing page that will persuade and lead users to a specific action that have a highly dedicated and laser-focused on goal
Goal
Work within a design system and create a landing page recommendation for Rose that is informative, purpose-driven site that drives conversion.
ROLE
UI/UX Designer: User Research, Web layout, Heuristic evaluation, Card Sorting, Visual Design, Branding, Prototyping
TOOLS
Adobe XD, Miro
DURATION
1 week solo design sprint
Discovery & Research
Evaluating the existing product, I analyzed all of the information on the landing page, the about page and all of the account sign up pages including all of the call to action buttons.
Competitive Analysis
I did a competitive analysis on other Mental Health websites to see how they are going about the pain points. I found some common pattern among all of them which helped me properly understand the Information Architecture.
Key Insights
It needs to be mobile responsive
Call to action needs to lead into one page
Color can bring value to a webpage
Informative landing page leads to a better usefulness of the website
Proto-Persona
Ideation Phase
After all the Research and Observation I started Sketching my design. I usually start the design process with low fidelity wireframes. This is the way I iterate through many design options quickly.
Low-Fi Wireframe
To better structure my design I created a low-fidelity Prototype.
UI Refinement
I choose a modern color palette and a classic font style.
Final Design
Consistent call to action buttons
Making the landing page more informative and easier to navigate
Adding texture to compliment the negative space
Adding cards for organization so it will be much more easier to navigate
Adding simple interactions like when hover it’ll change colors and dragging to the left or right to see more
Responsive Mobile Design
Outcomes
The re-designed of Rose’s landing page was received very positively by the client and users. They redesign their website and now it looks simple and clean, and it helped them feel more confident that both mental health professional and patients will use the platform.
