HOPE BRIDGE
A mobile-first site that provides easy and accessible grief support for people seeking connection during a dark, lonely, and confusing time.
Role
UX Designer
UX Researcher
Brand Designer
Tools
Figma, Figjam,
Optimal Workshop,
Discord
Project Type
Mobile-first
Responsive Website
Time Frame
6 weeks
(180 hours)
Background
Losing a loved one is one of the most stressful and traumatic life events someone can encounter. People often feel lonely, depressed and discouraged. Hope Bridge is aiming to provide an accessible community of support to people experiencing grief after the loss of a loved one.
The Problem
People who have experienced significant loss want to talk about their grief as well as connect with others who are suffering a similar experience, however, grief support organizations are sparse, inconvenient/inaccessible and have long wait lists.
The Solution
Providing an accessible community of support after the loss of a loved one can be a huge gift to someone who is suffering. Hope Bridge is a mobile-first grief support platform that provides a community of support, connects people through shared experiences, teaches grievers new tools to cope and manage their grief, and provides a hopeful future in the most convenient and accessible way.
Research Objectives
EMPATHIZE
RESEARCH
To understand the habits, motivations, pain points, and goals of people experiencing grief and learning more about the hardships people face with current grief therapy options, I employed 2 distinct research methodologies.
1. Competitor Analysis
Competitor grief support services do not:
Offer individual grief support and grief support groups -- it’s one or the other
All offer a community connection of support
All offer specific grief groups (demographic and loss type) even though the need is high
Successful grief support centers have:
Group therapy options
Specialized group therapy for specific loss type/relationship
Fully functional website with information and resources
2. User Interviews
Through Affinity Mapping, I was able to find common themes:
In-person groups were difficult to find and attend
Individuals struggled to find specific grief groups to their loss type
Long wait times to get into a grief group when users needed immediate support
Struggled with the idea of an end date to group therapy, wanted continuous support to grief community
Grief brought on issues within romantic relationships
DEFINE
WHO IS OUR USER?
I synthesized the insights gained in the interviews to create representative personas to humanize the user and to guide later design decisions. My research led me to identify two user personas: Annie, ‘the shoulder to cry on’, and Scott, ‘the Scrooge.’
Creating these specific personas allowed me to eliminate any personal bias I may have initially started with. The most crucial things for these users were rooted in their personal and social needs which include connection to others who are experiencing similar grief, companionship, and coping skills. Their motivations also helped me identify them as separate user categories.
Storyboarding
Storyboarding was beneficial for me to understand the user more deeply, their pain points, and to explore possible solutions to ultimately demonstrate the user goals. Here is 1 of the 2 storyboards I created based off my user personas:
Identifying The Problem & Developing Solutions
Once I was able to determine user goals, motivations, and current pain points, I not only found a problem through Point of View Statements, but also turned it into How Might We...? questions to then solve for a solution.
Information Architecture: Card Sort
Since I was designing a new product from the ground up, it was key to discover user’s mental models by seeing how they sorted different cards into categories. To gain insight, I ran a hybrid card sort:
Key Takeaways:
3 new categories were created -- 'Online Community,' 'Virtual,' and 'Personal'
The dating category formed very clear patterns
The results imply that clearer labels need to be created to define categories
IDEATE
STRATEGY
Site Map
With a provisional blueprint of the site’s AI, I created a site map to visualize how the site’s content might be organized and structured. I relied on my card sort and tree test to help mitigate any confusion, to determine user’s mental models, and to create a more enjoyable and easy user experience.
User Flows
To help visualize the decision points and potential pathways that users may take in order to complete functions within the product, I created a user flow centered around joining a specific grief group for a specific demographic and loss type.
The first two green rectangles show two different paths the that user can take, one being if they already have an account, the other being to create an account.
The four diamonds next to each other represent where the user must choose a subscription plan.
Low Fidelity Wireframes
Once I identified the key pages I was designing for, I took pen to paper to sketch out different possibilities of site design to then translate into wireframes.
Below are sketches of creating an account flow. I tested this flow in the early stages to determine if the flow progression made sense to users and to make sure it didn’t feel too heavy with copy/instructions. I also designed two profile screen options to test which one was the most user friendly before moving to mid fidelity.
DESIGN
IU DESIGN
Mid Fidelity Wireframes
After running a usability test on my sketches, I digitized to mid fidelity wireframes to ensure that the product was structured in a way to support and facilitate user goals before committing to high fidelity.
It was important to make sure that the product supported and facilitated both user goals and Hope Bridge’s business goals. While designing the wireframes, I kept the following considerations in mind::
Usability test participants liked the idea of a tiered subscription service and wanted to make sure that the different levels of payment options were clear and precise
Because multiple user research participants mentioned the desire to date other grievers, I designed a dating flow where users can create and edit their dating profile
Design responsiveness — interview participants mentioned they would use this site on both desktop and mobile so making sure it’s accessible on both was top priority.
Logo, Color Palette, Typography & UI Kit
After receiving negative feedback on the original name of the site, Grief Connect, the name was switched to Hope Bridge. With scalability in mind, I wanted the logo to mirror the brand’s name with the sun rays surrounding the ‘O’ to represent warmth and hopefulness.
Having established the basic architecture of the site, I began to explore the different ways in which Hope Bridge could look aesthetically. Aiming for a safe, welcoming and calming style, I chose a natural green and purple color palette, distinctive enough to express the brands attributes, while understated enough to play a supporting role to the content. These traits are echoed in both typography and iconography.
High Fidelity Prototypes
With the color palette, typography and icon set created, the mid-fidelity wireframes evolved into high-fidelity prototypes.
TEST & ITERATE
INTERACTION DESIGN
Usability Testing
My goal was to see if users could successfully complete specific task flows to test the ease and usability of each. All Participants in this moderated test have grieved/are grieving an immediate family member.
The tasks were as follows:
Sign up for a subscription plan
Join a specific grief group to their age and demographic
Edit their dating profile
Findings:
All participants were able to complete their tasks, however, ease could be improved.
Improvements/Iterations
I prioritized my feedback to make changes to my designs based on usability tests and standard design practices.
Subscription Plan Adjustments:
So that users didn’t feel bogged down with copy and type, I edited and shortened the copy in order to create more negative space within the promotional banner and under the “Best plan for you” header.
Within each card for the subscription plans, I created bullet points edited from lengthy paragraphs to allow users to quickly skim each subscription plan and be able to see the differences more quickly and efficiently.
Button Adjustment:
Since users were unsure of what the label ‘Companionship’ meant and looked elsewhere on the home screen before clicking ‘Companionship’ to get to their dating profile, I changed the button label from ‘Companionship’ to ‘Dating’ so there would be no confusion and it would be a better/faster journey for the user to get where they want to go without any second guessing.
Completed Account Page Adjustments:
I removed unnecessary buttons to not overwhelm users with so many options and feel like they were hitting a “green wall.”
I created an easier and faster way for users to get help at the bottom of the screen in case the user needs help in anyway. By designing this in type/copy rather than in a ‘Help Center’ button, I was able to allow more negative space which will be less overwhelming to the user.
Finalized Design
Click below to view my finalized design in an interactive prototype. After iterating on my designs based on user feedback, I found that ease and accessibility were greatly improved.
The 3 flows that I created for my MVP are as follows:
Create a new account and subscribe to a subscription plan
Log in to your account and join a structured grief group to your demographic and loss type
Update your dating profile and check your matches
CONCLUSION
FINAL THOUGHTS
Reflection
The finalized design was built and iterated upon user feedback and input during each stage of the process. Going into this project, I knew I would be constructing a mental health website around grief, but I had no idea that it would lead me to features such as demographic and specific loss type grief groups as well as grief dating. Conducting user research was key into finding problems that I didn’t realize existed. User research, user testing, user input and staying aligned within business goals shaped this product by allowing me to rid my assumptions every step of the process and intentionally design a meaningful product that is useful and dynamic for people seeking a grief community.
Next Steps
The next steps would be to do another round of testing on the iterated prototype and continue to iterate based on new usability testing. As the product develops, I will include more features and functionalities so that the user flow is more seamless. Continuing with testing to update the prototype to gather feedback and to identify additional areas of improvement is key.