Cancer Survivors' Fund

A user research project to learn how “Redesign” the website with user research, card sorting and site mapping

THE PROBLEM

How we can help cancer survivors to  continue their education for personal growth and better, brighter future!

There are a lot of people who want to help out charities but are wary if their donations are actually making an impact to their recipients. We can help communicate the good work done by the Cancer Survivors’ Fund and, in turn, solicit more funding, by redesigning it to be more transparent, authentic, and by providing options that will make the giving process more personal.

HIGH LEVEL TIMELINE

Two weeks

MAKE OF THE TEAM

Group project (Redesign government branch website)

KEY GOAL

We are turning Cancer Survivors’ Fund 2.0 into your favorite resource app for sourcing and giving help to cancer survivors. Whether donating for the first time or making recurring ones, our verifiable, social-proven, multi-platform, and targeted system will make sure that your donation is making the impact that you want.

My Role

Research, Ideation, Visual, Interactive Prototype, Redline evaluation, Info architecture, wireframes, sitemap

groupI am the UX designer student in UCI bootcamp and I choose this website as a project for redesign and user research experience. Since it was a personal project I provided wireframes and mockups for the app and based on our research findings and design recommendations , I decided to improve their designs in order to have more constinsancy and transparency. To uncover assumptions of the website’s users and to develop user personas we used the set of proto personas we created to communicate designs and how impacted website users.

persona

UNDERSTANDING THE USER "Users' Insights"

I aimed to improve my user experience, site mapping & information architecture, develop branding, and interaction experience between website and users based on my research and users’ insights. Some user insights included as below:

“I care about the transparency and the credibility when it comes to donation. ” Lion Hog, Ca

“Before I check a charity site, I usually have already decided that I wanted to donate. Sometimes the site is just for validation.” Lyna Nora, AZ

UNDERSTANDING THE USER "Survey Results"

I aimed to improve my user experience, site mapping & information architecture, develop branding, and interaction experience between website and users.

Transparency

By being transparent, nonprofits are able to show donors that they have sound ethics and are responsible with donations, thus encouraging donor loyalty.

Social Proof

Positive reviews (testimonials) from: Beneficiaries who have benefited from your work. Current donors who believe in your cause and the efficacy of your organization to make an impact.

Lack of information

information about donating Prosthetic Limb was often hard to find and rarely sufficiently specific.

Many step for donate

People don't like to take many time to do a process for donation

Click to see full images

BREAKING DOWN THE PROCESS

In order to reach my goals for redesigning the website I break it into smaller sub-projects and I wrote down all action steps included below:

We analyzed the cancer survivors’ found website and we defined our website’s target audience, so based on that we found out what is the most impressive part of website for users and what is not. I prepared the documentation process about our changing  desired design based on user needs and then we did setup our goals and started to redesign the website.

THESE WERE SOME MAJOR LEARNINGS OR POINTS I WANTED TO CALL OUT

Click to see full size
Information Architecture  (Card Sorting)

In order to build a new framework base on new visual layout, and also improve the navigation through the menu I used affinity diagram and card sorting method. I started by listing each primary and secondary navigation item and ask the people to arrange them into a hierarchy that was clear and organized for them. I eliminated some categories by rearranging hierarchies based on users’ viewpoints.

Click to the full size
Information Architecture (Site Mapping)

Based on my redesigned IA, I focused on improving the main navigation menu. I performed a sitemap as an essential part of the design to make informed decisions on how the website should look and feel and goal is to make it easier for the user to navigate through the site and have the comprehensive navigation.

Click to see full size
Style Guide

Create a style guide helped me in order to highlight the brand vision and revitalize the appearance of the website. I decided to go with neutral green and blue colors to show a freshness and life.

Click to see full size
Journey Map

Define the columns and grids is the easy way to have an organized design. I merged the grids to my page layouts with margins to make it easy for the users to find everything in its proper place.

LESSONS LEARNED

During our surveys & interviews, we discovered that charity donations are impulsive, emotional decisions and, when funds are not an issue, people are willing to donate more if they feel organizations are legit and that their contributions are genuinely making an impact.

Therefore, we believe that transparency and social proof to validate a non-profit’s cause and progress, and that we might be able to help if we communicate these visually.

We might do this by allowing the website to provide more current updates, gain verification from credible institutions, and include ancillary information such as cancer survivorship-related stories and research. Doing this will further legitimize our non-profit which will result in an increase in donations.

Future Development

Robust Account Page

Mobile App Companion

(Best for keeping tabs for Fundraisers)

Add Private Challenges

Sometimes individuals just want to keep their habits private

See Prototyping