Objective: App redesign and integrate new features
Timeframe: 2.5 Weeks
Team Members: Shalyn Oswald, Gabriela Affonseca
Tools: omnigraffle, POP, Sketch, InVision, Keynote
Charity Miles is an iPhone/Android app that enables people to earn money for charity when they walk, run or bike. The money comes from corporate sponsors who pay to advertise in the app. The user is essentially sponsored for their activity, with the earnings going to their charity of choice.
Our team was tasked with redesigning the app to make it easier to understand and create a memorable experience that keeps existing members using the app daily.
We began our research by sending out a screener survey to the Charity Miles community and social media, within 4 days we received 1781 responses. The survey results gave us valuable insight on user behavior; such as what motivates a user to continue using the app, knowing how much money a charity has raised, how they decide which charity to sponsor, exercising habits and using the team feature in the app.
Through competitive research, heuristic evaluation, user flows we were able to determine how other apps structure their information to keep user engagement, as well as best practices for motivating people to exercise.
12 user interviews were conducted, the group of people we spoke to consisted mostly of existing Charity Miles members and some non-members. This gave us a clear perspective on what frustrations they have when using the app, what their needs are, how they use the existing app, why they use it, etc. One of the most important skills as a User Experience Designer is having the ability to empathize with people. Empathizing with users leads to a real understanding of how to solve their problem and in the end building a better product.
“It would be nice to be able to set favorite charities and not have to always scroll through whole list.”
“List form of charities - it would be nice if you could alphabetize or sort it, or save the one you use... instead of having to search for it.”
“I’d like to set a specific goal and know how far away from the goal I am, or get a weekly update.”
“I want to share my routes with friends and family.”
“I think it would be interesting if Charity Miles could set a morning reminder for x days a week saying how much money are you going to raise today.”
Affinity Map & Personas
During the first week we gathered an immense amount of information, our next focus was to take this data and affinity map it to create our personas. From this exercise 5 personas were generated, four of them are existing Charity Miles members and one is a non-member.
Brainstorming Ideas & Feature Prioritization
We decided to ideate on features for the app once we had a solid understanding of who our primary, secondary and tertiary personas were. Brainstorming ideas with my peers was a great way to inspire each other, we were able to bounce crazy ideas while keeping in mind how these solutions meet the needs, pain points and goals of our personas.
The Charity Miles has a small development team, we worked with them on a feature prioritization exercise to give us clarity on what features would be easy or not so easy to implement, as well as the level of priority for each feature. Since the development team is not located in New York City, we worked remotely via Google Hangouts as well as using RealtimeBoard to post our digital sticky notes on a virtual wall.
Design Studio, Paper Prototyping & Usability Testing
Through the MoSCoW method we were able to make a final decision on what features we Must, Should, Could, and Won't (yet) include on this project. The next step was to begin sketching paper prototypes based on the features we prioritized. One of my favorite phases of the UX process is Design Studio. This exercise allows each team member to draw low fidelity sketches within a 10-15 minute timeframe, share them with each other for feedback or inspiration, we then go back to reiterating on designs. Once our sketches were ready, we used the POP app to do usability tests on our design. Prototyping on paper is the fastest way to test your design and reiterate, we conducted multiple usability tests and moved on to Sketch for the high fidelity mockups.
High fidelity mockups
The final design of the Charity Miles app aligns with the scope of the project. It provides features which give the user the ability to have quick access to start an activity, set goals, find/join teams, see team/member profiles, keep track of money raised for charity, organized list of charities, and a notification center widget. The following video is a demo of the prototype created using InVision.