Pizza Shop
What if ordering pizza felt like playing a fun, nostalgic video game? This project reinvents the pizza ordering process with an interactive kiosk that lets customers craft their perfect pizza, all while tapping into the playful energy of early 2000s cooking mini-games.
Duration
14 Weeks
Role
UI, UX, Branding
Team
Solo Project
Software
Figma, Adobe Illustrator
The Problem
Pi Craft’s business model is centered around customizing your own pizza. People walk to the back of the store and see a counter filled with options for dough, sauce, cheese, and toppings. It can be overwhelming to decide what you want with a line of people behind you and no labelling for the product options. This process becomes even more challenging when you bring kids into the equation, especially little ones who aren’t tall enough to see over the tall counter. This is especially a challenge because their target demographic is families and college students.
To address this, I’ve created a custom kiosk experience that simulates the customizable pizza ordering process at the counter, but without the pressure of having people waiting on you to complete your order.
User Flows
I analyzed user’s workflows on the website. With Brookline heavily emphasizing its school system and family-oriented communities, I prioritized this in the restructuring of the content.
Custom Monitor
To align with the fun and family-oriented aesthetic of Pi Craft, I’ve created a custom kiosk with a square screen to fit the pizza box shape. It is equipped with a card reader, receipt printer, and a scanner to facilitate using their loyalty program.
Accessibility
The height of the kiosk is ADA compliant as its mounted to the front wall on a ledge, which serves as a place to put down one’s personal items while ordering. The screen also can tilt down to allow people of many heights and positions to reach the screen.
Physical Mockup
I created a prototype of the physical kiosk to simulate its vertical rotation and validate that the height works for a multitude of potential users’ heights. Using this model, I also conducted tests to evaluate various button and text dimensions to improve readability and interactivity.
Workflow Diagram
After analyzing Pi Craft’s business model and their current order experience, I mapped out how a kiosk would fit into their present-day processes with the products options that they sell.
Style Guide
After some design exploration, I landed on an aesthetic that would appeal to the plethora of college students and families that eat at Pi Craft: a 2000’s cooking video game aesthetic.
Color Palette
The primary colors for the Pi Craft kiosk are burnt orange and gray. The burnt orange is the primary call-to-action and the text is gray. Other colors are used in the graphics, but are not a part of the Pi Craft’s branding.
Type
To fit Pi Craft’s funky typeface used in their logo, I used a similar font Londrina Solid, which brings out the playfulness in their brand identity.
Illustrations
To build upon the 2000’s cooking video game aesthetic, I hand-drew illustrations of all possible customizations of the pizza dough, sauce, cheese, and toppings.
Grid
For a consistent user interface throughout the kiosk, I used two grid systems. On pages with the product catalogues, I used the five column grid and the rest of the pages used the four column grid.
High-Fidelity Wireframes
With the style nailed down, I built the high-fidelity wireframes for the platform, prioritizing the funky and playful aesthetic throughout.
Home
I created the custom graphics for the common pizza flavors and brought in asymmetry and scale with the seasonal flavor’s graphic.
Customize
To give the user a sense of personalization, I’ve drawn each layer so they can visualize the pizza as they build it.
Outcome
With the addition of the kiosk, Pi Craft now has alternative ways of ordering and customizing pizzas that are accessible. The kiosk caters to the target audiences of families and college students with its fun 2000’s video game aesthetics and clear visualization of the pizzas as the users customize them.
More Like This
Supply Chain