Accessible

Online Ordering

The Schlotzsky's online ordering system is confusing and inflexible.
How do we redesign it for accessibility and efficiency?

MY ROLE

UX designer

UX researcher

DELIVERABLE

High-fidelity prototype
of an accessible online
ordering system

METHODS

Task Analysis

Think-alouds

Wireframing

Usability testing

TIMELINE

August 2018 -

December 2018

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 integrated, accessible online ordering experience up to WCAG AA standards, but to think outside the box (or outside the webpage) to create novel online ordering solutions.

EVALUATING EXISTING SYSTEMS

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 online ordering flow, users began the flow on the Schlotzsky's website. However, they 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; this goes against the inclusive design principle of predictability.

 

3. Users are overloaded with information.

Another accessibility-related pain point: users felt that they were presented with too much information in multiple steps in the ordering flow. Additionally, system suggestions to add more items to their cart seemed forced.

Schlotzsky's Journey Map.png

4. 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.
_new_webpage-04.png

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.
 
Much to our surprise, users felt that the website and chatbot should be separate platforms, and so, taking stakeholder requirements into account, we proceeded with the website approach.
_new_webpage-04.png

REFINING OUR DESIGN

I worked with my teammates to implement a number of changes design 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.

WORLD IA DAY 2019

I had the opportunity to present on this project and the importance 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
James and I presenting at WIAD '19.

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.
With our updated design, we were able to solve the main problems we found on the original website. 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/#/

© 2020 by Rishma Mendhekar