Ordering at Subway: Site Map, User Flow, and Mobile Prototype
A Quick Course Project ~*OR*~ Three Weeks of Unexpected Sandwich Cravings
This assignment was undertaken as part of a Spring 2020 Prototyping course at CMU. We all chose various tools to use for creating site maps, user flows, and prototypes, using any nearby restaurant’s menu as the basis for our exploration. Through this project, we exposed each other to the pro’s and con’s of various tools.
Eat Fresh
I chose Subway because of its focus on customization. I saw this emphasis an opportunity to explore a range of possibilities for breaking down the user flow.
I’d always found the in-person ordering process at Subway to be pretty structured in terms of decision making, especially if you’re creating your own sandwich (which I always do, heavy on the chipotle mayo). But as I went to Subway to look at the menu in more depth (and order my first sandwich of this project), more complexity materialized.
For example, certain sandwiches are advertised as part of a “Get It All” meal — even though you can add chips or cookies and a drink to any sandwich for a reduced combined price. “Make it Fresh Fit” determines factors like size, bread, and veggies for you to keep your sandwich under 450 calories. Are these categories that people consider before deciding more about what’s in their sandwich?
There are separate “Signature Wrap” topping combos advertised, but you can also get any sub as a wrap. Do you list the topping combos and then ask people whether they want a wrap or sandwich? Or separate wraps and sandwiches, and display the same set of combos in each category?
(As an aside, when I tried to order a wrap, I learned “wrap” refers both to the tortilla and the entire sandwich, and also that I don’t catch on very fast when I’m sleep deprived. As in, “I’ll have the chicken caesar wrap.” “What kind of wrap do you want?” “The chicken caesar wrap.” “But what kind of wrap?” “….The one that’s third on the list, chicken caesar?” “[Bystander:] Ma’am he’s asking if you want that on a spinach wrap or a sun-dried tomato wrap.”)
I also needed to factor in the fact that even the predetermined sandwiches (e.g. Italian BMT) allow for customizing bread and toppings; all that’s determined is the meat and cheese.
Creating the site map
Creating a site map required breaking down the menu offerings from overarching categories down to ingredients, reflecting the way someone might make decisions about their order.
I decided the most fundamental decision to display was whether you want a breakfast sandwich, or a lunch/dinner entree. This would be followed by the type of item you wanted (sandwich, sub, wrap) so that the Sandwich Artist assisting you could begin building a base. Finally, you would choose among pre-selected and custom toppings.
For whatever reason, I find it easiest to begin structuring hierarchies as bullet points before making a more visually appealing version. I knew LucidChart had a feature for converting between text and site map templates, so I worked with this platform to refine a site map of the Subway menu:
User Flows
We were tasked to demonstrate two ways in which a user might then move through this flow. I’d only used LucidChart for site mapping before, so I decided to try it out for flowcharts.
LucidChart made it easy to connect new items of any shape to the existing ones in the flow, automatically adding connecting arrows. Moving items around the diagram was tricky, though; I expected the arrows to automatically move to the side with the shortest path as I moved objects (e.g. from top-bottom connected to right-left connected), but the arrows remain on the same sides, necessitating manual adjustment.
I also tried out draw.io at the recommendation of many classmates. In draw.io, the arrows move around much more fluidly as you adjust the positioning of various objects. It’s not as easy to connect a new item and choose its shape at the same time, though; the new shape needs to be dragged out onto the diagram, and then connected to the existing object.
Mobile Prototype
With these flows in mind, it was time to structure a mobile prototype that would provide a seamless flow for ordering food. The task: ordering a chicken caesar wrap, with spinach subbed for lettuce.
I looked to Subway’s existing online ordering platform to match their colors, fonts, and images, but also to see how they’d chosen to break up their menu categories. I decided to stick with the categories they’d identified on the landing page: Sandwiches, Signature Wraps, Salads, Breakfast, Sliders, Sides, and Beverages.
On the Signature Wraps page, I listed out all wraps. Since there are so many options, and since the first choice in store (besides bread) is the protein you want on your sandwich, I gave the option to filter by protein to make it less overwhelming for a user to scroll through.
Next came how to customize ingredients. Subway lets people choose to add more (2x) or less (1/2x) of a given topping than the regular amount, so I incorporated “+” and “-” signs in addition to adding/subtracting ingredients.
Sketch made it easy to create hotspots, and the logic for making screens scroll (fixing an item to the bottom of the screen at the bottom of the artboard) made sense; the one shortcoming I noticed was that each new screen automatically returns the viewer to the top of the artboard. This makes certain points in the prototype (especially customizing ingredients) more confusing than they need to be.
I found I needed to use Marvel or InVision to export the prototype, which for some reason did not respect the static bottom nav bar being pinned to the bottom of each screen, so I’ve included a video of the prototype’s appearance in Sketch.
Feel free to try out the final prototype as exported using Marvel below!