Charity Miles App
UX & UI REDesign


Redesign of the mobile app Charity Miles. Charity Miles donates a monetary amount to the user's chosen charity based on the number of miles the user walks or runs. Charity Miles combined healthy living with charitable giving.  

The goal for the redesign was to make the app more interactive, more user friendly, more community friendly, and visually brighter.

As an individual project, I conducted all the research and designed all the deliverables, including creating storyboards, empathy maps, user flows, wireframes, user testing, and prototyping.



In guiding my design direction, I interviewed three individuals and asked them about their lives. The empathy maps below show each individuals' feelings regarding the Charity Miles app, tasks they would use the app for, the influences they have in their lives, problems in their lives, and their overall goals. 

Overall Insights gained from the interviews and empathy maps are:

> Feelings: Users found the app confusing
> Tasks: Users logged miles walked/ran
> Influences: Family & friends have large influences on users
> Pain Points: Health concerns was a pain points for all users
> Goals: Social interaction is a goal for users

Based on the empathy maps, storyboards were created with the problem scenarios of the user having poor health or lack of friends. The story begins with a problem scenario that is related to the user's pain points and the solution to their problem is the Charity Miles app. 


Low-fidelity wireframes
After affinity mapping, I divided the user flow into three different categories: Onboarding, Logging, and Exploring. Below are low-fidelity wireframes for each category. The low-fi wireframes were designed based on the needs of the three users I interviewed. 

The community aspect of the app seem to be very important to users however, the current app does not highlight this feature. In the redesigned screen flow for "Exploring," users can connect with other users and view their running and donation stats. 

MID-fidelity wireframes
Mid-fidelity wireframes were created based on the feedback I received for the low-fi wireframes. I removed the Sign-up screens where users can sign up for an account with the app because most users preferred to sign up with their other social media accounts. Also, a map feature was added because some users wanted to see the route that they ran.

High fidelity mockups
In the final prototype, the map was removed because it was an extra feature that can be iterated in a future iteration. The extra feature was not vital to the MVP. The hamburger menu was replaced by a top navigation bar where all the pages can be found and is one click away. A top navigation bar streamlines the user flow through the app and leaves the users without confusion to the content in the app.