Project overview
CHARITY MUSCLE is a dedicated mobile app and a complementary responsive website that transforms burned calories into donations.
The problem
- Users may struggle to stay motivated to exercise regularly. The absence of a tangible reward system can dampen their enthusiasm and make it harder to maintain a fitness routine;
- Users don’t have enough time for charity work.
The goal
Tracking and converting burned calories into donations can provide users with a sense of achievement and motivation to stay active. It offers a tangible and measurable way to see the impact of their physical activity on making a positive difference in the world.
Target audience
Sports enthusiast and people who want to support charity causes
My role
UX designer leading the app and responsive website design from conception to delivery.
Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.
Understanding the user
User research: summary
I conducted user interviews and created empathy maps to better understand the users I’m designing for and their needs. Most interview participants reported lack of motivation to workout. They also seek ways to contribute to social causes they care about.
The feedback received through research made it clear that users may have a desire to contribute to charitable causes but struggle to find the time or means to do so.
Problem statement
Sabrina is a healthy person that enjoys sports and charity work who needs to track their burned calories and turn them into donations because they want to feel motivated and fulfilled.
I did a quick ideation exercise to come up with ideas for how to address gaps identified in the competitive audit. My focus was specifically on tracking calories and turning them into donations.
Starting the design
Paper wireframes
Digital wireframes
After ideating and drafting some paper wireframes, I created the initial designs for the CHARITY MUSCLE app.
These designs focused on feedback and finding from the user research.
Low-fidelity prototype
To prepare for usability testing, I created a low-fidelity prototype. The primary user flow I connected was transforming burned calories into donations.
Usability study: findings
I conducted one round of usability studies. Findings helped guide the designs from wireframes to mockups.
Findings
- People want more information about each sports activity they could select
- People find helpful to have the option to share the results after thay finish the activity
- People want more information about causes they could fight for
Refining the design
Mockups
Based on the insights from the usability study, I added more information about each sport activity they could select.
Additional design changes included adding the option to share the results of the activity you recently finished.
Responsive Design
Sitemap
With the app designs completed, I started work on designing the responsive website. I used the CHARITY MUSCLE sitemap to guide the organizational structure of each screen’s design to ensure a cohesive and consistent experience across devices.
Responsive designs
The designs for screen size variation included mobile, tablet, and desktop. I optimized the designs to fit specific user needs of each device and screen size.
Going forward
Takeaways
Impact
Users shared that knowing that their exercise efforts will directly benefit charities can boost users’ commitment to maintaining an active and healthy lifestyle. It provides an additional incentive to engage in physical activities regularly and can encourage long-term behavior change.
Next steps
- Conduct research on how successful the app is in reaching the goal to transform burned calories into donations.
- Identify any additional areas of need and ideate on new features
- Present the app and its benefits to NGOs
What I learned
I learned that even though the problem I was trying to solve was a big one, diligently going through each step of the design process and aligning with specific user needs helped me come up with solutions that were both feasible and useful.