Central Market
Case Study

Overview

Central Market is a American gourmet grocery store through out Texas.
‍
Our team was challenged to redesign the existing website into a user friendly interface that users can easily navigate and grocery shop online.

‍
MY ROLE
‍
UX/UI Designer
UX Researcher
DURATION

4 weeks
TEAM
‍
6 UX/UI Designers
TOOLS
‍
Figma, Miro, Adobe Photoshop, Adobe Illustrator, Visual Studio Code

Problem

Central Market's site was designed to help users grocery shop online. We have observed that it isn't meeting the goal of providing a navigable grocery shopping platform, causing a high failure rate to complete checkout.

Solution

Redesigning the homepage and the user flow of the checkout process, will contribute to a higher task in complete rate and a decrease in time spent while checking out.
Redesign the check out process for a better user experience
Redesign the Homepage to be more relevant for users who are visiting the website.

Impact

User Research Approach

Heuristics

First, we conducted a heuristics evaluation on the current website.
Homepage
Blog format instead of e-commerce

Cards
Add extra clicks to the user experience

Navigation bar
Repeats of cards on the homepage which seems redundant

Login / Signup Buttons
Two buttons could be consolidated into one

Competitor Analysis

Next, we wanted to research the pros and cons of Central Market's competitors' websites by creating a competitor analysis.

Here is a high overview of what we found out.

User Interviews

To understand our users better, we conducted 6 user interviews. Here are some key insights we learned.

User Survey Research Insights

User Persona

After synthesizing our user interviews and surveys, we were able to create our user persona. This persona serves as a representation of all the common user's needs, goals, and pain points.

Usability Research

Usability Testing was conducted for 3 tasks to see how easy the current website navigation is.
Key Pain Points found during the usability testing.
‍
1. Users could not easily navigate back to homepage
‍
2. Constant pop up to login each time when viewing items is annoying
‍
3. Unable to browse items without selecting a store first
‍
4. Cannot check out as a guest. Must be logged in or create an account

Feature Prioritization

After gathering our usability testing insights, we created a feature prioritization matrix to help us when we start our wireframing.

User Flow

Before we start wireframing, we wanted to establish our user flow by creating a user flow chart.

Low-Fidelity to Mid-Fidelity Wireframes

Based on our user research and testing, we were able to mock up low fidelity sketches and then mid-fidelity wireframes. Once we finalized on our mid-fidelity wireframes, we prototyped the wireframes to perform usability testing.
‍

Style Guide

We created a style guide to ensure consistency and standardize elements across the website, including color palette, typography styles, UI elements, etc.

High-Fidelity Wireframes

Finally, we applied our style guide to create high-fidelity wireframes for new iterations of our homepage product, and checkout pages.

Conclusion

Through a lot of research and usability testing, we were able to integrate a user friendly design where users were find the website easier to grocery shop online. We found that users loved the following features added:

1. Redesigned homepage included shop by product category rather than seeing cooking school.
‍
2. Adding featured items section provides users a similar browsing experience as if they were in store.
‍
3. Adding a buy it again section when logging into your account provides efficiency when grocery shopping online.

4. Adding option to check out as guest in the checkout process.

Lessons Learned

Communication is essential. There were times when the group would start working on certain tasks with the assumption that we are on the same page. The miscommunication would just add unnecessary work to our workload.
‍