An AI Weight Loss Coach For Men
Lyle is a nutritional app for men, it's an AI-powered personal coach that guides daily meals to help men eat balanced to lose weight.
I worked as the UX/UI Designer with Lyle, in collaboration with the CEO, project manager, developers, brand designer, and nutritionist. Throughout the whole process, I did ideation and strategic design, user research and competitive analysis, UX and UI design.
UX/UI, Product Design, Mobile App, Chatbot, Personal Nutritional Consultant
User Researcher, UX/UI Designer
Paper, Balsamiq, Sketch, Illustrator, Photoshop, Invision, Zeplin
Stage of Development
Before start designing, I first sat down with the Project Manager/CEO to understand the VISION and GOAL of Lyle - What's the problem it tries to solve, what is it, who is it for etc., this helped me understand what the main focus of the app should be, and developed strategy around it.
0.1 Cognitive Walkthrough
Lyle already got a 1st-version prototype when I first in contact with them. I conducted a cognitive walkthrough myself to evaluate its user flow and functionalities.
The app structure and functionality are very minimum.
There are signifiers and feedbacks that are very confusing on the interface.
The branding and visual interface of the app needs to be redesigned.
They have a list of requirements that wait to be added to the current app, which requires more strategic planning.
0.2 Stakeholders Interviews & Defining Problems
With the product vision and cognitive walkthrough results in mind, I conducted a round of interview with their core team members, including product manager, brand designer, developer and nutritionist.
They want the app to
Act as a personal nutritionist, people who use it do not need to think about planning, they can just follow the instructions.
I came up with some Design Questions(some are general and some are very specific) that needs to be solved in my design.
What should be included in the dashboard for the users?
How to present the progress of the goals? in one day or in a week?
How to Design the meal plan, so that users can not only see as guidance, but also to actively check in?
How to reward/evaluate users progress (if they stick to the meal plan, if they keep drinking enough water, if they check in…..) without showing too many process graphs.
Lyle has a clear target user group, the team has built several user personas when they do their market research.
1.1 User Flow
1.2 Information Architecture - Sitemap
After listing out the sitemap, I drew rough prototype on paper, then digitalize it using Balsamiq. This is an early prototype, I made several iterations after this, based on some user testing results.
2.1 Key Visual Design & Branding
After the prototype almost got done, I worked with the branding designer, designed 3 sets of interface styles with different variations on each based on Lyle’s color. We eventually decided to go with the one that gives a sense of active, yet not too colorful.
2.2 All UI Design
This is the final look of the UI design, I still kept iterating on the user experience and applied directly to the visual design because of time constraints.
2.3 Interactive Prototype
2.4 Design Assets Export
After finished all screens, I exported all icons and buttons(default, pressed, disabled) in 3 different size @1x, @2x, @3x, created color palette, then updated the final design with team members using Zeplin.