Back to Portfolio

Project Information

Roles: Team Lead, UX Designer

Created Year: 2018

Used Software/Tools: Adobe Illustrator, Adobe Indesign, Adobe XD, Paper Prototype, Google Hangout

Tags: User Interface, User Experience, Mobile Application, iOS

About Lettuce

Lettuce is a personal money managing, expense tracking and budget planning app for iOS.

Key Features

Sync, Track, and View all of your bank accounts and credit cards in one place.

Transfer money between you and other people easily as 1, 2, 3.

Popular Goal Trend to give you a motivational push.

Create a Budget Goal to save your money to buy the things you want.

Notification Alert to remind you when you are close to your goal due date and to provide suggestions for your next goal.

lettuce-loading-screen

Research

lettuce-research
lettuce-interviews-questions
lettuce-interviews-answers

5 Top Competitors

lettuce-top-competitors

Research Insights

lettuce-research-insights

Problems

1. Too many banking accounts and credit cards to track and manage individually.

2. Money management apps are complicated and difficult to use.

3. Don’t like to use any money management app because of their outdated design.

4. Not motivated to save money for their financial goals.

Solutions

1. Allow users to sync all of banking accounts and credit cards into one place.

2. Provide a step-by-step walkthrough process in the app for simple and easy user experience.

3. Provide the app with a fun and modern user interface design.

4. Motivate users by providing popular goal trends, showing progress bars and pushing notifications as reminders.

Mind Map

lettuce-mindmap

Target Audience

Age Range: 20s to 30s.

Education: Bachelor's degree and higher.

Income: Minimum of 50k per year or higher.

Who: People who wants to save money together with their partner and close friends.

Goal: To help users to reach their financial goals that are aligned to their personal needs, hobbies and interests.

3 Key Personas

lettuce-personas

Robert Meyer

lettuce-persona1

Jenny Peterson

lettuce-persona2

John Meyer

lettuce-persona3

Storyboards

lettuce-storyboards

Initial Sketches

lettuce-initial-sketches

Information Architecture

lettuce-information-architecture

Wireframes

Loading

lettuce-wireframe-loading

Home

lettuce-wireframe-home

Transfer

lettuce-wireframe-transfer

Goals

lettuce-wireframe-goal

Notification

lettuce-wireframe-notification

Profile

lettuce-wireframe-profile

User Flows

lettuce-userflow-1
lettuce-userflow-2
lettuce-userflow-3

User Testing

lettuce-user-testing-paper-prototype lettuce-user-testing-video

Design Iterations

Based on various user feedback from our user testings, I made the following design updates.

lettuce-design-iteration-1
lettuce-design-iteration-2
lettuce-design-iteration-3
lettuce-design-iteration-4

Moodboard

lettuce-moodboard

Color Palette

lettuce-color-palette

Typography

lettuce-typography

Logo

lettuce-logo

User Interface Component

lettuce-ui-component

Final Design

Loading

lettuce-finaldesign-loading

Home

lettuce-finaldesign-home

Transfer

lettuce-finaldesign-transfer

Goals

lettuce-finaldesign-goal

Notification

lettuce-finaldesign-notification

Profile

lettuce-finaldesign-profile

Video