UI/UX Design: Subway

Final Deliverables

Team Size + Role

Time Frame

Programs Used


User flow, wireframes, and high fidelity screens of a digital experience that improves upon the current sandwich ordering process at Subway

1 / Interaction designer

2 weeks (Winter 2019)

Adobe XD

Carnegie Mellon University

Process Documentation_Subway_UserFlow.pn

Stressing On Sandwiches

Ordering a sandwich at Subway is an unequivocal nightmare for introverts (me included)! The huge array of choices, methodically made sandwiches, and linear-yet-branching lines of decisions make for a good user experience design challenge: How might we take a process, reduce it down to discrete steps, and bring it to a digital, interactive medium?

Process Documentation_Subway_UserFlow2.p

Food Stories: Every consumer good has a story, from coffee to sandwiches - going wide on the necessary steps to get a good cup of coffee or a ready-made sandwich aids in going deep into discrete, system-based steps.

Observe + User Flows

Although Subway's sandwich-fabricating methods seem linear (literally dragging a tray along a steel conveyor belt), the amount of diverging lines of choice multiply really fast. Observing consumers at the check-out line and then mapping the experience helped to see the entire process, step by step, from a wider vantage point. From there, alternative user flows were proposed to address certain oversights with the current system, such as:

1. Balancing vegetarian vs non-veggie decision making

2. Allowing back-tracking of already-ordered choices

3. Reducing cognitive load

Process Documentation_Subway_UserFlow3.p
Process Documentation_Subway_UserFlow4.p

Wireframing + Usability Testing

From here, alternative user flows were wireframed out - the brandless prototypes experimented with information architecture and interaction design principles. In particular:

1. Cognitive loading; an environment for tracking past choices

2. Visual representations of items to cut down mistakes

3. Making more steps; reduces confusion and error

4. 'Saucier' diction; less sterile experience

Screen Shot 2019-02-14 at 9.50.16 PM.png

UI Draft #1: Questions are made bombastic and hard to miss. A tab at the bottom is where choices are selected and history of decisions is displayed. User testing showed that being forced to open the tab every time was too much. 

Process Documentation_Subway_UserFlow6.p

UI Draft #2: This time, choices are presented on the same screen as the question; the "Sandwich Journey" tab on the bottom displays a status bar to indicate progress, and expanding the tab provides history of decisions. 

Process Documentation_Subway_UserFlow7.p

Backtrack: The decision history provides a way to return back to previous decisions and change them. This alleviates the pressure of making mistakes and reduces cognitive load. 

Final Interface Decisions

1. Make the vegetarian option more prominent (don't discriminate!).

2. Multiple, simple discrete steps are easier to navigate than a few complex ones.

3. Past decisions and backtrack options are extremely useful.

4. Sarcastic wording of questions goes a long way to make the interface feel more human.

Mockup Setup.jpg
Mockup Setup2.jpg
Mockup Setup3.jpg
Mockup Setup11.jpg
Mockup Setup6.jpg