The Original Pantry Cafe Project
My Role: UX Designer
Length: 2 weeks
Tools: Google Suite, Sketch, Lucid Charts, Whiteboard, Post-Its, Invision
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.
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.
Create a seamless
e-commerce experience by redesigning the current website navigation incorporating Shopping Cart and Product Details features in a checkout process.
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.
Create a seamless e-commerce experience by redesigning the current website navigation and incorporating Shopping Cart & Product Details features in a checkout process.
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.
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.
It felt good to have that piece of brand because there is an interesting story behind it.
I like buying souveneirs from places that have a long history.
I'm just always very busy, so I prefer to buy my merch online, its fast and easy.
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 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.
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.
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.
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
Redesigned Site Map
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.
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