CharityDiet

CharityDiet is a mobile application that aims to help university students become more aware of healthy diet practices, and in the meanwhile encourage them to frequently donate small amount of money to fight world hunger.

Problem

Sometimes we can't control ourselves and buy too much foods when grocery shopping, and in the end we either eat too much or just throw some rotten foods away. However, there are still a lot of people suffering from hunger in the world. 1/9 of people are suffering from chronic undernourishment while 30% of people in the world are either obese or overweight. How can technologies help with the distribution of food and help people keep a healthy diet?


Solution

We explored several different areas including diet management, budget management, charity and grocery shopping, and eventually came up with CharityDiet - a mobile app where users get discounts for buying healthy food, and donate the money to charities.


Quick Facts

My Roles: UX/UI Designer
I was the designer in this team and designed all the high-fidelity interfaces. The following are my direct contributions:
• Conduct surveys and interviews
• Ideate features
• Create wireframes, mockups and high-fidelity interfaces on Sketch 3
• Craft interactive prototypes on Axure and make animations on After Effects
• Usability tests

Team:
Sang-Wha Sien | PM
Jana Uhrmeister | Researcher

Time:Oct. - Dec. 2015

Deliverables:
High-fidelity interfaces
Interactive prototype on Axure


PROCESS

Design process

EMPATHIZE

Is it possible to let those who want to lose weight donate their redundant food to those who are in need? We came up with an idea of asking people to donate the exact cost of the unhealthy food they forego. To verify this hypothesis, we did some research including 10 interviews and 42 surveys. Additionally, we did online research and competitive product analysis to learn what other products have done, their strengths and weakness, and the incentives of using.

Design process - research

Primary Questions



What are people’s motivations to lose weight, donate?
How do people currently use technologies to lose weight, donate to charities?
What make them keep interested in those technologies?
How do people currently keep track of what foods they consume?
How much are people willing to donate?

Design process - research

Major Findings


• 90% of the survey participants were worried about their financial situation and felt that it would affect how they donate
• 81% of the participants were more interested in donating if they could donate in smaller increments of money
• 82% of them would like to donate the discount that they got from buying healthy foods to charities
• Compared to eating less junk food, 66.7% of participants said that they prefer to eat more healthy food
("Nobody should come between me and my chocolate.")
• According to a Millennial Impact Report, 54% of respondents said they would be motivated by the message, "Your support will make an impact, here's how...".

Design process - personas

DEFINE

How can technologies motivate students to do more charity by making healthy food choices?


Design Insights

• Make it easy to donate small amounts.
• Reward users for making healthy choices.
• Show the impact of donations to encourage constant donations.

IDEATE

We listed out all the features based on our design insights, and divided them into several groups according to their logical relations, then organized them by work flows, and at the end picked out three of them by priority.

Design process - ideate

Scenario

PROTOTYPE & TEST

We conducted 3 rounds of tests with 10 participants for our paper prototype, interactive wireframe and high-fidelity prototype. These tests helped us to refine our idea and design from aspects of concept to UI.

Test 1: Paper Prototype

We did the evaluations with 4 UW HCDE students. We used the paper prototyping tool POP App to make the interaction more seamless and comfortable for the participants. They gave us feedbacks and suggestions regarding to the concept, information architecture and some details of interactions and expressions.

Design process - prototype and test

Key Findings



1. Navigation was controversial.

2. 3 out of 4 participants felt confused about the meaning and the function of Community Goals (a feature that introduces charity goals to users in CharityDiet community).

3. All of them showed confusion about the naming of some features.

Card Sorting

Design process - card sorting

Information Architecture

Design process - information architecture

Test 2: Interactive Wireframe Prototype

We conducted tests with 3 UW students by employing guerilla usability test. We aimed to know:

1. Is the information architecture clear? Does the logic make sense?
2. Is every feature accessible?
3. How do they think about the "Coupons" feature?


Design process - wireframe

Key Findings



1. 2 out of 3 participants said that they would feel guilty if they transfer the money to coupons.

2. "Suggest a New Goal" is complex, and 2 out of 3 participants mentioned that they just wanted a simple function of donating, instead of spending too much time on too many features.

3. 2 out of 3 participants felt that "Achieved Goals" and "Donation History" was a little bit overlapped.

4. Some icons are too small or not intuitive. (e.g. donation button)

Test 3: High-fidelity Prototype

We removed the "Coupons" feature and "Suggest a New Goal" feature to keep the concept simple and focus on the main problem. And we combined the "Achieved Goals" and "Donation History" together, and grouped it by different charity goals. Then we dived into the high-fidelity UI design.


We conducted tests with 3 UW students, and asked them to accomplish three tasks, aiming to determine:
1. Is the UI intuitive?
2. Do the users understand the whole system and how it works?

Design process - prototype

Task 1

• Set up a profile
• Add grocery membership cards
• Change the social media settings
• Check the notifications

Design process - prototype

Task 2

• Set up a charity goal
• Change a goal

Design process - prototype

Task 3

• Make a donation
• Check donation history

Screen Flows

Screen Flow

Interactive Prototype (Axure)

Interactive Prototype


Thank you! ^___^