interaction designer, creative technologist
Lyle.jpg

Lyle (App, UX/UI)

Lyle

An AI Weight Loss Coach For Men

lyle_banner.jpg
 
 

PROJECT OVERVIEW

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.

Keywords

UX/UI, Product Design, Mobile App, Chatbot, Personal Nutritional Consultant

Client

Lyle Inc

Role

User Researcher, UX/UI Designer

Year

October-November, 2017

Tools

Paper, Balsamiq, Sketch, Illustrator, Photoshop, Invision, Zeplin

 
 
 

DESIGN PROCESS

 

Stage of Development

General flow.png
 
 
 

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.

Previous App

 
 

Results:

  • 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

 
Userflow.png
 
 

1.2 Information Architecture - Sitemap

 
 
 
 
 

1.3 Wireframes

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

branding.png
 

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 

 

3.1 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.