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


Takeaways

It paid off to sweat the little details.

In order for these charts to feel right there were so many small interactions that needed to work correctly. I needed to be very clear with the dev team about the way elements moved in concert with user interactions. The interplay between user gesture inputs and the scaling of onscreen elements was a point of particular focus. Using trial and error I had to double down with the dev team and grind through many hours to get things feeling right. In the end, the extra time and dev resources spent felt like the right move.

Tracking analytics is critical.

Typically, we would use Firebase + Google Tags Manager to track user actions and take measurements within the iOS and Android versions of Asken Diet. It was disappointing for me to find out that there was difficulty adding Firebase tags to the Android version. I was looking forward to tracking Android user engagement and charts session time and comparing the pre-redesign and post-redesign values. Getting that data would have been essential for us to plot our next steps and make new hypotheses. Comparing the Android data with iOS would have also garnered actionable results. It felt like a real missed opportunity to go through all the work of the redesign and not be able to get any data from it. I’m confident the dev team ultimately overcame the challenge.