Eric Hart Design
Asken-Diet-Charts.jpg

Asken Diet: Charts feature redesign

Summary - Redesigned charts feature for a weight loss and nutrition advice app called Asken Diet.

What it is - Asken Diet is an app that helps its users better understand their diet & nutritional intake and get advice on how to hit their nutritional goals. I was tasked with redesigning the charts function to: A) increase the number of users using the function and B) make using charts a better, more useful experience.

How it works - The charts function visualizes the user’s health data in the form of a simple chronological line chart that scrolls horizontally. User data is represented as points on the line chart. Data is searchable by two filters: category (ex. weight) and period (ex. week). The chart function makes use of multi-touch gestures. Swiping right on the chart pulls older data points into view; swiping left, the most recent. Pinching in and out increases or decreases the period filter (ex. week -> month). Tapping on data points pops up a detail pin. Tapping and holding then sliding to the left or right lets the user scan through all detail pins without first needing to tap on individual data points.

My role - Research, strategy, wireframing, UI/UX, prototyping, design, bug testing.

Where to get it - Download Asken Diet here

*Mobile device viewers: Make sure to watch this video in fullscreen then double tap the video to fit-to-screen.


Goals

-Increase the number of unique monthly users accessing the charts tab.

-Track what happens to the average daily user session time per month on the charts tab.

KPIs

-Number of unique monthly users accessing the charts tab

-Charts tab average daily user session time per month

Results

Unique monthly users accessing the charts tab (iOS)

208% increase


Charts tab avg. daily user session time* per month (iOS)

16.7% decrease

*Time measured in seconds


Challenges

Making it interactive and scalable

Using the original Asken Diet charts was a static experience. There were tabs that the user could tap through to change the data category but that was it in terms of interactivity. There were no gesture inputs, no scrolling through past data, no tapping on data points to get more info. It was a “what you see is what you get” affair and felt disappointing. The scalability left much to be desired as well. If, in the future, the team at Asken Inc. wanted to add more data categories they’d be stuck adding more tabs. And those tabs would then flow off-screen and need to be scrollable, which felt strange. Users were also unable to view their data by a time period of their choosing. They were stuck looking at their data from whatever time period we happened to give them. I needed to find a way to give users: A) more control over how they want to view their data. B) More ways to interact with that data. C) A platform that the team at Asken Inc. could add new content and options to in a flexible, scalable way.

To give more control to the user I incorporated gesture inputs like swiping, tapping & holding and pinching in/out. These gestures made navigating easier, faster and more intuitive. I also included a new “period” data type to allow users to change the time period that will display on the chart (week, month, quarter, year).

In terms of scalability I utilized dropdown lists instead of a tab system to display the data and period categories. Not only does this give the Asken Inc. team the flexibility to add an infinite number of data categories in the future, but it freed up some vertical space so that I could make the chart larger. I added a “more options” menu in the header as a space to include any pertinent actions users may want to take (ie. adding pieces of data to the chart without needing to leave the charts page.) This “more options” menu is flexible in terms of how many actions it can accommodate.

Old charts interactivity & scalability

New charts interactivity & scalability