FRIVE
A fruit consumption tracker that motivates users to stick to their goals
Background
According to Public Health England, only 30% of adults consume the recommended ‘5-a-day’ portions of fruit. Motivation was shown to be the key factor in keeping a healthy diet.
After performing competitive analysis of four popular fitness trackers I noticed that only one of them used awards (trophies, badges) as a way to motivate users. With this in mind, I decided to design a fruit-tracker that would motivate users as part of my Udacity UX design nanodegree.
Methods
•Research plan
•User Interviews
•Affinity diagram
•Competitive analysis
•Sketches
•Cost – value prioritisation framework
•User flow
•Usability testing
•Accessibility assessment
Tools
•Figma
•Miro
•Zeplin
•Lookback
•Whimsical
•WebAIM
Deliverables
•Style guide
•Component Library
•Wireframes
•Prototypes
•Clickable Prototype
Key Insights
-
Importance of researching before designing
-
Backing decisions with data
-
Creating wireframes and prototypes
-
Importance of accessibility for both users and businesses
Process
I crafted a research plan that described my main research goals and included research interview questions and a survey. I recruited and interviewed users of fitness trackers aged 25-35 years old to find out what motivated users in keeping healthy habits and what difficulties they found in sticking to those habits. I organised my data in an affinity diagram to discover the main user behaviours, preferences and pain points.
Image 1. Affinity diagram
The key insights I gained from my research was that users:
•Wanted to evaluate their performance and be able to see their progress
•Enjoyed receiving rewards for their efforts and were motivated to keep up with their healthy habits in order to maintain the rewards
•Were encouraged to keep going by seeing their friends’ progress
Having analysed my data, I wrote down ideas focusing on the main themes that came up in my research. I transferred my ideas on post-it notes in Miro and prioritised them using a Value-Complexity framework.
Image 2. Cost-Value prioritisation framework
I decided to focus on three features that would add value to my app:
-
a fruit logging screen
-
a monthly stats screen
-
a nutritional information screen
I created rough sketches with ideas and I took the best of them to Figma. I created a user flow on Miro and low and mid-fidelity wireframes in Figma. I also created a clickable prototype and did some quick usability testing with a friend.
Image 3. Annotated sketches in Miro
Image 4. Annotated low fidelity wireframes in Figma
Following my usability testing findings I removed the back button from the top bar (image 12) as this resembled IOS and not Android, and improved my designs for consistency and wording.
Image 5. User flow and annotations after usability testing
I read the Material Design guidelines and designed high-fidelity wireframes following the specifications listed there. I also created a Style guide and a component library in Figma and Zeplin.
Image 6. High-fidelity wireframes exported in Zeplin
Image 7. Style guide in Figma
Image 8. Component library
I did another usability testing of my clickable prototype on Lookback and iterated my designs for accessibility and usability.
Image 9. Updated Style Guide and compontents for accessibility
Outcomes
Following the Material Design guidelines I chose a colour scheme, typography and images that reflected the playful and energising character of my app. I made my design simpler by having a bottom navigation bar instead of a menu, as I had initially designed, so that users could access everything quickly and easily while ‘on the go’.
Image 10. (left) Main screen, Image 11. (right) Monthly stats screen
Image 12. Low, mid and high fidelity wireframes for Nutritional Values information screen
Accessibility
WebAIM accessibility assessment showed that the colour scheme of my designs was not meeting the WCAG AA and AAA criteria for accessibility due to its poor colour scheme.
I added a new colour theme with a higher contrast to improve accessibility.
Image 13. (left) Initial main screen, Image 14. (right) Main screen theme for accessibility
Image 15. Updated styleguide on Zeplin
Usability issues
Usability testing showed that
-
40% users had difficulty finding the Nutritional Values information screen and
-
60% of users were pressing the peach illustration and the tick boxes in order to add fruit to the tracker.
To improve this, I placed an information icon at the bottom navigation bar and made the nutritional information screen more visible to users. I also made the tick boxes clickable on my prototype.
Image 16. (left) Initial main screen,
Image 17. (right) Updated bottom navigation bar that includes a Nutritional Value information icon
Next Steps
As a next step I would perform A/B testing on my new design (image 17) to find out whether it made Nutritional Value information more accessible to users and to see how it compares to my initial design.