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.

Affinity diagram - Miro.jpg

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.

Frive_Value_Complexity_Diagram.png

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.

Frive_Fruit_Tracker_Annotated_sketches.j

Image 3. Annotated sketches in Miro

Frive_Fruit_Tracker_Annotated_LoFi_Wiref

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.

Frive_Fruit_Tracker_Usability_Study.jpg

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.

Frive_wireframes_Zeplin.png

Image 6. High-fidelity wireframes exported in Zeplin

Frive_UI_Kit.jpg

Image 7. Style guide in Figma

Frive_Pattern_Library.jpg

Image 8. Component library

I did another usability testing of my clickable prototype on Lookback and iterated my designs for accessibility and usability.

Iteration for Accessibility.jpg

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’.

Fruit4.jpg
Monthly-stats.jpg

Image 10. (left) Main screen, Image 11. (right) Monthly stats screen

nutritional-values_1.jpg
MidFid Prototype.jpg
Nutritional-values 3.jpg

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.

Fruit4.jpg
Fruit2.jpg

Image 13. (left) Initial main screen, Image 14. (right) Main screen theme for accessibility

Frive_Zeplin_styleguide.png

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.

Fruit4.jpg
Fruitie2.jpg

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.