Accessible Online Ordering.

How can we ensure that everyone has the same online food ordering experience?

Overview .

 

Project Description

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.

Timeline

Aug 2018 - Dec 2018 (4 months)

Team Members

Courtney Allen

Rex McKay

Alana Pendleton

My Contributions

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.

Tools Used

Pen + Paper, Sketch, Adobe XD

Solution Overview

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.

Synthesized Customization

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.

The Process

1.

Research

Tab Through Mapping

Interviews

Surveys

Personas

Journey Mapping

2.

Ideation

Design Implications

Design Goals

Informed Brainstorming

Design Directions

3.

Design

Wireframes

Feedback Sessions

Hi-fidelity Prototype

4.

Evaluation

A/B Testing

Heuristic Evaluation

Research.

 

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:

Semi-Structured Interviews

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

Survey

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:

User Personas

We combined information obtained from Focus Brands and from our user interviews to create 4 different user personas:

User Personas

Journey Maps

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:

Journey Maps

 

Ideation .

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: 

Design Implications

We then distilled our implications and decided on 5 primary design goals

1.

Simplify Navigation Bar

2.

Reduce Number of Tabs Used

3.

Simplify Customization Process

4.

Establish Consistency between Marketing and E-Commerce experience

5.

Improve the Checkout process

Ideation Session

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:

1.

Accessibility Direction

This direction focuses on a minimalistic experience by reducing the amount of tabbing, thus making the platform more accessible.

Customizability Direction

This direction focuses on creating the most efficient and optimal experience when customizing menu items.

Consistency Direction

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.

2.

3.

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:

  • ​Accessibility Direction

    • ​Checkboxes on Customization flow were clear

    • Layout of Confirming order was lacking some clarity

    • Determined to be compatible for mobile devices

  • Customizability Direction

    • Favoriting was a popular and expected feature

    • Wanted order information present at all times

    • Confused on editing items within Customization flow

  • Consistency Direction

    • ​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

 

Design .

Wireframe

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

Final Prototype

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

 

Evaluation .

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.

Heuristic Evaluation

3 Participants

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.

Findings

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.

Reflection .

 

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

 

 

 

 

Thank you for reading about my journey with this project!

Email me: komalhirani7@gmail.com

Connect with me on Linkedin

Created with ♥ by Komal Hirani

 

© 2020

Consistency Sketches