Case Study — Run For It
Activity Tracking meets Fundraising — one step at a time.
Project Summary
Run For It is an app that aims to raise funds and bring awareness to global warming/climate change by encouraging people to get active through tracked, daily physical activity. Initially organized as an annual (offline) charity half marathon, Run For It eliminates the physical barriers that prevent people from participating in these organized events to show their support simply by walking or running — anytime, anywhere. My role was to research, design, and test all UX-related activities. I collaborated with two designers also responsible for UX, and two designers focusing purely on UI.
Timeframe
3 weeks
Client
The Great Climate Race
Ben West, Co-Founder & CEO
Mari McMillan, Co-Founder & Director of Engagement
Task
Develop a prototype product to showcase as a demo to clients.
Platforms
iOS (iPhone)
Collaborators
UX Designer: Bryan Leung (me)
UX Designer: Victoria Lawson
UX Designer: Carrie Ivens
UI Designer: Candy Leong
UI Designer: Daryna Dvirna
Design Methods & Tools
Domain Research, Comparative Analysis, User Surveys, User Interviews, Card Sorting, Feature Prioritization, User Flow, Use Case, Storyboard, User Personas, User Scenarios, User Stories, Information Architecture, Paper Wireframes, Sketch, Photoshop, InVision, Marvel
DEFINE
Introduction
Our clients, Ben and Mari, are founders of an organization called The Great Climate Race — a walking/running event series that enables participants to crowd-fund for local renewable energy projects. This year is the second annual 10k and 2.5k walk/run in Vancouver + international virtual race.
The Opportunity
Organizing a race is not an easy task, and there were many individuals out there that either couldn’t make it to the annual race event. Users wanted to participate “virtually”, either due to scheduling conflicts or being out of town/country. Our clients saw an opportunity to develop an app, Run For It, designed to raise funds for projects like solar, and potentially other causes in the future. The notion of “virtual racing”, which Run For It would facilitate along with fundraising, solves the problem of putting on live events and creates an opportunity for fundraising throughout the calendar year, not just around the time of the live event.
“The idea is ‘hey I’m going for a run or walk or epic bike ride across the country — why not raise money while I’m out there?’”
The Challenge
There are a dozens of fitness tracker devices/apps out there, but none that integrates per mile/kilometre fundraising, the ability to receive pledges, or directly donate through their platforms. Also, fundraising is difficult for everyone. Organizing live events like running or cycling events is incredibly challenging. So much work can go into an event, but at the end of the day, it’s weather dependent. Not everyone who wants to do good will want to attend those types of charity events.
DISCOVER
Research and Discovery
Our client had given us quite a hefty list of wishes, and also specified with clarity who they believe would be the target market for this app. This was their criteria:
- The Debbie Good Doer — male or female — between the ages of 28–48, makes an above average income, has an active social life and gets more done in a day than most get done in a month. S/he is usually a parent who cares deeply about doing good in the world and isn’t afraid to recruit anyone and everyone from friends, family and colleagues to pool fundraising resources. S/he is the cheerleader, keeps people motivated and is competitive. Debbies are organized, relatively tech-savvy but willing to learn anything they don’t already know and can teach it to others. They believe that the world’s problems can be overwhelming and that it takes an action-oriented approach to over-coming them.
- Parents (like Debbie Good Doer) who want to motivate their kids to be more active by challenging them to walk or run for a great cause they care about
- Runners who participate in charity walk/runs (Run for the Cure, Terry Fox, etc)
- Active people who like to do things on their own (go for a walk alone in the forest — not with crowds of people at live charity walks/runs) but want to do good in the world by fundraising for causes they care about
- People who care deeply about the climate and are acutely aware of the dire circumstances we’re in.
So we set to work and began by sending out a user survey, specifically targeting the following audience:
- People that were physically active (run or walk on a routine basis)
- People that were socially conscious (contribute to charitable causes)
- People that were both physically active and socially conscious
We also interviewed 6 individuals that fit the above criteria and captured our findings. As we analyzed our data after the second day of our survey, we collected about 40 responses, but realized that our demographic was limited to individuals between 18–34, and we needed responses for users between 35–46 as well. We extended our reach by short-listing primarily those that were married, or those that had families, to find users in the age gap and concluded our survey with roughly 65 responses.
Key insights surfaced once we began collecting data. Our users were overwhelmingly iOS, and for our MVP (the bare-bone features required to solve the problem), we focused only on designing for the iOS platform. In addition, we were able to identify that the Debbie Good Doer targeted persona certainly did exist, but we also learned that individuals that were physically active weren’t necessarily interested in social causes or charitable giving. As I’ll explain later, this data would steer us in a big way for our initial designs.
“The two charity rides that I’ve done have been some of the most rewarding experiences I have been a part of. Getting active and positively impacting a worthwhile cause is easily a no-brainer.”
We took all the data collected from our survey and interviews through an affinity sort to organize our data sets. There are several points that stand out:
- Socially conscious individuals want to know the impact that they are having, more so than the total monetary contributions that have been gathered.
- Users all say that they are skeptic of where their money is going towards, and are motivated to fundraise if they know where the money is going towards.
- Users are overwhelmingly uncomfortable with asking people and friends for money, and those that are comfortable do so over social media.
Planning
Because of our tight timeline of 3-weeks and this being our first time working in collaboration with a team of UI Designers, I figured that in order to ensure that we were sharing our wireframes within an appropriate time frame, it would be ideal if we executed our UX strategy in an agile manner; that is to have our group focus on identifying our primary persona, and completing the full UX cycle to rapidly complete our wireframes in quicker succession. Thanks to this strategy, we were able to pass on our wireframes earlier to our UI Designers, while our UX team continued working on the secondary user persona flow.
From our affinity diagram earlier, we constructed our primary user persona — meet Maurice:
Maurice represents an ideal fundraiser. He isn’t necessarily the Debbie Good Doer that our client had identified — there weren’t too many users that fell into that criteria, and as such, the Debbie Good Doer persona would end up being a secondary persona.
“As a parent, I want to fundraise for a project at my daughter’s school so that I am supporting our community.”
To accomplish his goals, our app would need to have a variety of features. Our biggest challenge with this project was trying to determine whether the app was more fitness tracking oriented or donation/fundraising oriented. This was because we had a clear understanding of the features for the fitness focused users, and the features for our socially conscious users, however the intersection of these two users proved to be confusing at first. We initially went in the direction of the former (fitness), and this showed in our earlier design iterations which will be explained later.
We began by brainstorming features that would be necessary for a fitness based fundraising app with blue-skies thinking. We prioritized the desired features into a “feature bucket”, and then further organized them using a priority matrix. This helped us tremendously in shaping the intersecting user goals as well.
Next, we began brainstorming the user flow. Following Maurice’s goal, he would need the ability to create a team, invite others to join his team, and begin fundraising/donating. We began by white-boarding this flow.
With registration complete, we were then focused on determining what would be the primary features/actions that Maurice would want to do. While articulating the user flow, we also needed to determine the information hierarchy/architecture, particularly where functions and features would belong on which screens/pages of the app. We ran this exercise through our team of designers and came back with a rough idea of where things might belong.
Noticeably missing in our early whiteboard design sketches was the navigation. Were we going to use the hamburger menu, a bottom nav-bar, or other type of design to allow the user to do what’s most important?
We looked back at our user goals, the data from our surveys and interviews, and our in-progress user flows and diagrams. Ultimately, we landed on the following key categories for Maurice’s main goals:
- Personal Activity (fitness and fundraising combined)
- Team Activity (fitness and fundraising)
- Donations (pledges received, making/asking for donations)
- Campaigns (data regarding currently)
- Share efforts on social media
These 5 main goals were the user’s priorities and would be translated into our primary navigation tabs.
One key limitation to our app is in the donation flow. Apple regulates a policy that restricts iOS apps from collecting donations for charity. As such, the workaround was to have the donation flow handled externally on a mobile website, which is illustrated above as well.
DESIGN
Design
With our site map, user flow, and whiteboard sketches, we drafted out the paper wireframes. Following iOS conventions, we decided to go with nav-bar placed on the lower section of the screen. This is conducive for the user experience; it’s relative position being on the lower part of the screen makes it easy for users to reach.
The main page that the user sees is the Personal Activity page (left). Personal Activity would allow Maurice to keep track of his contributions to his fundraising efforts.
Once he invited his daughter to join his team, he can keep track of team goals and activity from the following tab (middle).
The Post/Share a Message button would pull up a light-box’ed pop-up which allows the user to write a message or take a photo and share it with their friends over social media (right). As we learned through research, users were quick to use social media to share their fundraising efforts, so we decided to make the Share button the “call to action” for the app by having it slightly larger and in the middle.
Next, we have the Donations page (left). The main purpose of this page is to ask their friends and networks to contribute via donations (which is the highlight of this page, as illustrated by the focus of the Ask for Donations button). Secondary user goals are to revisit pending pledges that they have yet to earn, as well as a history of donations received.
Mentioned earlier was the restriction of collecting donations in-app. If Maurice wanted to make a donation within the app, tapping Make a Donation would take him out of the app into Safari to complete his donation (middle).
Last we have the Campaigns page (right). This page is a reminder of who our user is campaigning for and towards, what the charity or organization stands for, and also where the contributions fundraised are going towards.
User Testing
We ran a number of usability tests with our paper prototype, mid-fidelity prototype and our high-fidelity prototype. Here is what our users said:
- The font size was too small on the page of the campaign descriptions
- The wording of Campaigns and Donations was unclear
- When creating a team during registration, there wasn’t an option to set a team fundraising goal
- Once a team was created during registration, the ability to invite others to join was missing
- Once the user had completed registration, some felt lost, not understanding what each page was supposed to do (on-boarding process felt lacking)
Iterations to our design were made:
- Donations renamed to Pledges
- Campaigns renamed to Causes
- Added ability to invite others to join Team during registration process
- Added ability to set a team fundraising goal if you are a team captain
- Designed a 5 screen optional on-boarding tutorial on first load after user registers
- Font size for Causes page increased from 12px to 18px
While fleshing out the other pages of our paper wireframes, our UI designers conceptualized two directions in which the styling and mood of our design could take.
Before we identified that the app would be more geared towards fundraising over fitness, we had one design that utilized sleeker, bolder and more aggressive styling through the use of black, blue, and italicized all-caps Cooper-Hewitt font. On the other design, we aimed more for a warm, comfortable, and family oriented feeling using softer and complementing colours like orange, red, and yellow. Combined with the Roboto typeface, and rounder buttons, this styling was intentional in creating a community-friendly vibe.
Having met with Ben and Mari to check in, they appreciated elements from both designs, but they too leaned more towards the app being more a “charity” app than a “fitness” app. From a branding perspective, they also wanted to link Run For It back to The Great Climate Race.
We took their feedback into consideration. In our design studio session, we felt that the bolder tones made the app feel too aggressively fitness themed. Colours were also modified slightly, and additional high-fidelity screen mockups were made that followed our user flow.
The result of our iterative design was this finalized style guide which leveraged the colour branding from The Great Climate Race.
The challenge in aligning with their existing branding was using the colour pink — regardless how we tinkered with the colour combinations, it did not work with the other shades that we needed to play with. With some experimentation, we found that purple was a soft medium between their blue and pink.
Also during experimentation, our UI designers were inspired by the cell-shading pseudo-3D characteristics of the avatars from 16Personalities. It emphasized a friendly and welcoming feeling, which aligned with what Ben and Mari also wanted. Our end result was a polygonal geometric gradient pattern that resonated throughout the various pages of the app, giving our app personality through texture.
Prototype
Our finished, high-fidelity prototype can be found here:
https://invis.io/PZF7T69TG#/272123955_Login_Register_1
Summary
I felt that our final product aligned Ben and Mari’s business goals with the user goals. This project had a great deal of research effort put in, and we truly understood the users that would be working with this app. There are some technical considerations — the app would leverage the Apple Health data, as opposed to building in additional fitness tracking abilities, and there are other features that we could envision being incorporated in a future build, such as incentivization, chat for users, a platform to support additional causes, and a point-of-interest map. Overall, this project was a challenging but rewarding experience, and has helped me tremendously in understanding how to best function in a team of designers.
