A new design for a responsive social media and e-commerce site supporting cancer patients, survivors, and their loved ones

 
 
 

Introduction

Project Role

UX/UI Designer

Project Duration

October 2020 - March 2021

Responsibilities & Outputs

Market and User Research

Interaction Design

Wireframing

Prototyping & User Testing

Visual Design

Tools Utilized

Sketch

Figma

InVision

Adobe Creative Suite

Whimsical


Mend Together is a social and e-commerce platform with the intent of helping cancer patients and survivors connect with their network and receive the emotional and financial support they need. I joined the company as a member of a new product team with the intention of overhauling the responsive website to solve systemic design and technical issues users were facing. 

During my six month contract, I worked on the following design improvements:

  1. Recreating the user profile page to allow for more social engagement and quicker access to the site’s tools

  2. Introducing a better method of creating a gift and donation registry along with a revised design for the e-commerce store

  3. Retooling the new user onboarding process

  4. Implementing a refined and consistent design system in tandem with engineering team

Research & Discovery

 

Creating a plan

Cancer patients and survivors face a significant amount of challenges in their day-to-day lives, and Mend’s mission is to be a resource to assist them through their journeys of treatment and recovery. In order to fully address these users’ needs, I introduced a number of tactics to glean insights into their needs and motivations. These included:

  • Individual user interviews

  • Group interviews with members of cancer patient and survivor organizations

  • Surveys and questionnaires sent to cancer patient and survivor organizations

 

Understanding our users

Following this discovery process, I identified several key insights into our users to guide my design decisions:

Physical and emotional well-being

Patients and survivors face daily physical and emotional challenges that make tasks difficult. Most users are unable to spend more than 15 minutes in one session of using the site.

Demographic detail

Most of the current’s sites users skew older and not all are digitally fluent. Interviewees frequently mentioned they have trouble navigating digital spaces regardless of their symptoms.

Comfort and connection

During their treatment and recovery, our users are looking for connection with their personal networks and other patients and survivors dealing with similar circumstances and challenges. They endure many difficulties through their treatments and recovery and appreciate a comforting and friendly tone.

 

Understanding our business

I also conducted interviews with Mend Together stakeholders and customer support staff to understand the business objectives of the relaunch and areas where current users have the most trouble with their experience.

Looming deadlines

We were under pressure to redesign and launch the new version in a very tight timeline - we would need to identify what areas would have the biggest impact for our users.

New infrastructure required

The site’s backend was riddled with bugs and would require a full overhaul - I would need to work closely with the development team to find the quickest way to rebuild the site from scratch.

Lackluster user engagement

Many users found the current site’s onboarding flow too long and confusing, and many registrations were abandoned. Users were also not using the full functionality of their user profiles and did not receive much engagement with their profile content. Patients and survivors had difficulty creating registries and cash funds, while supporters were unable to donate funds and gifts easily.

UX Strategy

 

Planning my approach

Following the discovery process, I took away one main insight into our users that would serve as the bedrock for all of our design thinking:

Our users are emotionally and physically drained - they need to be able to accomplish their tasks quickly as most are unable to spend more than 15 minutes on the site in one session. They should always feel empowered and comforted throughout their experience.

I worked with the Mend Together stakeholders, senior designer and development team to highlight the biggest problems to tackle in our abbreviated timeline.

 

Reimagining our site infrastructure

The site’s infrastructure would need to be rebuilt, which is a time consuming task.

Solution: Implement a new design system

Create a new design system that would both deliver a pleasing visual design experience and easy implementation for the developers.

 

Updating the user profile page

The user profile page was not accomplishing its goal of generating social engagement between users.

Solution: Lean into social media’s best practices

Lift standard social media design practices to make it easier for users to communicate and highlight the site’s tools on the page for easy navigation.

 

Revamping the e-commerce store

The registry creation process and general shop experience was cumbersome and confusing. Patients and survivors found it difficult to create registries, while their supporters had difficulty donating funds and purchasing gifts.

Solution: Condense the shop

Streamline the registry creation and management process for ease of use. Increase the visibility of donation opportunities on registry pages, in particular reducing the steps required of users to donate to cash funds.

 

Registry Creation User Flow

Registry & Shop Wireframes

 

Streamlining our user onboarding process

Onboarding required too much effort and did not represent the brand’s intended tone of welcome and support.

Solution: Initiate our users faster

Shorten the onboarding process. By prioritizing the information required from new users, we shortened the registration process and allowed for users to come back to the site and complete their profile in the next session as opposed to abandoning the registration altogether.

 

Previous User Flow

Revised User Flow

Visual Design

 

Developing a new design system

Per our first problem, I collaborated closely with the engineering team to find an easy-to-implement design system. We decided to use a design system called Chakra and I updated the styling and components with Mend Together’s visual identity.

 

Updating the visual design

With the experience mapped out, design system set, and users considered, I created high fidelity designs based off of the wireframes. At this point we were reaching the delivery deadline for the new site launch so I applied the design system in the most efficient way possible while maintaining the core of the brand styling.

 
 
 
 
 
Previous
Previous

MITRE Engenuity

Next
Next

Fable