Open Site Navigation

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.

DELIVER

Event presentation and final prototype

© 2023 Christine Leathem