interaction designer, creative technologist
Lyle.jpg

Lyle

Lyle

AI Weight Loss Coach For Men

lyle_banner.jpg
 
 

PROJECT BRIEF

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, AI 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 OVERVIEW

     
    lyle-workflow.png
     
     

    DESIGN PROCESS

    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.

    Previous App

     
     

    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

    Domains:

    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

     
     

    2.2 Wireframes

     

    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 .