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.
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
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
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.
-James K.
I like buying souveneirs from places that have a long history.
-Sophie M.
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.
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.
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.
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
Redesigned Site Map
Initial Sketches
Through sketching and iteration, I was able to create low-fidelity paper wireframes for usability testing.
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.
Prototype
Develop Phase
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