Accessible Online
Ordering 🥪
The Schlotzsky's online ordering system is confusing and inflexible. How do we redesign it for accessibility and efficiency?
The Ask
My team and I received the prompt-- creating an accessible online ordering system-- from Focus Brands, the owners of Schlotzsky's, a regional sandwich chain, in late August.
Although Schlotzsky's main website meets WCAG AA accessibility standards, their online orders were placed on an inaccessible 3rd party website.
Our task was to design not only an accessible online ordering experience up to WCAG AA standards, but to think outside the box to create novel online ordering solutions.
Methods
Task analysis
Wireframing
Usability testing
Context
Schlotzky's is a sandwich franchise based in the US south. This project took 4 months.
My role
UX design
UX research
Collaborators
UX/UI designers
UX researchers
Developer
Understanding the system
Our first step was evaluating the existing online ordering flow to understand where usability and accessibility problems lay.
We used a mix of designer-led and user-led evaluation techniques to gain a holistic understanding of the problems with the existing website.
To assess the accessibility of Schlotzsky's online ordering system, we conducted a competitive analysis with five competing restaurants.
Designer-led methods
Task analysis
Cognitive walkthroughs
Competitive analysis
User-led methods
Think-aloud interviews
Tree-testing
Framing the problem
By synthesizing our results from the methods discussed above, we came to four broad conclusions and a user journey map that would serve as a jumping off point for our design alternatives.
1 . Context switches are disorienting.
In the original flow, users began the flow on the Schlotzsky's website but were pushed to the third-party site halfway through the ordering process. Because of inconsistent visual design and language, the platform switch was confusing and disorienting.
2. The information architecture is unintuitive.
On both the main website and the third-party ordering platform, navigation was unintuitive and sometimes led to infinite loops which violates the inclusive design principle of predictability.
3. There is a lack of alternative, system-supported means of input.
The existing interface was web-based and relied on traditional means of input (mouse and keyboard) unless a user chose to use their own alternative input methods.
Exploring alternatives
The team brainstormed around the four research insights and came up with three diverse, medium-fidelity design approaches to test with users with and without visual impairments.
Approach #1 – Refined website
I collaborated with a team member to create an updated website with restructured information architecture and guided order customization process.
The website was built out in medium fidelity in HTML5/CSS so that users could test with their screen readers.
Approach #2 – Chatbot (mobile and web)
I mocked up a chatbot that guides users through the ordering flow. Easily accessed from the Schlotzsky's website or through their Facebook page on Messenger.
Tested using wizard-of-oz methods on Facebook Messenger.
The nearest Schlotzsky's to you is 0.4 miles away at 455 Peach Ave.
Would you like to pick up your order at this location?
Approach #3 – Voice interface (Google Home, Alexa)
Similar to the chatbot, the voice interface is a heavily guided online ordering flow. Interaction does not require the traditional keyboard or mouse.
Tested using spoken wizard-of-oz methods.
After our initial round of concept validation, users undoubtedly preferred the website and chatbot. For a second round of validation, we tested a hybrid website-chatbot solution.
Users felt that the website and chatbot should be separate platforms, and so, taking stakeholder requirements into account, we proceeded with the website approach.
Refinement and testing
We implemented a number of changes based on the first two rounds of feedback, including making promos and add-on prices more visible, creating a favorites section for returning customers, and making language clearer.
With our updated design in hand, we conducted cognitive walkthroughs with three accessibility experts and six think-aloud interviews with participants. Participant interviews also included benchmark tests with competitor websites and a SUS survey.
We received overwhelmingly positive feedback from users and experts about screenreader flow and compatibility, both of which validated our efforts to improve the information architecture of the flow.
An accessibility expert evaluating our prototype
The final product
After implementing the changes from our final round of user and expert, we presented our final design to the Schlotzsky's team, including a suggestion and script for the chatbot.
We were able to improve the information architecture of the ordering flow, thereby increasing usability for screenreader users and improving the overall predictability and usability of the ordering process.
By starting the design process through the lens accessibility, the team was able to make design and code choices that allowed for maximum ease of use using accessible technologies like screenreaders and braille pads. By refining the ordering flow and using clear language, we were able to achieve cognitive accessibility as well.
The final prototype, coded in HTML5/CSS, presented to the Schlotzsky's team can be found here: https://order-accessible.netlify.com/#/
World IA Day 2019
I had the opportunity to present on this project and the impact of web accessibility at World Information Architecture Day 2019 in Atlanta, GA, with my team member James McDowell. By sharing our experiences, we hope to inspire others to incorporate accessibility into their design process.
A list of resources for web accessibility can be found on the following page: http://bit.ly/WIADaccess
Email me: rimendhekar@gmail.com
© 2022 by Rishma Mendhekar