iOS APP for Robotic Pizza Truck
- by Rob
The Challenge
Food trucks are becoming more creative, and our client was offering a new twist, a "robotic" pizza truck. I worked with a team of 3, as lead designer, to create a prototype app that gives personality to a food truck with no humans aboard.
Key App Screens
The Approach
Our team worked with the client through a full UX process, including research, ideation, prototyping and testing, to develop a prototype app which customers could use to locate the truck, place order and make payment.
My Role
• Team leader for a group of three designers.
• Oversaw the general progress of the project to ensure all aspects were ready for client presentation.
• Built key interactions of Axure prototype.
• Developed user flows.
• Contributed to user research and user stories.
• Created final artwork / visual identity
Competitive/Comparative Analysis and Domain Research
We performed competitive/comparative analysis and Domain research to determine industry practices on mobile apps used to order food. We looked at overall ease of use, ease of sign-up, ordering, payment and rewards points.
Key takeaways from competitor apps:
Domino’s Pizza
The summary at the top of ordering page is a key feature for ease of use. UI elements not elegant, make app look dated.
Mod Pizza
Fast ordering process. Unable to see a summary of toppings, confusing when selecting many ingredients because of long scroll.
Blaze Pizza
Unique stylish UI. Easy to review order at checkout. Hard to see all toppings selected without scrolling.
User and Stakeholder Research
Stakeholder and user interviews centered on three specific topics; the food truck experience, ordering food online or with app, and pizza ordering preferences.
The food truck experience – key takeaways
• Users have high expectations for the food in food trucks in Seattle, it’s not just a way to get cheap food in a convenient location. Users have a sense an automated food truck will be more like a vending machine, and they don’t necessarily equate a vending machine with high quality food.
• Stakeholders want the experience in interacting with the truck and the app to be memorable. They plan for the truck to have “personality” despite not being staffed by people.
Ordering food online/through apps – key takeaways
• Many users have generally few apps they use, and are reluctant to add more unless they are truly useful. Ordering must be intuitive, and payment easy and fast.
• Stakeholders want easy on boarding and simple payment process. Would like to make the ordering process fun, and have the controls of the apps match the planned manual controls on truck. Stakeholders also interested in adding group ordering and offering rewards for purchases.
Pizza ordering preferences – key takeaways
• Users nearly all enjoy and appreciate pizza. Many of the users in the target demographic want high quality unique ingredients. When they go out for pizza, they definitely want the quality to match the other types of cuisines that are available. They are interested in seeing the pizza being made in the truck.
• Stakeholders have a minimum number of ingredients they would like to have and would like the app to be scalable to add more ingredients as time goes on.
Insights
Affinity Diagram
To synthesize data we created an affinity diagram, where we sorted key data points, and created “I” statements around the specific topics that were surfaced during the sorting process.
"I" statements
• I would like excellent food.
• I want a unique or interesting experience.
• I think branding and the way the truck presents itself is important.
• I want the truck to have personality.
• I want the ability to share the experience with friends in person or on social media.
Working on the affinity diagram.
Persona: Jenna Hale
The synthesized data was used to create a proto-persona. Jenna helped focus our team on what a typical user might want out of the experience.
In her spare time Jenna enjoys shopping, crossfit and trying happy hour at new places around town. She works in a downtown office. A couple blocks away there is an area where food trucks tend to gather at lunchtime. A few times a week, Jenna walks to the food trucks with her co-workers. If she has a photo-worthy food experience, she often shares a photo on Instagram, and sometimes she’ll review the place on Yelp.
Story Board
Story boards were created to help breathe life into our persona as we developed the user story. Drawings by Alaina Wharton
(1 ) Jenna is thinking about having lunch with her friends and then she notices it is starting to rain. (2) She remembers hearing about the great pizza at a local food truck. She knows she can order ahead, so she won’t have to wait in the rain. She downloads the app and orders 3 pizzas for her and her colleagues. (3) She takes a quick walk through the rain to pick-up the pizzas when she knows they are ready.
User Flow
The overview user flow helped inform the features and sequence of the initial screen designs.
Design and Prototyping
Charettte
We started our design with each team member doing quick sketches in a charrette style meeting, iterating on our designs over several rounds.
The evolution of the ordering screen, where the pizza is constructed. The physical truck will have levers a customer can interact with, and the stakeholder wanted a similar experience in the app. The earliest idea used vertical sliders, but it was decided that would be an awkward interaction, and difficult to scale with multiple ingredients.
Evolution of Character Logo
At this point in the design process we were concerned the app was not achieving its goal of giving personality to the truck. I noticed the logo that was provided by the clients looked like wheels with arms. I added a robot head, as an idea for a character for users to interact with.
Once we decided we would include the character in our design, we sketched pages with ideas of how the character would appear on each screen. We ultimately decided that the character would stay in the same place, to make a uniform experience for the customer.
In future versions of the app, the role of the character can be expanded to do more. Here, as shown, act as the shopping cart, change into a chef's hat when customers pizza is cooking, give a user VIP tickets for a free pizza or to jump the queue when they have rewards points, and to indicate trouble with the system.
High-resolution concept
Artwork of character and colors for hi-resolution mock-ups.
Prototype
An iOS prototype was created using Axure RP. Video shows typical user path. Note, Axure prototype uses early rudimentary version of UI design.
User Testing Emerging Trends
Wins
• Cute/visually appealing: Users liked the overall look and feel, and felt comfortable using the interface.
• Easy to navigate: Users were able to use a script and perform each of the business requirements quickly.
• Apple Pay and Square: Users were happy with the speed of Apple Pay and the brand recognition of Square.
Opportunities
• Sliders: Weighing the positives/negatives – Sliders worked well, but raised questions over how much control they had over the amount of ingredients. Currently the sliders just have two settings and users wondered if it could be more incremental.
• Post-confirmation/truck pickup: Have a more elegant experience for tracking order and instructions for picking up at truck.
• Length of build screen: Pizza ingredient list is long, requiring a lot of scrolling if user needs to change the order.
• Information about the truck itself.
• More robust,easier to understand rewards points.
NOTE – At the time this was being built the company was seeking investors. It has since been reported they received initial seed funding. The company has asked that their name not be used in searchable text, as part of the agreement for publishing this case study.
Icon Credits: David Lamm (red food truck), Made by Made (pizza box), Shawn Schmidt (Seattle skyline) Erick Miranda Vazquez (food truck), Justin Alexander (pizza), Yazmin Alanis (food app), Bryan Sellers (Tickets), Matt Wasser (sunglasses), Nicholas Menghini (cart), icon sphere (chef hat), Gan Khoon Lay ( repair man) – all from The Noun Project.