Toppers Pizza

About the project

SITUATION: Toppers Pizza is a Wisconsin-based pizza franchise that has been expanding to other parts of the United States. Their website (both mobile and desktop) and mobile app needed to be updated to improve the flow and overall design. I was brought on by DPA Software to help with this project.

GOAL: The primary concerns to be addressed were the pizza ordering process, specifically the customization flow; updating the look and navigation to match the industry standards; and giving the design a fresh, modern look and feel.

Details

TIMELINE: Six Months

ROLE: UX Designer

TOOLS: Figma & Maze

YEAR: 2022

Currently, this website has not been released, because of this, images of the new design are blurred

CURRENT DESIGN

The first step was understanding the current flow of the website. To do this I came up with a few scenarios of what a customer's goal could be and the resulting actions they would take on the website. This included what form of the website they would use (mobile, desktop, app) and what they would order. This was a helpful tool for making sure I covered all aspects of the ordering process when making the flow diagram.

Making the flow diagram involved going through the process of ordering a pizza and taking a screenshot at every new page. As seen above, I imported these screenshots with labeled arrows between them stating the action that was taken for each step. This was done for both the desktop and mobile sites, with the understanding that app would be the same as the mobile site due to technical limitations. From there, the DPA team and I added UX notes and "Voice of Customer" notes that highlighted important information that would be useful in the redesign. Additionally, a click study was done with both the Toppers flow and a few of the competitors.

LEARNING FROM THE COMPETITION

Since a major goal of this project was to improve the website's ordering process, I turned to other sites that had exemplary ordering processes, most of which were direct competitors of Toppers. This included the apps and/or desktop websites of Mod Pizza, Little Ceasers, Pizza Hut, Dominos, and Noodles & Company. By doing this, I was able to make comparisons between these websites and Toppers' website, contrasting the strengths and weaknesses of both. This also highlighted trends in what other sites were doing, if a majority of the competitors shared a feature, it became a necessary feature to add or refine on Toppers' workflow.

PROTOTYPING

The next step was wireframing, starting with the current website as a base. While the normal order of operations is to create the desktop design and then convert it to mobile, the team at Toppers told us that the majority of users use the mobile site rather than the desktop. Thus, we started with the mobile design first, wanting to make sure that we put a focus on that design. Because we already had a strong brand to work with, our wireframes could be made with the assets and style of the current website. For this, a style guide and reference sheets were made to make sure everything stayed consistent. Throughout this process, I received feedback from the Toppers team and implemented the changes they suggested. Later iterations were clickable to better understand how the designs would be implemented.

TESTING AND REFINEMENT

Once we had a design that both the Toppers team and the DPA team were happy with, we began user testing with the program Maze. Over twenty people were tested, half trying the desktop website, and the other half trying the mobile website. In order to prevent bias from which flow was tested first, some of the testers saw the old site first and the new site second, while some got the reverse. The test involved going through the process of building a custom pizza on both the current and new flow. After all testers in the group completed the test, a group discussion took place. During this discussion, the testers were able to reflect on their experiences, pointing out where they struggled and things they noticed. Additionally, Maze collected a good amount of data we could review including heat maps, screen recordings of each tester, and audio recordings if the tester opted into the feature.

The testers unanimously favored the new design but there were some struggle points that came to light. Some options were not as obvious as we thought they would be and some menus were not as intuitive as they could have been. Based on this feedback, we had a clear list of refinements that needed to happen before the final design was presented to the Toppers team. As a part of these refinements, a designer was brought on to provide additional feedback and tweak the design to make it look even better.

REFLECTION

This was my first major project that was not a part of an internship or school and it was a great experience. I learned a lot about the testing and design process, skills that I will take into my next projects.