Diet & Exercise Charts


iOS, UI, UX

mdd_vert

MDD_chart_UI8_14wires

For this project I was asked to create a new chart feature for our mobile application called My Diet Diary.
My Diet Diary allows people to tracks calories from food and the calories they burn through exercise. The app also has one of the largest online communities where members can share their journeys, encourage and give support to other members too help inform and better manage their weight. This particular project was based on user feedback. People loved tracking their calories, but wanted charts so they could see how they were progressing over time. We listened and came up with four charts.

  • MDD_chart_UI8_14blank
  • MDD_chart_UI8_14V4
  • MDD_chart_UI8_14V4month
  • MDD_chart_UI8_14V490days

The overall product objectives were the following:
Increase engagement by showing exercise, weight, calorie and steps progress over various time periods. Also, improve user experience and consistency with the rest of the app.

mdd1

 

Overall I wanted to create charts that were extremely easy to read and easy to navigate. While some users would be primarily interested in one metric, another user could be interested in another. Then the primary use case was users that wanted to see a snapshot of everything. The navigation control at the bottom allowed for easy transitions as well as limiting the amount of text on the screen allowed more real-estate for the actual chart itself. Scrolling the timeline was also important so that users could zoom in to a period of time and see it across those date ranges. I spent some time exploring though sketching, user testing as well as low fidelity prototypes to get a feel for the interactions.

MDD_chart_uxUI8_14

Overall the new charts have received a tremendous response and we have seen an increase in downloads as well as great user reviews expressing their joy for the new feature.  Lastly all the various interactions and animations and user experience details were specified for our development team to execute.

 

MDD_Chart_Assets