UX Research & Design

Creating a seamless online pickup order
experience for Long Provincial Customers


Project Overview

What is Long Provincial?

Long Provincial is a Vietnamese restaurant located in the heart of downtown Seattle ran by the same owners of the Tamarind. It has great authentic flavors, and it prides itself as the only restaurant in Seattle that serves gourmet food until midnight.

Project Focus

This project was an individual concept project I did while attending the UX Design Immersive Program at General Assembly, Seattle. I was assigned to select a conceptual client and re-design the website(desktop only) based on the given primary persona. I selected Long Provincial as my client and I focused on bringing convinient online pickup order experience and clear information layout for my target persona.


Competitive analysis, sitemap, wireframes, interactive prototype, and visual mock-ups

Project Length

July 30th - August 10th
2 Week Design Sprint

Project Roles

Clare Lee
UX Designer

Invision Prototype

Check out this Link

Problem Statement

“Users find the current website confusing and nonfunctional because it fails to utilize the convenience of online services such as obtaining information, making reservations, and ordering takouts. I believe better information architecture and efficient reservation and pickup order service will facilitate seamless online to offline experience of using the restaurant. I will know this to be true when the pickup order and reservation revenue increases.”

Business Analysis

Long Provincial's main target audience is people in their 20s-40s looking for authentic Vietnamese food in Downtown Seattle. They were not particularly interested in recruiting new customers, but wished to retain the current customers. Also, although the same family who run the Tamarind run Long Provincial, they did not want the brand association, but a more trendy and modern brand image.

Competitive Analysis

Competitive Analysis

Because Long Provincial’s competitors did not necessarily have a good website – or even have one –, Long Provincial did not see the necessity in having a great online presence. Yet, there are features the competitors’ websites executed well in comparison to Long Provincial's, such as having links to online delivery platforms, good display of signature menu, social media presence, descriptive photos, and better information architecture. However, Long Provincial was the only website that provided online reservation service.


For this project. we were given three personas to choose from, with different backgrounds, tech empathy levels, and age. Because Long Provincial’s has a strong motivation for modern branding, targeting customers in their 20s-40s, I chose the following persona as my primary persona.

Scriptwriter @ Seattle
“It’s not whether I can afford it, it’s whether I can afford NOT to have it!”
Tech Empathy: High | Favorite Apps: Twitter, Instagram, Uber
Cares About: Authenticity, Exclusivity, and Uniqueness of Purchases
Pain Points
  • - Poorly-written website copy
  • - Too little choice of retro stuff
  • - Lengthy checkout process
  • - Services that don't work on mobile
  • - Wants small product details
  • - Characterful copywriting
  • - Efficient checkout process
  • - Responsive website
  • - Multiple/large product photos
  • - Ability to submit reviews of products

User Research

Because many of the competitors’ websites linked online delivery or takeout services provided by secondary platforms such as Grubhub or eat24, I conducted additional 5 User interviews to understand the pain points and need for these additional online services. I found out that:

  • Users prefer using secondary platform for delivery services (GrubHub, Amazon Restaurant, Postmates) because they can see other options
  • Users order delivery for convenience
  • Users order takeout when they want something quick and they know what they want
  • Users like when the restaurant has online pickup order service on its website

How did I Address This in My Design?

Based on my findings and Lauren’s needs, she will likely use Uber Eats – as Uber is her favorite brand – or other secondary platform services for delivery orders. However, because she is also a type of user who pursues efficiency, I saw the value in addressing the need for including an online pick up order feature in my redesign.

Information Architecture

The Current Problem

  • The main page fails to provide necessary information at a glance (i.e. location, hours, and contact all located in separate pages)
  • The navigation bar does not inform the user which page the user is viewing
  • The only way to navigate back to the main page is by clicking on the logo, which is not obvious
  • Inefficient use of space resulting in small font-size
  • The menu page does not consist of photos, and each category is a separate page
  • The link to job applications is included in the tiny footer despite its frequent use
Current Navigation

Re-designed Sitemap

I re-structured the site map so primary information such as contact and map, and publicity information such as reviews can all be displayed on the main page instead of them being separate pages. The re-designed sitemap shows clearer navigation structure where users can access different information from any point of their usage.

NEW Sitemap

Usability Testing

I conducted two rounds of usability testing with total 7 participants based on this usability testing script. As I conducted my usability testing, I used this system usability scale to get quantitative feedback from the users. For my first round of iteration, I conducted 4 usability testing with the average score of 66.25. After the second round of iteration I conducted 3 usability testing with the average score of 90.84. A significant increase in usability from the first round of iteration.

    Main Page

  • Photo Carousel
    The main page includes a photo carousel that displays photos of Long Provincial's signature menu and events information. A nice copy is included in order to serve my persona's needs.
  • Business Information
    The middle section includes a map and the summary of important information so users can obtain its operation hours, contact, and parking information at a glance.
  • Yelp Reviews
    Because users found press information outdated and unnecessary but demanded for reviews by real customers, yelp reviews were included in the bottom of the page.
Long Provincial Main

    Menu Page

  • Photos of Menu Items
    Large descriptive photo of each menu item is included to fit my persona’s needs.
  • Dietary Restriction Labels
    Users can obtain dietary restriction information for gluten-free, vegan, and vegetarian options at a glance, as the labels are color-coded and sized appropriately based on my usability testing results.
  • Allergen Labels
    8 commonly found allergen information is labeled for each food item. Only the allergens contained in the item are displayed, in bright red for visibility. For items with no allergens "None" is displayed as a placeholder for layout consistency.
Long Provincial Menu

    Pickup Order

  • Order Box on the Left
    Many users missed instructions about adding orders and got confused in the first iteration design because the box was placed on the right side of the page. Since Western culture reads from left to right, moving the order box to the left clarified the confusion.
  • Special Instruction
    Instead of allowing users to only put in special instructions during checkout, this text field allows users to edit special requests right away as they add items to the order.
  • Default Quantity
    By having the default as 1 instead of 0 as requested by users during usability testing, users can add items to the order immediately with less clicks.
Long Provincial PickUp

Prototype Demonstration

Scenario: Lauren wants to order one shiitake mushroom satay with no cilantro, and one pork satay.


  • Step Wizard
    The reservation page so has a consistent layout with the order checkout process, guided by a step wizard for clarity.
  • Special Request
    Users can type in special requests directly during the reservation process.
  • Select Seating
    Long Provincial's current site allows users to select seatings during its online reservation process through a drop down menu. Although users liked having the option, users felt the drop down menu confusing and hard to visualize. Thus, the redesign includes an interactive floor plan, which users can directly click on to select available seatings.
Long Provincial Reservation

Prototype Demonstration

Scenario: Lauren wants to make an online reservation for 4 people for a birthday dinner on August 10th, at 7 pm. She also wants to let the restaurant know that she will be bringing in a cake.

What I learned

Too Big of a Scope

Although, I successfully delivered my project on time with great usability testing results, I wish I had approached my project differently. My project scope was too big in the beginning, trying to make sure I tackled every part of the website. I wish I had strategized my approach with proper feature prioritization techniques, so I had more time to conduct research and testing on features that have the most impact on the users.

Studying Information Architecture

My current design had great usability testing results with a clear hierarchical navigation scheme between the pages built based on user interviews. However, I wish I had done more in-person study such as a card sort to tackle the organization of the food menu items.

Ideally Mobile First

Because the project focus was desktop, I only designed the desktop version of this website given the time constraint. However, based on my target persona, and the importance of responsive design nowadays, it would have been ideal if I could have built the mobile version first. I would love to work on practicing responsive design.

Future Steps

Design Responsive/Mobile-Friendly Pages

The next step would be to work on a responsive design of this website so it is mobile-friendly to fully serve the target persona’s needs.

Complete Work With Us and Catering Pages

I would like to complete other pages of the website based on more research and usability testing.

Have a second round of Stakeholder interviews

BI would like to have a second round of stakeholder interviews for this redesign so I can serve the business needs better.