Accessible Online Ordering.
How can we ensure that everyone has the same online food ordering experience?
My team worked with Focus Brands to redesign Schlotzsky’s online ordering experience.
In order to create a fully inclusive design, our team focused on redesigning Schlotzsky’s food ecommerce platform to be more accessible and meet the WCAG AA accessibility standards.
Aug 2018 - Dec 2018 (4 months)
UX Research: Created and distributed surveys, generated user journey maps, conducted semi-structured interviews, feedback sessions, and usability tests with target users.
UX Design: Generated user personas and design implications, created a user flow for final solution, designed graphical elements for implications, personas, and journey maps, and sketched medium-fidelity ideas for our prototype.
Pen + Paper, Sketch, Adobe XD
Our solution is a re-design of Schlotzsky's food e-commerce platform that aims to be more inclusive and accessible.
Easily navigate to start an order
We limited navigation options in the main navigation menu in order to decrease the amount of tabbing it takes to start an order.
Concise Menu with Card Layout
We re-grouped menu items in broad categories in order to decrease amount of tabbing when selecting food items.
We improved the grouping and order of customization options in order to provide a seamless process when ordering a sandwich.
Enhanced and modern checkout process
We re-designed the checkout process to provide a stream-lined experience and more payment options based on preferences of visually-impaired users.
Tab Through Mapping
We used the following methods in order to gain information about how our target users currently interact with online ordering systems and understand their current satisfactions/frustrations with online ordering platforms:
Tab Through Mapping
To start understanding which parts of the e-commerce experience needed to be improved, we conducted a tab through mapping and came up with the current user flow when a user tries to order a sandwich:
Schlotzsky’s ecommerce platform’s current user flow
We also used tab through mapping to understand how long it takes for each user group to complete the process of ordering a sandwich. Here are the results that we found when tabbing through the website and mobile app when trying to order a sandwich:
2 Participants (1 fully-blinded user and 1 color-blinded user)
We conducted 2 semi-structured interviews in order to gain rich insights on users with visual impairments’ experiences with the current online food ordering system.
Analysis and Findings: Affinity Map
To analyze our findings, we used affinity mapping to review our qualitative findings. We recorded all of our key insights onto yellow sticky notes and ended up with over 170 insights. We then divided the yellow sticky notes into groups of four and each took turns reading out the insights we found.
Affinity Mapping Process
We then grouped related notes and came up with 3 high-level findings:
Our visually-impaired users like to be self-reliant but also rely on others for confirmation
Our users believe that hierarchy and structure is important for any website
Visually impaired users like to use technologies like Apple Pay to automatically fill in their information each time they order food
Goal: We distributed an online survey on Reddit in order to better understand the current allowance and limitations that online platforms provide when fully-sighted users are trying to order food.
Analysis and Findings
Here’s a summary of findings that we found about our participants’ preferences when ordering food online:
Likes amount of customization
Cares about ease of use
Likes easy navigation
Likes ability to pay
When asked about suggestions for improvements to the food ordering process, one participant said the following:
I would make the whole process somewhat more cohesive.
Personas and Journey Mapping
We then compiled our findings from our research into user personas and journey maps:
We combined information obtained from Focus Brands and from our user interviews to create 4 different user personas:
Based on the information from our tab-through mapping and interviews, we then generated journey maps for each primary user group as they navigate the current website and order a sandwich online. Since two of our personas would have the same experience while using the system, we decided to combine our personas and target three main user groups: fully-sighted, fully-blind, and those with other visual impairments:
Describe your image
Describe your image
Implications and Goals
From our affinity map session, we identified pain points and areas of opportunity for improvement. From these, we defined our implications that would guide us towards designing our final solution:
We then distilled our implications and decided on 5 primary design goals:
Simplify Navigation Bar
Reduce Number of Tabs Used
Simplify Customization Process
Establish Consistency between Marketing and E-Commerce experience
Improve the Checkout process
With our design goals and implications in mind, we went home to individually ideate and sketch out screens that would improve the current e-commerce platform. We then came back together to share our concepts:
Sharing our individual concepts during the ideation session
After sharing our concepts, we began to mix and match each screen and combined our sketches into three different design directions: Accessibility, Customizability, and Consistency:
This direction focuses on a minimalistic experience by reducing the amount of tabbing, thus making the platform more accessible.
This direction focuses on creating the most efficient and optimal experience when customizing menu items.
This direction focuses on creating a cohesive experience between the Olo platform (where people can order Schlotzsky's food online) and the Schlotzksy’s Marketing site.
Describe your image
Describe your image
Feedback on Design Directions
In order to assess our 3 design directions, we conducted several think-aloud task sessions, online ChalkMark testing, and a cognitive walkthrough. For each session, we asked our participants to “order a sandwich” using the sketches of each design direction. Here are some findings that arose from these sessions:
Checkboxes on Customization flow were clear
Layout of Confirming order was lacking some clarity
Determined to be compatible for mobile devices
Favoriting was a popular and expected feature
Wanted order information present at all times
Confused on editing items within Customization flow
Favored icons and cards for various menu options
Dropdowns for changing amount of customization food option is not favored
Display for pickup time “needs a new home”
Once we gathered feedback on our sketches, we began to distill our key findings and create a set of wireframes that that encompassed all of the successful features.
The main features for these wireframes include:
Cards for selecting a food item and customization options
Consistent display of location and cart
Selecting/deselecting cards when customizing a food item
Favoriting food items option
A randomizer option
Apple Pay/Autofill options
Wireframe of our solution
Feedback Session on Wireframe
In order to assess our set of wireframes, we conducted a cognitive walkthrough and think-aloud task sessions with both fully sighted and fully-blind participants. For each session, we asked our participants to “order a sandwich” using our wireframes.
In order to conduct the session with our fully-blind participant, I created a script that walks through every element of our wireframe screens. Whenever our participant said ‘Tab’, I would navigate to the next element that a screen reader would naturally pick up and read aloud. For example, when the user was on the location pop-up window, a screen reader would read the following in a fast, monotonous tone:
Nearest Location, Location Address, Pickup, Delivery, Catering, Not you?,
enter location, next button, dialogue, close button
Here are some general findings found after conducting our feedback sessions:
Our current wireframes are for the most part enjoyable and easy to use
Customization’s navigation menus (bread, meat, etc) need to become more apparent with a graphic detail to disclose the expected customization process
Needed to add price and calories to menu items before the user selects one
Need to include an option or warning if the user tried to leave the page during customization
Need to redesign the checkout as user/guest pop-up window to minimize confusion
We distilled our findings from our feedback sessions on our wireframes, and constructed our final prototype of our redesign solution.
New User Flow
User Flow of our final prototype
Our prototype aims to make Schlotzsky’s food e-commerce platform more inclusive and accessible.
The updated design features a variation of the imagery and branding of Schlotzsky's to present a more complete picture. Color were chosen based on Schlotzsky's palette as well as based on indication and contrast.
Video of Prototype
To evaluate our design, we decided to conduct two different tests: A/B user testing, to ensure that we were adequately addressing our users’ needs, and a heuristic evaluation, to ensure that we were addressing their needs well.
A/B User Testing
5 Participants (1 fully-blinded and 4 fully-sighted)
We conducted A/B usability testing sessions so that we could compare our design to the current Schlotzsky’s website and accurately state how much impact our design will cause if implemented. We asked the participants to complete three tasks with both Schlotzsky's website and our own prototype: customize a sandwich, create a favorite sandwich, and complete the order.
We conducted a Heuristic Analysis on our prototype in order to get expert critiquing on each detail of our redesign. We wanted to analyze every detail and every interaction that a user would come across, understand what other users may focus on per each screen, and create target goals for improvement for our design based on what users expect.
We asked each participant to observe each screen of the prototype and compare our design to 14 predefined guidelines, taken from various templates from several research-oriented universities: Consistency, Visibility, Match, Minimalist, Memory, Feedback, Flexibility, Error, Undo, Language, Control, and Document.
After we analyzed our results from both sessions, we were able to distill our findings to several insights. Below are some issues that we found and the design recommendations to address these issues:
Color Scheme is Inconsistent
Recommendation: Make sure that there is a consistent color-scheme for text, action items, and other types of content on each screen
Layout of Cart details is too cluttered
Recommendation: Increase spacing between item description and customized options, bold and make the font size larger for the item description
Checkout process is cluttered on one screen
Recommendation: Provide information for each part of the checkout process in chunks/sections that users tab through as they complete the checkout process
Can I select only one or more options?
Recommendation: Add text that indicates if you can choose one or multiple or add radio button/checkbox icons to each card
Despite these issues, we found that our prototype, when compared to Schlotzsky’s current e-commerce platform:
Thus, we overall found that our solution helped make Schlotzsky’s food ecommerce platform more inclusive and accessible.
This project was a very valuable experience for me, especially since I strongly believe in equality of all levels; I believe that any product should be designed so that everyone can make use of it, no matter their physical, mental, or social limitations. Thus, it was enjoyable to be able to redesign Schlotzsky’s online ordering website so that even those with visual impairments can order food from this restaurant chain. This project also helped me realize the importance of research to back-up design decisions. It’s important to understand your users so that you can design a solution that would improve their experience rather than just guessing their wants and needs. This project allowed me to expose myself to various research methods and understand which methods are useful depending on your research goals.
If I had to do this project all over again, I would:
Try to get more feedback from users with visual impairments as we had limited access to this group of users
Predefine design guidelines so that we would be consistent in color and style for all UI elements for our prototype
Construct a higher-fidelity prototype so that Focus Brands could easily transfer our design ideas if desired and enhance the experience for our participants when conducting usability A/B testing