Donate Car Cancer
Case Study
My Role: UX Research and Web Prototype
Tools: Figma, Figjam, Slack, and Zoom.
Duration: 3 Weeks
Team: Aida, Larissa, and Farah
A non-profit organization that is commited to funding organizations that help children fight cancer. They contribute to this cause by collecting and appraising donated vehicles. The proceeds from the vehicle appraisal are endowed to partner organizations.
Why we are redesigning Donate Car Cancer?
We are redesigning this organization because it doesn’t provide the correct information when someone is looking to donate to a cause. The information provided on the site isn’t easily accessible, and there should be no confusion about what the organization does.
Problem
Our web page was designed to connect caring individuals with a vehicle to donate to quality charities that are active against kids cancer. We have observed that our site isn’t meeting credibility and legitimacy factor with our audience.
We began by creating a survey
16
Responses
Google Forms
88 %
Responders
Ages 18 through 30
69 %
Responders
Believe donating is “ moderately” to “very” important.
Then conducting user interviews
“At the end of the day I like to focus on who I’m trying to help and making sure that some impact was made”
“What is going to happen to it [the car I donated]? Is it going to help someone? [ I want to ] have some kind of assurance that [ I was ] able to help somone.
Key Learning
Users seek consistency in UI in order to trust that an organization is a credible place to donate
Users would like to know how their donation is used in detail.
Trust and ease of donation and core values are key factors that influence users to donate.
User Persona
User Flow
We created two user flows based on everyday tasks that the target user/fan would do on the site.
Usability Testing
With both of the user flows in mind, we started putting together a usability testing plan for our users that we were going to interview. We gave them a couple of tasks to see how they would navigate the website. The challenge here was considering the existing site and how the user would understand and go through each step. The insight of this process will navigate how we would redesign the website to make it more understandable and easily accessible for the user.
Before
After
After usability testing we changed the wordage of the navigation bar and continued to user test other individuals and see if that made a difference when the user approached the website.
Lo Fidelity
Site Map
We created the sitemap below to help guide our user flows. We simplified the drop-down wordage because, from our previous testing, users found the original tabs confusing. Then, we split tasks among our group and designed the individual aspects we agreed on.
Mid Fi Prototype
After our mid-fidelity testing, our users still found the drop-down difficult, so we revised it one more time. We applied that to our final design, and our testing was finally successful with the new rephrased tabs.
Original Website
Final Product
UI Style Guide
Green
#C1C33C
Purple
#7F4F8F
White
#F45C43
Teal
#35A1A1
Reflections + What I’d do differently next time
Make a team agreement in advance. Keep checking in with one another and ensure that every person in the group carries the same amount of weight.
Do as much user testing as possible. Knowing how users interact with the website is critical to solving issues. Refrain from assuming what issues a user might face. Let it play out organically, and then address the issue.