A web redesign of one of Los Angeles' historic restaurant that allows patrons to order online while staying true to the landmark's history and character

Overview

Client
THE ORIGINAL PANTRY
Role
UX DESIGNER & VISUAL DESIGNER
Genre
FOOD & E-COMMERCE
Time
1 MONTH
Tools
Whiteboard, Sketch, FIGMA, InVision
01

Background

"Never closed, never without a customer."

The Original Pantry offers diners an atmosphere rich in character and history. An integral piece of Los Angeles culture, it has served many celebrities and politicians, along with its regular lunch and late-night shifts of office workers and concert attendees. Around 2200 people come in daily. The Pantry continues to upload its traditions with its blackboard specials and cash-only service. It claims to never have closed or been without a customer since it opened in 1924, including when it changed locations in 1950.
(Home page with its flash animation)

The Challenge

Due to its popularity, the restaurant has difficult problems satisfying most of its customers. Patrons wait long times for their food and newcomers who visit the website are greeted with a confusing interface and cluttered navigation. How do we increase efficient food orders and enhance customers' visits for a satisfying meal?

The Solution

Provide customers an effortless experience, ordering and checking out food online as takeout or delivery, decreasing customers' wait times and increasing the restaurant's revenue and service satisfaction
02

Research

(Original menu with multiple categories)

Heuristic Evaluation

Initial research began by reviewing The Original Pantry's website interface and comparing it against accepted usability principles—Nielsen's Heuristics.

Competitive Analysis

Los Angeles has many notable and historic eateries—within a 5 to 7 radius of The Original Pantry, there are competitors that open 24 hours and others that are just as famous. In order to understand what these restaurants are doing and what they provide, we evaluated every single one of their pages and laid out the features they have that the Original Pantry didn't.

Almost all had some feature of placing orders through their site, an app, or a third-party delivery site.

Interviews & Contextual Inquiry

We documented and observed in context users' behaviors and pain points as they navigated through the website and talked their process. Afterwards, we conducted more structured short interviews with the same users to have them share how they felt about the entire experience.

Not only were the feedback about the website's structure, but a lot pertained to the website's entire interface not being functional due to technical problems.

INTERVIEWS

— “The concept behind the website was cool but by the end, I feel it wasted my time and wasn’t worth it.” (Participant #3)
— “I wish they changed the menu format.” (Participant #6)
— "Sometimes I'd like to order my food ahead online when I don't have time to sit down and eat." (Participant #2)
— "It's too bad they don't have a delivery option given it's a place that's so well known around here." (Participant #4)

CONTEXTUAL INQUIRY

BEHAVIORS: frustration, refreshing the page, multiple clicks
— "Um, I can't even get past this black screen." (Participant #4)
— "What I want rarely shows up even after selecting it several times." (Participant #5)
— “That was frustrating. Who still uses Flash these days on websites?” (Participant #1)

User Journey

PREVIOUSNEXT
Beam me up
03

Synthesis

User Persona

Sitemaps

From the research, most users responded that the first thing they look for in a restaurant's website is the restaurant's menu and its hours of operation, and on occasion, its address.

To properly structure the website's content, we had to first consider how users look for information and structure the content in a way that best aligns with their preferences. After evaluating the website's information architecture, the original navigation schema of the website consisted of 7 tabs. After the process of card-sorting and visualizing the pages with sitemaps, the new navigation was condensed into 5 tabs.

Impact-Effort Matrix

There were many features to consider but after some deliberations and feedback, only a few provided the greatest and immediate benefits for the customers and the restaurant. What was really needed was a refined menu with customization options, time selection for pickup/delivery, and confirmation for pickup.
04

Design

Pain Points

PAIN POINTS

1. Design is outdated with lack of device compatibility.
2. Menu is not intuitive and does not offer online ordering.
3. Site has broken links & errors.

SOLUTIONS

1. Modern design with updates on site navigation & compatibility.
2. Online ordering with options for take-out or food delivery.
3. Engage users with content.

Wireframes

Ordering breakfast

Gary is on his nightly shift sitting at his desk and is hungry with a huge craving for breakfast. He wants to order his go-to favorite comfort food, country fried steak with eggs, and have it ready for him to pick up once he gets his lunch break from work. As he goes through the menu to place his order, he's prompted for his food preferences, choice of payment, and estimated time his meal will be picked up.

WIREFRAMES
(MEDIUM-FIDELITY)

MOCKUPS
(HIGH-FIDELITY)

PROTOTYPE

05

What Didn't Work

06

Final

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla efficitur est, in porttitor felis eleifend eget. Fusce sodales, lorem quis faucibus porttitor, quam sem consectetur quam, eget mollis justo metus sed tellus. Nulla eleifend pulvinar placerat.