Case Study:
Bloom Service App and
Responsive Website
Project Overview
The Problem:
43.8 million adults experience mental illness in a given year. 1 in 5 adults in America experiences a mental illness. The strategy team at Bloom Service has identified a lack of education and awareness about the mental health resources and more.
The Goal:
Design an app that integrates mental and physical care to offer the hope of wellbeing for people.
The product:
Bloom Service is a California-based nonprofit charitable organization focused on people's mental and physical health. The organization needs a tool that helps people learn about and manage their health. Bloom Service’s primary target users include old age people who need extra help regarding their health or connect with other caregiver families.
Project duration:
January 2021 to March 2021
My Role:
UX designer leading the app and responsive website design from conception to delivery
Responsibilities:
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.
Understanding the user
I used Bloom Service’s data on mental health problems to develop interview questions, which were then used to conduct user interviews. Most interview participants reported feeling depressed about mental health issues, but they didn’t actively try to reduce their own mental health problems. The feedback received through research made it very clear that users would be open and willing to work towards their own health issues if they had access to an easy-to-use tool to help guide them.
Persona & Problem Statement
Amelia is the wife of a chronic patient who needs a platform to connect both patient and family caregiver because she wants to expand access to mental health services.
User journey map
I created a user journey map of Amelia’s experience using the site to help identify possible pain points and improvement opportunities.
Starting the design
Sitemap
Difficulty with website navigation was a primary pain point for users, so I used that knowledge to create a sitemap.
My goal here was to make strategic information architecture decisions that would improve overall website navigation. The structure I chose was designed to make things simple and easy.
Paper wireframes
Wireframes
Next, I sketched out paper wireframes for each screen in my app, keeping the user pain points about navigation, browsing, and checkout flow in mind.
The home screen paper wireframe variations below focus on optimizing the browsing experience for users.
Screen size variations
User access the site on a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.
Digital wireframes
Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience.
Prioritizing useful button locations and visual element placement on the home page was a key part of my strategy.
Wireframes
Screen size variations
Usability study findings
This prototype was used in an unmoderated usability study with 5 participants. Here are the main findings uncovered by the usability study:
1. Call Button
People need a call button or number to reach for immediate help
2. Login Page
People need the login or sign-in page if the users want to add the information.
3. About Us Page
People want to know about the doctor panel or healthcare who are helping them.
Refining the design
Mockups
Based on the insights from the usability studies,
I applied design changes like providing a clear section for calling the direct number to reach in the home screen
Additional design changes included adding a page as login or sign in for returning users.
High-fidelity prototype
The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes made after the usability study. View the Bloom Service high-fidelity prototype Click here
Responsive designs
The designs for screen size variation included mobile, tablet, and desktop.
I optimized the designs to fit specific user needs of each device and screen size.
Accessibility consideration
Testing the designs, I created a low-fidelity prototype which you can view here. This prototype was used in an unmoderated usability study with 5 participants. Here are the main findings uncovered by the usability study:
1. Headings
I used headings with different sized text for clear visual hierarchy
2. Landmarks
I used landmarks to help users navigate the site, including users who rely on assistive technologies
3. Screen Readers
I designed the site with alt text available on each page for smooth screen reader access