Relay for Life Website Design
ProtoJam 2022 - 1st place winner
TEAM
Erin Forbes, Hess Im
DURATION
2 days
CATEGORY
Design competition
TOOLS
Figma, Miro
The Challenge
This project was completed as part of ProtoJam 2022, a designathon put on by Ada's Team. We had one weekend to come up with a design solution to the following challenge:
"The challenge is to design a website. With this website, our goal is to increase awareness of events and fundraisers hosted by the University of Alberta Relay for Life. We would like to consolidate our mission, events, Humans of Relay newsletters into one common site that is easy for viewers to navigate."
My Role
Our team all worked collaboratively on the Discover and Define phases. I was responsible for wireframing, designing and prototyping the Humans of Relay, Events, About Us and Sponsors pages of the website. Myself and one other team member put together the presentation deck and presented our solution.
DISCOVER
Site Audit
VP Canvas
DEFINE
Interviews
Persona Creation
Key Insights
DESIGN
Customer Journey Map
Wireframing
DELIVER
Animated Protoypes
Event Presentation
DISCOVER
Audit
To begin the weekend, we started with an audit of the current ways that RFL communicates with their users including their donation page, Facebook and Instagram pages. This helped us determine key strengths and weaknesses for each, and what we wanted to include in our solution as well as what we wanted to improve from their current communication channels.
To include:
- Participant and donation tracking
- Human elements
To improve:
- Centralization of information
- Increased awareness of other events hosted
Value Proposition Canvas
Our VP Canvas ensured that we positioned our product around what we believed our users value and need. This helped inform our problem statement.
Problem Statement
The current organization of University of Alberta's information about Relay for Life is distributed between multiple platforms. This lack of centralization decreases the cohesion of information and limits awareness of all of the activities, events and fundraising the U of A Relay for Life does.
DEFINE
Interviews
Overnight, we each completed 1-2 interviews to learn more about people's motivations for donating to charities. We derived the following insights from these interviews:
Empathy is one of the biggest drivers of wanting to support charities.
Individuals want to gain a holistic understanding of the charity: from awareness to donation to outreach.
People want to donate or support charities where the mission interests them, but don't know where to start.
2
1
3
Persona Creation
We created two personas: one for the 'participant' and one for the 'donor'.
DESIGN
We focused on the 'donor' as the model for our solution. He wants to contribute financially to the RFL community, and see both his and others' impact but needs more information about the charity. He wants to learn about all aspects: donation, participating, connecting and more.
Customer Journey Map
The customer journey helped us to evaluate how our persona would move through the website. We saw their potential pain points at each stage and ensured that these were addressed in the solution that we designed.
Wireframes
After sketching out some ideas, we quickly got into Figma and started wireframing our solution.
