A UI Redesign for a nutrition- focused lifestyle app
My Role
Consumer Researcher
UX Designer
Motion Graphics Designer
My Team
Steven Pereira
Suma Deshpande
Jamie Johannessen
Caitlin Yackley
Duration
4 months
Tools
Figma
Miro
Adobe Illustrator
Adobe After Effects
The Problem
Users of Lifesum find the current UI and offered features overwhelming and stressful when tracking their nutrition, and many of the features and design elements of the current app do not cater to their specific nutritional needs.
The Solution
Redesign the UI of the Lifesum app while introducing new features that make each user’s nutrition journey less stressful and more calm, personal, and enjoyable to track and reach their goals.
Case Study Video
UI Design and Features
Focused Nutrition - For users who may find some nutrition information triggering
Customize your Lifesum experience by adjusting or removing any nutritional info you want to track, which will be applied throughout the app
Active Planning - For users who wish to track their nutrition and fitness in one App
Plan your workouts and meals all in one place to keep track of and reach your lifestyle goals more effectively
Calendar Planning
Local Eats - For users who Stress about meal prep or lack time to cook
Quickly find meals similar to lifesum’s recipes that match your nutrition goals at nearby food spots using a built-in map
See the time and steps needed to reach a food spot, along with their menu
When you're ready, tap the button for directions
Ingredient Swap - For users who want to cook but follow specific diet
Following a specific diet or lifestyle on Lifesum? Swap ingredients on meals you like
to fit your nutrition needs
right from its recipe page
Ingredient Nutrition comparison
UX Research
Before we created this UI experience for Lifesum, we performed extensive user experience research to figure out the needs and problems that Lifesum users faced, as well as testing our newly introduced features through wireframes.
Design System
This design system aims to create a bright, approachable, and energizing nutrition experience through the use of bold colors reminiscent of specific foods, illustrative graphics and icons, and modern photography that brings positivity to the users of Lifesum.
Design Principles
Positive Energy
Balanced Simplicity and Dynamism
Modern Food Photography
Typography
Color Palette
#4A8E93
Spirulina
#FDC301
Lemon
#005840
Kale
#E46382
Guava
#CBDF88
Pesto
#FDF9D9
Vanilla
#FFFFFF
#000000
Iconography
Cards & Buttons
Photography
Reflection
Through implementing a more positive interface design and new features catered to specific user groups, Lifesum can become more accessible to people with various nutrition needs, while also encouraging them to persist in their nutrition and fitness journeys.
