Scope of Project

Company: General Assembly
Role: UX Designer & Researcher
Timespan: 2-week sprint, March 2022

Challenge: Today’s Pet is a small, local pet store located in Elkridge, MD. The store is a staple in the community but its website is outdated. I was tasked to improve and modernize the website while also designing an e-commerce process for it. I worked to update the site to showcase the company’s products while maintaining its brand image: “small-shop” appeal and great customer service.

Overview

Today’s Pet cares about its customers. Now, the store wants to showcase this customer-first stance while transitioning to an e-commerce website. Throughout the redesign process, I kept one vital customer base in mind: those wanting to save money while shopping at the store. Next, I analyzed companies with established e-commerce platforms to gain an understanding of industry standards. With this in mind, I began creating user flows for the site’s purchase process. After user flows, I sketched low-fidelity designs of how the site might look. I then created desktop and mobile wireframes of these flows, followed by a high-fidelity desktop prototype of Today’s Pet’s new website. Finally, I tested the prototype on five users and made improvements to it based on feedback.

Creating a user flow to map
the e-commerce process

After the user and his needs have been established and I’ve conducted market analysis and card sorting, I moved into the creation stage of the project. I began by creating a user flow to show the pathway a user would take while purchasing a product. This was an important step in the design process because it laid the groundwork for the actual website.

Sketching and wireframing to start creating
the experience

With the e-commerce purchase flow in mind, I began iterating ideas by rapid sketching. This allowed me to quickly produce multiple ideas for what Today’s Pet’s website could look like. During the sketching phase, I tried to design a simple and intuitive user interface—a feature that the target user really desired. Although the main focus of this project was to create a desktop version of Today’s Pet’s website, I also created sketches and wireframes of what the mobile experience could be.

After sketching, I began creating wireframes to get a mid-fidelity representation of what I wanted the finished website to look like. During this phase, I focused on laying out the basic navigation and imagery for an easy-to-navigate website.

Iterating the design to start addressing business and user needs

After the sketching and wireframing were complete and I knew the direction in which I wanted to proceed, I designed multiple basic website backgrounds. The purpose of iterating was to make as many plausible creations as possible until I created a design that best kept Today’s Pet’s brand while still appealing to the users’ needs. During this part of the project, I researched how brands like Netflix, Target, and Pizza Hut incorporate their brand color—red—into their websites. I found that those companies use blacks, grays, and whites to complement the red branding. Furthermore, they incorporate red into the sites’ imagery to highlight their brands without overwhelming the user with a color our society often attributes to violence, danger, and hesitation.

From this…

…to this

Conducting usability tests to
validate the design

After creating a mid-fidelity prototype of the redesigned Today’s Pet website, I moved on to usability testing. I conducted five usability tests with users who were asked to purchase a bag of dog food. Ultimately, 100% of users were able to complete the purchase flow. Two users miss-clicked and had to restart the flow, but were able to successfully navigate through the flow after the mistake. Furthermore, users stated that they were overall pleased with the redesign, but that it felt a outdated and had some rough edges. With this in mind, I went back into Figma and started iterating until I came up with the final, high-fidelity mockup of the Today’s Pet website.

Refining the design based on user feedback and needs

Keeping in mind the feedback from usability testing, I created the most current iteration of the Today’s Pet website. To make the purchase flow feel more modern, I revisited some of Today’s Pet’s established competitors to gain an understanding of the current e-commerce landscape. The product page reflects this. I also redesigned the sign in modals and darkened the overlay behind them. Finally, I streamlined the checkout page to match the modern feel of the product page and sign in modals. The final purchase flow is seen in the video.

Planning next steps to deliver
a complete product

Add: I want to add flows for creating and signing into a customer’s account and a way to navigate to Today’s Pet coupons. Furthermore, I need to add a search function and a way to filter products. I intend on conducting card sorting to understand how users would filter products. I also want to make sure the Today’s Pet blog is addressed. Keeping users up-to-date on pet information is part of the company’s brand and I want to ensure this stays a part of the store’s online presence.

Redesign more: I want to make tweaks and improvements to my redesigned website to continue modernizing the feel of the site. I’ll ensure Today’s Pet has a similar aesthetic feel to successful e-commerce platforms by continuing to conduct competitive and comparative analysis.

Share: I want to share my ideas and prototype with Today’s Pet ownership. With an updated site, I believe Today’s Pet can continue providing excellent customer service while implementing a productive e-commerce experience. With an online store, Today’s Pet can reach more users and potentially see an increase in its profits.