Mango: A UX Case Study
The UX behind solving Rabeea’s pain points
Purpose
The purpose of P1 was to create a mobile application for Rabeea W, a fellow student at Red Academy, that will satisfy a need or solve a problem in her life. Rabeea enjoys the rewards system in carrot rewards and is frustrated by the lack of ability to integrate it with her exercise and dietary goals. In order to resolve this problem, I designed Mango, an application that rewards based on completion of exercise, sleep, and dietary goals with gift cards/points from retailer of choice. The problem was identified through interviews and followed the design process to successfully establish a low-fidelity prototype of the app.
The Design Process
The design process is broken into five phases: research, planning, design, testing, building.
Research
First, I generated a list of general questions that will allow us to get to know the interviewee. Since the purpose of the project was to find any problem or need of theirs, the questions were generated without scope to understand and get to know Rabeea W personally.
Questions Asked- Tell me about yourself, Aspirations in Life, Prioritizes, Mode of Communication, Health, Business, Family. For e.g.:
Tell me about yourself?
What is your typical weekday look like?
When do you normally first use your phone on a typical day?
What are some of the apps and websites you use the most?
What would you like to improve with the apps that you consistently use?
What is your definition of a healthy lifestyle?
Persona
Below is the persona of Rabeea based on the answers from the interview.
Domain
Rabeea mentioned several fitness apps she enjoyed, specifically Carrot Rewards. Carrot Rewards is an app that allow users to earn points for select programs by simply attaining walking goals. Most fitness apps are able to track user’s activities and compare it to the fitness goals. They do require some level of input such as food intake throughout the day. There are only a few apps that provide reward options that can be used outside the app, such as Carrot Rewards.
After conducting the interview, creating a persona for Rabeea and asking follow-up questions to understand her better, the defined problem in which to solve was the following:
Rabeea enjoys the rewards system in carrot rewards and is frustrated by the lack of ability to integrate it with her exercise and dietary goals
In order to resolve this problem, I will design an application called Mango that rewards based on completion of exercise, sleep, and dietary goals with gift cards/points from retailer of choice.
Planning
Storyboard
Rabeea uses the app to input her intake and redeem her prize after achieving her goal.
User Flow Diagram
Design
During this stage, I created a sketch of 5 screens that Rabeea will experience when redeeming her prize on her new app in low-fidelity.
Test
Once the sketches were loaded onto Invision, this was tested out by 4 users including Rabeea. My hypothesis was that Rabeea will be able to use Mango in order to gain reward points or gift cards while consistently tracking her exercise and dietary goals and monitoring her intake.
Usability Test Instructions:
Imagine you just finished a 5k run and your phone vibrates. You just got a notification from Mango that you have achieved your fitness goals. Use the Mango app to redeem your prize.
Findings:
Users struggled at the same points and reacted positively at the same pages as well. Through testing, I identified and changed the following:
Issue#1: No clarity in notification, unable to recognize this screen as iPhone home screen
Solution: Added text on the notification + screen
Issue#2: Button wasn’t clear and visible for the eye, all testers click “Total Steps” to move forward when the “Redeem Now” button was at the bottom.
Solution: Move Redeem Now to eye level
Issue#3: Unclear selection — check marks on original screen indicated multiple selection
Solution: Changed check boxes to arrows moving forward
Issue#4: Confusing Back button for a finished screen, might intend to go back to the previous page versus the home page.
Solution: Changed back button to home for clear indication.
Iterative Wireframing
Throughout testing, I created multiple versions of screens before finalizing to the design solution.
Design Solution
After testing and multiple sketches, this is the final design solution of the app and Rabeea tested it and was satisfied with the app.
Summary
Completing this first project was a great introduction to the UX tools and methodologies. Sketching on paper was a new experience for me as I resort to creating sketches/images digitally. It made me realize the importance of paper prototyping as you are able to get the ideas out as the way it is imagined versus being forced to choose select images readily available. Testing brought to my attention on how much of a role the location of the buttons plays in terms of the app experience.
Another fix that was mentioned to me after presenting was to make the home button on the last screen to be placed in a different location on the screen. Typically, the bottom left on the screen is known to go back to the previous screen. Relocating it to either the bottom-right or bottom-middle of the screen would make the screen less confusing.
To view the Prototype: https://invis.io/M2DTQGFNT
