Schlotzsky's Online Ordering Redesign
Redesigning Schlotzsky’s online ordering system for accessibility and inclusivity
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 e-commerce platform to be more accessible and meet the WCAG AA accessibility standards.
The Problem Space
For our Research Methods class at Georgia Tech, my team and I were assigned to help Focus Brands redesign Schlotzsky’s food ecommerce platform so that it provides an optimal experience for a wide range of users. Currently, the online ordering experience is divided into a marketing website and an ordering platform that uses the Olo API to fulfill online orders. Users first witness the marketing website and then are redirected to the Olo website in order to make an online order.
The current Schlotzsky’s e-commerce experience has the following three problems that we would like to solve:
Has a disconnected process flow
Is graphically incohesive
Is inaccessible to those who with visual impairments
Thus, we aimed to address the current inaccessible ecommerce experience through a research intensive process that will result in an optimal design for both sighted and visually impaired users.
Our target users are those who currently are wish to order food online through Schlotzsky’s ecommerce platform. These users include both sighted and those with visual impairments.
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:
Current User Flow:
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 of both the marketing site and Olo website when a user tries to order a sandwich:
Purpose: To gain rich insights on visually impaired users’ experiences with the current online food ordering system. They revealed some of the challenges that people with visual impairments face when interacting with websites and mobile applications that are currently inaccessible. These interviews also helped us to better understand how visually impaired individuals use current technologies in order to complete daily tasks and order food online.
2 participants (one fully-blinded user and one color-blinded user)
3 out of 4 team members were present at each interview (I was only present for one interview)
I took detailed, handwritten notes on the interviewee’s responses
Analysis and Findings:
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. 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 have technology and experience preferences
Specifically, they like to use technologies like Apple Pay to automatically fill in their information each time they order food
Purpose: In addition to constructing the information hierarchy of the website and mobile app, we also used tab-through mapping to understand how long it takes for each user group to complete the process of ordering a sandwich.
Some of the data was collected with assistive technology, such as the built in accessibility features on the iPhone and MacBook, while another process took minimal data through literal tab-thrus using the tab key and no additional technology.
The assistive technology process consisted of following the inputs issued by Apple in order to navigate the screens and noting the direction of, order of, and time between the highlighted buttons or areas.
These notations allowed the team to better understand navigational and timing issues that a user with visual impairments might experience.
Analysis and Findings:
Here are the results that we found when tabbing through the website and mobile app when trying to order a sandwich:
Purpose: Since we focused primarily on gaining insights in how visually-impaired users interact with an online food ordering experience and wanting to better provide an inclusive experience, we generated a survey to better understand the current allowance and limitations that online platforms provide when fully-sighted users are trying to order food. Due to time constraints and lack of previous knowledge of this user group, we decided that conducting a simple survey would be best in order to reach a wide audience and collect basic data points on this user group’s perceived wins and losses when using tech platforms to order food.
I created this online survey using Qualtrics
Comprised of forced-choice and open-ended questions about the current technologies that they use to order food, where they usually order food from, their best/worst online food ordering experiences, and their suggestions on improvements to the online food ordering process. Also contained demographic questions and an introduction describing the purpose of this survey
Distributed to the subbreddit r/SampleSize on Reddit since people in this group are willing to fill out a survey as long as it relates to them
Analysis and Findings:
Collected 18 responses from this survey over the span of a week
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:
Purpose: Since we were already conducting a tab-through analysis to establish the current hierarchy, we thought that it would be beneficial to see how users who have experience with ordering food online interacted with Schlotzsky’s current interface. This method allowed us to see in real-time the user’s thought process, the certain steps that they took to order a particular item through Schlotzsky’s their likes, frustrations, and confusions when interacting with this platform.
Due to time and availability constraints, I conducted one in-person usability test
Participant explored the Schlotzsky’s marketing website and online ordering platform using my laptop as they tried to order a sandwich
The participant was asked to use Schlotzsky’s website to order food and was asked to think aloud while she completed the task.
Analysis and Findings:
The participant thought it was pretty simple to order a sandwich through the Olo website
Once she completed the task of ordering a sandwich, she then clicked on the Schlotzsky’s label on the top left of the page, which redirected her to the main webpage of the Olo website instead of the marketing website. Due to the vastly different looks of the marketing and Olo websites, the participant became confused by the layout change and did not know that she had navigated to a different website to order food.
She continued to emphasize the disconnect she felt regarding the fact that Schlotzsky’s has two different websites: one for marketing and one for ordering food.
From the information obtained from this research, we then compiled our findings into personas, journey maps, and design implications. I created the graphics for all three:
From our research, we distilled our findings down to 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
In order to accomplish these design goals, we came up with 3 design directions for our redesign for Schlotzsky’s food ecommerce platform:
1) Accessibility Direction
This direction focuses on a minimalistic experience by reducing the amount of tabbing, thus making the platform more accessible
2) Customizability Direction
This direction focuses on creating the most efficient and optimal experience when customizing menu items.
3) Consistency Direction
This direction focuses on creating a cohesive experience between the Olo platform and the Schlotzksy’s Marketing site
I sketched this particular design idea for our solution
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 wireframes. Essentially, we gathered all of the positive feedback from our sketches focusing on accessibility, consistency and customization. Once that information was gathered we began to translate it into a set of wireframes 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
Feedback Session 2
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. In order to mimic the screen reader’s actions as authentically as possible, I conducted research on how a screen reader reads certain elements on a screen. 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
Our prototype aims to make Schlotzsky’s food e-commerce platform more inclusive and accessible.
Limited Navigation Options to decrease amount of tabbing and consistent with the Marketing Site
Concise Menu with Card Layout
Decreases amount of tabbing
Synthesized Customization Process
Some food options allow users to select more than one option
Offers a more clean experience and more payment options
Here is a video of a run-through of our 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
Purpose: 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.
Conducted A/B testing with 5 participants, 1 fully-blinded and 4 fully-sighted.
Asked them to complete the following sub-tasks while going through both Schlotzsky’s website and our own prototype:
Customize a sandwich
Create a favorite sandwich
Complete the order
Purpose: 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.
3 participants who have expertise with usability guidelines and food online ordering experiences critiqued our prototype.
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, 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, however, we found that our prototype, when compared to Schlotzsky’s current ecommerce 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