I like the fresh take on navigation that Chipotle has come up with, the ability to swipe between all main parts of the flow is new and interesting. I am a little more inclined to see something like that more than, say, traditional UX with a navBar and a tabBar. But I am still open to both. Here are the main views that I see us needing:
- A main homescreen view:
*Update* You can read my original idea below, but I'm not convinced it was the right experience. I think that showing the pizza types first might open up a can of worms because different pizza shops could have many different names and types of pizza and it wouldn't be feasible to show them all on the homescreen. Instead, it might make sense to make it a more location based search. The homescreen surfaces nearby pizza places with relevant, high-level info and then when you tap on that shop you can see their menu. That seems more logical! I still think it would be nice to have quick-ish access to recent orders and possibly even a deals area, though I am not sure where that would live or how it would be accessed.
*Old description* I like the idea of having a homescreen because it allows us to surface a message vs just throwing them into the app. I'm envisioning a homescreen like the Walmart app that has a rotating banner for promotions and then modules beneath that that represent different things like recently ordered items, sale items, etc. In the case of our app, these modules could represent recently ordered items (with the ability to add to cart again with a single tap), sale items or promos, etc.
One of these modules on the homescreen view could be the menu overview view. This view represents any items that a shop has pre-defined as a purchasable item. In the context of the pizza shop this menu overview view might list pre-defined options like a pepperoni and cheese pizza, a BBQ chicken pizza, a cheese pizza, etc. I'm envisioning this view being similar to the menu overview view in the Chipotle app where you just have high-level categories like burrito, tacos, burrito bowl, etc, arrayed in a scrolling list with beautiful pictures and descriptive text. In the context of our app this might look like that with the pre-defined pizzas all listed out, with perhaps the top option being a customize option. Whenever a selection is made on this view you would go to the shop finder view if a shop hasn’t been selected, or the pizza creation view. I think I like having this menu overview feature on the homescreen itself, and not making them tap on another button to get there. But I am not completely certain on that. It could be that it makes more sense to use the chortle concept of pushing the menu button or swiping down for the menu.
- A shop finder view (3 of the attached images): I like the idea of incorporating a mapView into this flow, but I also like the idea of having a list component that lets you see what the name of each store is. Kind of like Zillow.com does on their website with the mapView on the left and the list that represents the pins on the map, to the right. The mobile version of this flow would be the mapView on top with the shop detail cells below. And as you scroll around on the mapView the list data updates, and if you scroll up on the list, the map slides away out of view. The shop detail cells would have things like the name of the shop, avg rating in stars (or pizzas), and distance from your current location.
- Pizza creation view (1 attached drawing): This is a fun and interactive part of the app that allows you to build a pizza like it is a kids game in that it shows you the actual pizza as you make it (flat, 2D). If you get to the pizza creation view by selecting a pre-defined pizza type, it will be populated with those ingredients in place and the pizza view would reflect those selections. For example, if you select Hawaiian pizza from the menu overview, the pizza creation view would be populated with a big pizza view that shows what the pizza looks like with sauce and cheese and pineapple and ham. It would also list out the ingredient selections with the ability to add/remove ingredients as you feel like it. One way to accomplish this design could be to mimic the behavior from the shop selector view and have the pizza on top with the ingredient list below and as you scroll up on the ingredient list, the pizza could shrink or slide away. If you wanted to remove an ingredient from the list it would be easy to do so, it would also be easy to add a new ingredient, and that new selection would be reflected on the pizza view.
Another aspect of this view would be to select a size. Ideally the user would be able to select a size, select the ingredients and have the final price for that pizza reflected in real-time somewhere on the view so they know exactly what they are getting into.
This view would also have an AR button somewhere that would allow the user to see the selections they have made rendered in AR right from their phone. The AR view will be designed by us, but this view will need an entry point for that experience.
This view will also need an option to add to cart once the selections for the pizza are complete. Once you complete the selections in the pizza creation view, you are taken to the cart page.
*Update*: I didn't originally state this, but I think it is important to consider that some people might want ingredients only on one half or the other or both. This is a common UX requirement in existing pizza creation flows and should be accounted for here.
- The Cart Page: This is where the user's order will add up as they go. Similar to the Chipotle app, there can be multiple ways to get to the Cart View. If you get to the cart view from the pizza creation view it may be the case that you want to actually add another pizza to your order and it could make sense to have a quick shortcut from the cart. It is from this view that the user would get the finalized subtotal of the order and would also be able to press the "buy" button to actually initiate the order.
- Summary: In general, I like the flow and architecture of the Chipotle app, but would like something tailored and customized to fit the pizza niche we are targeting. Above all we want something that is really impressive visually and that will catch the attention of anyone that looks at it.