Impact
Award-winning website design solution for University of Alberta Relay for Life (UARFL), taking 2nd Place in an international designathon with over 100 participants and 25 teams participating.
My co-workers & I decided to tackle the ProtoJam 2022 designathon (hosted by Ada's Team) as an opportunity to challenge & hone our design and collaboration skills under a tight timeline. For this designathon, each team of 2-5 designers had the opportunity to design solutions & products for different non-profit organizations in this "design for good" initiative. My remote team "Three Coasts" (we were based on the East, South & West coasts, respectively) discussed together and chose to design for the UARFL track.
We used the Double Diamond design thinking process to keep organized during the tight 24-hr timeline of this designathon, and to help keep our designs & solutions user-centric throughout the process.
Empathize/Research
Kicking off this project, we met with a representative from UARFL to learn about their needs, pain points, goals, current means of communication & engagement and their target demographic. They provided us with their logos, current color palette in use on social media, and problem brief. We were able to continue communications with them to ask questions and learn more about their requirements throughout the 24-hr designathon via the ProtoJam UARFL Discord channel.
We discovered that most of UARFL's engagement came from their instagram & facebook accounts, but they did not have an organized way for people to connect, learn about UARFL & its events, get involved or access resources such as their newsletter. They were looking for a way to consolidate all this information. UARFL's target audience was primarily college students, but they were also looking to expand into faculty staff and potential University of Alberta students currently in high school.
Provided Problem Brief
We started with creating a proto-persona from the pain points, insights & the provided target demographic we gained from our UARFL stakeholder. Meet Kelly, a pre-med student at University of Alberta, who is looking to be involved & make a meaningful impact in the campus community:
Next, we collaborated to create a hypothetical empathy map (due to the time constraint of the designathon) to organize & empathize with what our proto-persona Kelly thinks, feels, says & does. We identified a good future opportunity here for additional research (surveys/interviews) within the University of Alberta student body who are looking for volunteer opportunities.
Define
We drafted a problem statement & hypothesis from both the client's (UARFL) perspective, as well as the users' (volunteers/members) perspective to address the goals from each perspective.
After brainstorming, we decided a good solution would be a responsive website design consolidating UARFL's resources, information and social media communities into one place. This responsive website could be accessed via browser on either desktop or mobile devices.
Hypothesis
Client: "UARFL needs a way to consolidate their information onto a main platform where people are able to easily access the organization's resources, because it will increase traction and engagement for their organization."
User: "Volunteers/Members need a way to easily find information and discover how to get involved with UARFL to make a meaningful impact in their community, and they want to feel that their time and effort is valued."
Then, we collaborated to empathize with & imagine the user journey, associating our persona Kelly's actions with touchpoints, possible friction points, thoughts & feelings to set the stage for our site architecture.
We began to organize the actions that users would take with the features & content our UARFL stakeholder desired (social links, volunteer/donation forms, newsletter, sponsor/volunteer lists, videos, podcasts, testimonials, etc...), and created a sitemap to organize the website structure and desired pages that we would be building:
Sitemap
Ideate/Design
Information Architecture in place, we gathered some inspiration for potential layouts & visual elements that we might like to leverage in our designs.
To avoid "group think", each team member separately sketched out quick visual low-fi representations of the screens & features we wanted to design, then we discussed & compared our ideas to decide how we would proceed with layout & design moving into high-fidelity.
Design System
I created a mini Design System with color, typography & grid styles and components to streamline our high-fidelity design. Included are the logos provided to us by UARFL.
I applied a 12-column grid and 4-point grid system to ensure alignment & spacing consistency between the elements in our responsive wireframes.
Prototype
High-fi Responsive wireframes & prototype in Figma
Prototype Walkthrough
We created a short video presentation talking through our design process and showcasing our prototype for our project submission...and we were delighted to win 2nd Place for ProtoJam 2022's UARFL track!
