ACCESSIBLE ONLINE ORDERING
How can we design an online
ordering system that works for everyone?
Our industry partner's online ordering system is confusing and inflexible. How do we redesign it for accessibility?
of an accessible online
Designed website flow and structure
Authored chatbot script
Conducted interviews, cognitive walkthroughs, heuristic evaluation, and other methods
Task analysis, cognitive walkthroughs, semi-structured interviews, personas, affinity mapping, wireframing,
wizard of oz
August - December 2018
Adobe XD + Illustrator + Photoshop, Sketch, Treejack, VoiceOver
My team and I received the prompt-- creating an accessible online ordering system-- from Schlotzsky's, a Southern sandwich chain, in late August. Although their main website meets WCAG AA accessibility standards, the bulk of the online ordering happens on a 3rd party website. Our industry partner had two main problems with this:
Customers find the 3rd party platform confusing
The 3rd party platform is not accessible and our industry partner does not have access to the code for the platform
That's where we came in: our task was to design not only an integrated, accessible online ordering webpage up to WCAG AA standards, but to think outside the box (or outside the webpage) to create a novel online ordering alternatives.
Evaluating the present
We decided to use a mix of designer-led evaluation techniques— task analysis and cognitive walkthroughs— and user-led evaluation techniques— semi-structured interviews, tree-testing, a think-aloud observations, affinity mapping, empathy maps, and journey maps— to gain a holistic understanding of the problems with the existing website.
Along with usability, we also needed to evaluate the system for accessibility. The team created our own shortlist of WCAG 2.1 guidelines based on W3C's most recent recommendation to familiarize ourselves with the standards we would consider while creating design alternatives. To assess the accessibility of our industry partner's online ordering system, we conducted a competitive analysis with five competing restaurants.
A journey map of the original online ordering flow.
We acknowledge that automated accessibility testing has its flaws and can not replace accessibility testing with a real user— however, due to time constraints and the fact that we would be redesigning the entire system from scratch, the automated testing tools provided an appropriate baseline.
evaluating the present
By synthesizing our results from the methods discussed above, we came to 9 broad conclusions that would serve as a jumping off point for our design alternatives.
The switch to the unbranded 3rd party platform confuses users.
Users are frustrated by the 3rd party platform because they lose their progress without meaning to.
Language used on the main website and 3rd party platform is too jargon-y.
There are too many different options presented which users find difficult to distinguish.
Customization of order items is useful, but is presented in a confusing way.
Users want tailored, concise suggestions at the right moment.
Navigation is tedious and has many redundant steps and loops.
The inability to search or filter items hinders users.
Appropriate feedback for user actions is not provided.