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, AI Chatbot, Personal Nutritional Consultant
User Researcher, UX/UI Designer
Paper, Balsamiq, Sketch, Illustrator, Photoshop, Invision, Zeplin
DESIGN PROCESS OVERVIEW
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 better 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 almost-developed app when I first in contact them. In order to know what functionalities of the app work and what need some redesign, I did a cognitive walkthrough.
The app structure is simple, its functionality is very minimum but not the UI. They have a list of requirements that they want to add 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 did a round of interview with their core team members, including product manager, brand designer, developer and nutritionist, to know more about the requirements, resources and the works they have done.
I get to know that 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.
This is much different than using it to log things like a personal diary. Based on the interview results, I decided to keep the chat screen as the main screen, keep it simple and design other functionalities around it.
After interviewing the team, I came up with some Design Questions(some are general and some are very specific):
- 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.
0.3 Competitive Analysis
Chatbot Meal Plan Weight Loss Nutrition Personal Data Log Subscription Recipe
Defining Domains helps with precedents research and competitive analysis. Within the above domains, I listed out several apps for analyzing.
1.0 Infomation Architecture - Sitemap
The challenge for the sitemap is what to include in the dashboard, it should be minimum yet clear, and presenting the right amount of data in a direct way.
1.1 User Flow
Based on the sitemap and general user flow, I designed the wireframe and made several iteration according to the business goal and usability test results. We went through 3 major iterations
3.0 Key Visual Design & Branding
I designed 3 sets of interface styles with different variations on each. We eventually decided to go with the one that matches Lyle branding the most. The color gives a sense of active, yet it's not too colorful.
3.1 All Interface Design
3.2 Interactive Prototype
4.0 Design Assets Export
After finished all screens, I generated all icons and buttons(default, pressed, disabled) in 3 different size @1x, @2x, @3x, created color palette, then shared all the design with Team members using Zeplin .