Toppers Pizza App Portfolio

Overview

This is a screenshot of the main menu Figma design.

Situation:
Toppers Pizza is a chain of pizza restaurants headquartered in Whitewater, Wisconsin.

Technologies: Custom ordering system in a Webview app and desktop.

Site Deployed: Expected deployment 2023.

Tools: Figma (Wireframing design), Maze.co (Usability testing), Google Sheets, Google Slides.

Personal Involvement:

Click studies
Clean up and repair prototype
Clean up the design system and icons
Analyze and format of Maze report

Click Studies

A Click study is a benchmark of the current app, the future app, and the best-in-class competitive apps. The benchmark criteria include the number of clicks, the amount of scrolling, the number of form fields, and the time it took to complete a series of operations in each app. This allowed us to validate the new design against the old design and the competition so that we could reduce pain points and cognitive load for the user of the new app.

Information has been limited because the app has not yet been released to the public. Images are zoomed out to hide specific details because the app is in development at this time.

Click study Flow

Here are the click study flow chart sample used in counting the number of screens, scrolling, clicks, and fields filled out.

Click Study Spreadsheet

Final Revisions of The Prototype and Design System

– Clean up the app and desktop looking for inconsistencies, misplaced icons, and spell corrections. Simplified user flows and processing throughout the app and desktop.

– New features were created because, during this process, we discovered a flow that the users may want to take while using the app. Created new icons that fit the overall design better and had higher color contrast for users to find more efficiently.

– Applied style sheets from the design system to help with consistency throughout the app and website.

– Turned all flows into a clickable prototype for testing and showcasing to the client.

Design System

The Design system shows all of the icons, fonts, and other assets that are used throughout the app and website.

Mobile Design

Desktop Design

Setup and Refine the Maze Usability Test

– Goal of usability testing was to determine what parts of the old and new app did the user like and dislike for further improvements of the new app.

– Maze, the product, allowed us to create a survey that could be audio and screen recorded during the testing of the app. Maze made creating questions easy and collecting survey responses in a simple report for us to review.

– The Maze tool performed click measuring, video recording, and survey questions to determine how usable the desktop and app were. Had a focus group with users to talk about the successful and painful parts of the app and website.

– Made changes to the design based on the report generated by Maze. Modified labels and fixed confusing user flows.

Mobile Site Useability Test

Build your own pizza useability test yielded useful results.

Desktop Useability Test

Survey Question Sample

Status

The new app is currently in development.

Information has been limited because the app has not yet released to the public. Images are zoomed out to hide specifics details because the app has not yet been released to the public.