Lê Phin

Responsive Web Design for a Vietnamese Café in New York

Role

UX Research

UI Design

Prototyping + Testing

Figma

6 Weeks

Background

Lê Phin is a small, Vietnamese café located in New York. Their menu is unique and incorporates flavors of Southeast Asia with drinks like the pandan matcha latte or Vietnamese iced coffee. There is a small space for customers to sit down and do work or take a moment to slow down and people watch through their window.

Problem

However, the café did not have a website for their business. The owner, Kim Lê, relied solely on social media, search engines, and Yelp for customers. Not having a working website can lead to reduced customer credibility, difficulty understanding the business’ message, and lessened communication between the business and its customers.

Research Goal

1. Understanding both business and user needs — identifying the needs of the stakeholder and users to recognize what differentiates an enjoyable experience from a bad one while also portraying brand image

2. Assessing user experience — gathering participants who have previously used a website to order food or learn more about a food business online

3. Exploring café trends — how are food businesses, especially other cafés in NYC, using websites to better their business and bring in more traffic

4. Competitive analysis — comparing and understanding the strengths of similar businesses in the area; seeking opportunities for Lê Phin to differentiate themselves and stand out against other coffee shops

Competitive Analysis

User Personas

I gathered my research findings and created a user persona for me to reference for the remainder of the project. This helped me think about the user's needs and not let my own preferences influence design decisions.

I analyzed the data and interviews to check for any patterns and discovered these common themes:

• Visuals — a lot of trending cafés rely on visuals and having strong branding

• Images — providing images will increase credibility, therefore increase traffic

• Standing out — there must be something new or different about Lê Phin that makes customers choose this coffee shop over others

• Consistency — customers are more likely to return if service and flavor remain unchanging over a long period of time

• Space — with lots of employees working from home/at cafés these days, it is important to provide a space where work can be done (i.e. outlets, wi-fi)

Problem Statements

Information Architecture

The sitemap for Lê Phin is very standard for a food business. I wanted the landing page to be as functional as possible providing a summary, the menu, and containing a thoughtful header and footer. The “About” page was added because Lê Phin is unique in how it came to be and Kim (the stakeholder) wanted the story to be shared with visitors.

User Flows

It was imperative that users be able to place an order. This, along with providing descriptions and pictures of menu items, is what made the website stand out against its competitors. For this reason, I chose placing an order as the most important user flow.

The order process focuses on allowing the user to edit their orders quickly and easily, including adding/ subtracting quantity, making dietary changes, and erasing an order from the cart.

Lo-Fi Wireframes

When sketching the low fidelity wireframe, I prioritized the stakeholder’s needs, features necessary for a food business, and the warm, South Asian aesthetic. It was important to Kim for the story of Lê Phin to be shared and easily located, but also important for the user to be able to locate the menu and order pages quickly. For this reason, I designed the website with a functional header in mind. I kept the colors from the original menu to use as the primary and secondary colors.

Moodboard + Component Library

Throughout the creative process, I continued to discuss Lê Phin’s needs with Kim, the owner. The original primary color started off being different shades of orange, with secondary colors being shades of green. However, while creating high-fidelity wireframes later on, I realized that green was the better fit. This was because Lê Phin had lots of green — in their pandan, matcha, and pastries. Orange was kept for the logo, but green was used more throughout the website pages.

Mid-Fidelity Wireframes

I implemented most of the UI and ideas from the low-fidelity sketches to the mid-fidelity wireframes, and also came up with pages for ordering. Based on user interviews, many users preferred a way to see pictures of the location and of all the menu options - this increased rapport and credibility. Both the “Order” page and ordering modal showed images of the item that would be ordered, along with a description for unfamiliar drinks. Kim also wanted to show appreciation for her team by having a section dedicated to them called “Human at Lê Phin,” and this was added to the “About” page. Later on, this was removed as most of her employees did not want to be features on the website.

Usability Testing

User tests conducted over the phone, where users were asked for permission for their screen to be shared and the conversation to be transcribed as they utilized the prototype. All users were asked to explore the website, then to complete user tasks with as little to no guidance as possible. They were then asked questions to gather their feedback and experience using Lê Phin web prototype.

• Participants: Five participants who have been to cafés and used food business websites, all in their 20’s

• Task Flows: Navigating the website, placing an order for an iced pandan matcha latte with oat milk, checking out the order

• Success metrics: Ability to navigate + complete tasks without assistance, number of user errors, little to no user frustration, user satisfaction + feedback

User Feedback:

• Adding left + right arrows in the “Gallery” section of the “About” page for when more pictures would be added in the future

• Shrinking the size of the header image on the “Order” page

• Implementing a sticky header when ordering so users do not need to scroll through the entire menu repeatedly

• “About” page feels font-heavy

• "Having quantity # appear on cart icon in the header after item(s) have been added

• Accessibility — notes to enter allergies, mark gluten-free, vegan, etc.

Iterations include:

• Making the image sizes more proportional to the other elements on the screen

• Spacing the buttons out in the header

• Increasing line height for better visibility

• Making the “Our Story” page less font-heavy

• Adding a larger header image and a quote from Kim to make visitors feel welcomed

• Adding more buttons for user navigation throughout the website — back, cancel, etc.

• Allowing users to enter special notes for any food restrictions or allergies

• Creating a sticky Menu header so users can navigate between different menu options quickly

• Having the order quantity appear over the cart icon in the header once user has added item(s)

From this project, I was able to create my first ever working web design from start to finish with a real stakeholder. I became more familiar with Figma, using features such as auto-layout and padding for the first time. As for UI, I learned how to create sticky headers and modals for ordering. Overall, I was able to improve my skills as both a researcher and designer.

For future projects, I would do some things differently. For one, there were instances when there was lack of communication with the stakeholder because they were busy. For future projects, I will come up with scheduled meeting times prior to starting the project so that there are “due dates” on both ends that help both parties manage time better and stay on track. I would also like to gather participants from the actual cafê as well to get a better understanding of areas Lê Phin can improve upon, rather than cafés in general.

Overall, it was a great and challenging experience where I was able to expand my abilities and work with others for the first time as a UX Designer. It was more motivating and enjoyable than working alone to have real stakeholders and users to design for.