Team Diana Wi, Jay Lee, Weiqi Lu, Siyu Lu
My Role Team Lead, UX Designer
Platform Mobile Application, iOS
Software / Tools Illustrator, XD, After Effects, Google Hangout, Paper Prototyping
Year 2018
Duration 6 weeks
down-arrow

Background

What is Lettuce?

Lettuce is a budgeting app designed to help people to save money. It offers a unique feature called "joint-savings." What this allows is more than one person have access to and save toward a goal. This brings a huge benefit to people's relationship by establishing trust and camaraderie with one another.

First kick-off meeting

I took the opportunity to act as a team lead to oversee the project design process, assign work to everyone and made sure we meet the project deadline. To drive project forward efficiently, I split the group to two two-people team: UX team (Diana and Siyu) and UI team (Jay and Weiqi).

I worked mainly on user experience of design which includes research and strategy, wireframing, prototyping and user testing. In addition, I created the product name, marketing slogan, and presentation slides, and helped the UI team with establishing the visual identity.

Setting the project goal.

To design a mobile application in 6 weeks using the human-centered design thinking process in three phases: Discovery, Design, and Delivery.


Discovery

First, researching to understand the market.

As the beginning of the research, together we interviewed 20+ people (ranging from early 20s to 30s) to understand their spending habits to find ways we can fit in and improve their life.

lettuce_research

From the interviews, we learned that people:

  • Spend primarily on housing, transportation and food.
  • Stop using money management apps that don't work properly.
  • Use Excel spreadsheet to budget and manage their spendings.
  • Find current money management app design outdated.

Mind mapping through their mind

Analyzing research data.

From the research, we learned that people are sensitive to sharing their financial information. Also, once an app is faulty, users immediately stops using the service. Due to their previous negative experiences, earning their trust will be the biggest challenge.

After understanding and empathizing with their pshycographics, we came up with various ideas and out of many, the budgeting app stood out to us.

Examining the competitors for inspirations

I assigned Siyu with Competitive Analysis which he studied the competitors, identified the strengths and flaws of their user experience design and shared his findings with the group.

lettuce_competitors

Defining the problems.

The app is designed to solve these problems:

  • Too many banking apps and credit cards to track and manage.
  • Money managements are complicated to use.
  • Designs on current money management apps are outdated.
  • Lack of savings and preparation for future.
  • Low level of trust on money management apps.

Design

Narrating user personas for design alignment.

With the understanding and empathizing with our audience, I worked on creating 2 primary persona and 1 secondary persona to help align the design around users needs.

Robert Meyer (primary)
Persona-Robert-Meyer
Jenny Peterson (primary)
Persona-Jenny-Peterson
John Meyer (secondary)
Persona-John-Meyer
Franklin D. Roosevelt once said, "happiness is not in the mere possession of money; it lies in the joy of achievement, in the thrill of creative effort."

Storyboarding

Weiqi created the storyboarding to illustrate the primary personas story and how they will interact with our product.

Minimum Viable Product (MVP) features

All-in-one account Easily manage all bank accounts and credit cards in one place without feeling annoyed by multiple apps.
Transfer Send and request money between friends and family.
Goal Budget Tool Set and save money whether it is for short-term or long-term goals. Having control of future finance boosts confidence and security.
Notification Staying notified on goal progress is a great way to keep the motivation alive.

Information Architecture

Jay created the information architecture based on the MVP features.

Making design decisions based on the principles below.

Aesthetic Usability It is always been known that people are attracted to beautiful things. Therefore, it is important that the app is aesthetically appealing to users.
Fitt's Law By observation, people use their phone with one hand, so the app should be designed in ways that are easily accessible with a thumb.
Simplicity Users should not be burdened with learning how to use an app, so we wanted simple user interface design that are easy to follow.

Beginning of product design.

As part of the UX team, I coordinated with Siyu to split the work. After talking back and forth, I assigned Transfer and Profile to Siyu and Accounts, Goals and Notification to myself. In the meantime, I assigned the UI team with visual identity including moodboard, color, typography, logo, and user interface components.

Sketching ideas on paper.

I drew sketches of mobile app screens on paper to explore my ideas.

High fidelity wireframes.

From the inital sketches, I moved on to create high fidelity wireframes based on the 2 primary personas user flow. The wireframes for secondary persona user flow was done by Siyu. During this time, I presented my work to the team, received feedback and made changes to the design.

Below are the 5 main app screens designed by the UX team.


Delivery

User testing and design iterations.

Using the user flows, we conducted user testing with potential users to validate the product usability using paper prototyping and Adobe XD. After the testing, we received many feedback which helped in improving our design.

Paper Prototyping
Adobe XD Prototyping + Google Hangout

Visual Identity

While the UX team was completing the final round of design iteration, I worked with the UI team worked on the visual identity.

Brand name and marketing slogan.

After researching several names and their meaning, I came up with the name Lettuce. Why? Because I visioned the product working together with users to help them achieve their goals. The name Lettuce was most fitting and this inspired me to create the brand marketing slogan:

"Lettuce reach it together."

Moodboard

Choosing the right color and font was crucial for the product. We explored mutiple stylescapes and decided on a final direction.

The product goal is to maintain and push our users' motivation forward. To reflect the product goal and the research data, we selected a refreshing energizing orange as our primary color and a friendly urban influenced Montserrat as our primary font.

Color
Typography

Final Design

lettuce-final-design

Prototype Video

(0:00-0:36) Create a new goal and invite a friend to join.

(0:36-0:56) Join the new goal and add $20.

Thank you for taking your time to view my project~ ;)