interaction designer, creative technologist
Lyle.jpg

Lyle (App, UX/UI)

Lyle

An AI Weight Loss Coach For Men

lyle_banner.jpg
 
 

PROJECT OVERVIEW

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.

Keywords

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

Client

Lyle Inc

Role & Duration

User Researcher, UX/UI Designer

October — November, 2017

Tools

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

 
 
 

DESIGN PROCESS

 
General flow-2.jpg
 
 
 

RESEARCH

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.

 
 

Results:

  • 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

Design Challenges:

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

 
 
 

DESIGN

 User Flow

 
Userflow-2.jpg
 
 

Information Architecture - Sitemap

 
 
 
 
 

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.

 
 

Key Visual Design & Branding

 
branding-2.jpg

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. 

 
 
 

FINAL OUTCOME

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.

 

 

Interactive Prototype 

 
 
 

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.

 

LEARNING

Future steps

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

Project Learning

  • 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