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:
Recreating the user profile page to allow for more social engagement and quicker access to the site’s tools
Introducing a better method of creating a gift and donation registry along with a revised design for the e-commerce store
Retooling the new user onboarding process
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.