An AI Weight Loss Coach For Men
Diet matters more than the exercise in weight control.
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, Product 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
Role & Duration
User Researcher, UX/UI Designer
October — November, 2017
Paper, Balsamiq, Sketch, Illustrator, Photoshop, Invision, Zeplin
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 features and design didn’t achieve the business goal.
The general user flow is smooth, I didn’t encounter problem using it.
Some signifiers and feedbacks 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 planning.
Stakeholders Interviews & Defining Problems
With the cognitive walkthrough results in mind, I conducted a second round of interviews with their core team members, including product manager, brand designer, developer and nutritionist, and identified the Product Vision, User Goals, Scope of the project.
Goal of the App:
Act as a personal nutritionist, people who use it do not need to think about planning, they can just follow the instructions.
Help the customers reach their ideal weight
Continuous customer engagement to sustain a healthy lifestyle
Motivate users for meal plan subscription
What should be the main screen for the app, what should be included on the main screen
How to get detailed user info from the on boarding screen without losing users in the process.
How to reward/evaluate users progress (if they stick to the meal plan, if they keep drinking enough water, or if they check in...) without showing too many process graphs.
How to present the progress of the goals?
How to design the meal plan, so that users can not only see as guidance but also actively check-in?
Lyle has a clear target user group, the team has built several user personas when they do their market research.
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.
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.
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.
Asset Export - StyleGuide/UI Library
After finishing the design, I exported all icons and buttons, created color palette, then updated the final design with team members using Zeplin.
Refine user research and persona
Redesign the rewarding system. It’s not encouraging and clear enough.
Redesigned goal section to reflect different stage goals.
Put more focus on grocery delivery functions.
Learning about the general business goal and each of the step is as important
For this project, the product manager has a clear strategic plan for the Minimum Viable Product, but in the early stage of design, I didn’t leave space for potential business grow - which is the grocery delivery service.
Need to Set up the KPI to properly evaluate the success not just from a user experience point of view, but also business point of view.
Need to update knowledge about iOS app design guideline
Testing and getting feedback earlier