Home Screen Overhaul

The ketogenic diet (or simply keto diet) is a low-carbohydrate diet. Carbohydrates are the sugars, starches and fibres found in fruits, grains, vegetables and milk products. They're a source of energy for the body.

The main job of the app's home screen is to help users stay in control with their carbohydrates (or carbs) intake and also keep track of proteins, fats and calories. This is how the home screen looked before the redesign:

Problem & Process

The pie chart was poor at communicating data, numbers were hardly visible, and chart segments were hard to compare visually. The general use of space was inefficient. For example, the calendar that only 3% of users were using, took over around 20% of the screen.

From there, we went to a series of interviews with users to understand the main jobs of the home screen. Having the research findings and hypothesis in place, I explored multiple options that we user-tested and iterated on.

Result

• We decided to change the focus of the charts on how much left instead of how much eaten.
• Pure numbers ("23 Net Carbs left") are not self-explanatory enough. We decided to add a text status and a short description to help people understand how they're doing.
• We changed the screen information architecture and navigation to optimise the use of space.
• We replaced a single pie chart with separated charts for each nutrient and added a dark background to emphasise this information on the screen.
• We introduced walk-through guidance on first app session to ensure a smooth transition to the new design.
• We made a series of other changes along the way (changed tab bar, redesigned home screen food snippets, etc.)