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:

  1. Sign up for a subscription plan

  2. Join a specific grief group to their age and demographic

  3. 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.

Previous
Previous

Great Scott

Next
Next

One Voice