The Original Pantry Cafe Project

Website Redesign

Platform: Website

My Role: UX Designer

Length: 2 weeks

Tools: Google Suite, Sketch, Lucid Charts, Whiteboard, Post-Its, Invision

OVERVIEW

Located in Downtown Los Angeles and known to the locals as 'The Pantry', it has been open since 1924 and is an integral part of LA City history. The restaurant sells its own branded merchandise on the premises and has a website with the merchandise listed but not available for purchase. The objective of this project was to create a new feature that would allow users to buy merchandise online.

Challenge

The Pantry has an outdated, confusing website navigation. Its sound effects are distracting and completely unnecessary. The Pantry seeks to redesign its website to get more customers to buy merchandise online. 

Solution

Create a seamless

e-commerce experience by redesigning the current website navigation incorporating  Shopping Cart and Product Details features in a checkout process. 

Current Website

My process

Discover through research

Define through synthesis

Develop through ideation

Deliver the final prototype

Challenge

The Pantry has outdated and very confusing website navigation. The business seeks to redesign its website to get more customers to buy their own merchandise online. 

Solution

Create a seamless e-commerce experience by redesigning the current website navigation and incorporating Shopping Cart & Product Details features in a checkout process.

Research
Discovery Phase
 

Heuristic Evaluation

I started my research with a Heuristic Evaluation of the existing website. I used Neilson's Heuristics methodology and sorted each violation by its severity to help me solve problems quickly and efficiently. 

C&C Analysis.png

Comparative and Competitive Analysis

Next, I conducted a C&C Analysis to compare The Original Pantry Cafe with other similar businesses who sell their own respective brand merchandise online. I noted the differences between each website's features and layouts and compiled those notes to determine how they may be useful for the redesign.

C&C Analysis.png

Qualitative User Research 

Initially, I wanted to understand why people buy merchandise. I crafted a set of questions and conducted user interviews to understand users' behaviors and mental models when making these types of online purchases.

Hipster 1.png

It felt good to have that piece of brand because there is an interesting story behind it.

-James K.

I like buying souveneirs from places that have a long history.

-Sophie M.
Hipster 2.png
Hipster 3.png

I'm just always very busy, so I prefer to buy my merch online, its fast and easy.

-Keisha S.
Insights
Define Phase
 

Creating a User Persona

Based on my research, I created a persona called Sonya Naves to keep my focus on the end user and inform my design decisions.

Sonya Persona.png

User Scenario

Sonya has visited The Pantry Cafe and wants to buy a mug. However, she's on her way to a concert and would be unable to carry it. Instead, she decides to purchase the item online when she gets home.

I created this Journey Map to help me visualize Sonya's unsuccessful attempt to buy a merchandise item from The Pantry's website and all her pain points along the way. 

Sonya's User Journey.png
Ideation
Develop Phase
 

Re-organizing Navigation

To figure out what users felt was important to navigate the site, first I conducted an open card sort and then, a closed card sort with eight participants. 

IMB_LeZoiU.GIF

I discovered that:

 

  • to the participants, some of the categories were irrelevant or repeating themselves.

 

  • new categories needed to be added to the primary and secondary navigations.

Site Map

Card sort helped me to re-organize the existing sitemap and create a more fluid and simple version. Using this information architecture technique, helped me to understand the scope of this project better.

Existing Site Map

OldPantrySiteMap.png
New Pantry Sitemap.png

Redesigned Site Map

Initial Sketches

Through sketching and iteration, I was able to create low-fidelity paper wireframes for usability testing.

paperwireframepantry3.jpg
paperwireframepantry1.jpg
paperwireframepantry2.jpg

The usability tests revealed:

 

  • The “Add” button on the Product Selection page was confusing to the users.

  • The Confirmation page didn’t have any information about the order number or whether users would receive a confirmation email.

Wireframes

After making the adjustments to my paper sketches, I crafted digitized mid-fidelity wireframes using Sketch to plan the layout of the final design. Having mobile-first in mind, I visualized my design on a grid for the responsive web experience.

Screen Shot 2018-11-01 at 5.51.29 PM.png
Prototype
Develop Phase
 

Finally, after further iteration and more testing, I created a high-fidelity clickable prototype using Sketch and InVision.

Landing Page.png
Product Page.png
Product Details Page.png

Next Steps:

  • Design the rest of the screens including Food and Drink Menu

  • Design the mobile site

  • Incorporate the 'Order Online' function

  • Design Catering and Private Parties booking system

  • White LinkedIn Icon