Lavender
Lavender is a mobile app dedicated to enhancing the group dining and payment experience.

Lavender seeks to streamline the payment transaction portion of the dining experience so that restaurants can increase their turnaround rates, and diners can split the bill with ease.
Role
Interaction Design, Visual Design, Brand Design
Duration
Ongoing
Removing the Physical Bill
Our capstone team consisted of Jorge Eguiguren (front-end), Seungyoon Kim (back-end), and myself (design). Our sponsor for this project was Jacob Waites (IDEO).

For our senior capstone project, we were given the freedom to develop a product that solved a problem of our choosing.

As avid restaurant-goers, we were all frustrated with the current payment process at restaurants, and how it negatively impacts the dining experience. Immediately, we wanted to create a product that would allow group diners to split by item and pay via a mobile app. This way, group diners no longer need to do the math and split the payment manually.
Hero Section Concept
The first design challenge with this project was tackling the interaction that would allow multiple diners to "claim" items they ate themselves or shared with others.

What if I had my own dish, but shared an appetizer with a friend? What if I only had a drink? There are many combinations when it comes to food orders and we wanted to create an interaction that would cover all of them.
A Social Component
We also wanted to include a social component to this application that would allow users to see where their friends dined, when they dined, and who they dined with.

Dining is a naturally social activity and we wanted to increase engagement with our product by introducing a social component.
Home Feed (L), Friend Profile (M), Unfriend Action (R)
A Product That Ships
Ultimately, the success of this project was measured by how much of the product we were able to ship and code.

This presented a unique design challenge as I had to design the experience and interactions with not only the user in mind, but also Jorge, who was in charge of the front-end engineering.
Hero Section Concept
Understanding what libraries we were using (React Native), how certain components were rendered, and the limitations of our development resources was crucial in informing certain key design decisions.
Visual Design + Branding
The name Lavender has no intrinsic meaning – it was assigned to our team on the first day of the capstone program. However, we were able to use this to our advantage as lavender proved to be a reliable motif that we could depend on.

Many social applications have strong primary colors such as reds, blues, and greens, so lavender was a great differentiator in that aspect. We were able to incorporate it into our UI by setting it as an accent color to highlight active states and primary buttons.
Hero Section Concept
For the visual language of the Lavender brand, we wanted to evoke a sense of softness and rawness.

Inspired by menu illustrations, we utilized a series of hand-drawn graphics to indicate empty states and success states. We also paired a grotesque-inspired, sans-serif system font with traditional serif header font.
A Compilation of Edge Cases