Schlotz.png

Accessible Food Online Ordering

Accessible Food Online Ordering

 
 

Schlotzsky's Online Ordering Redesign

Redesigning Schlotzsky’s online ordering system for accessibility and inclusivity

 
 

Timeline:

Aug 2018 - Dec 2018 (4 months)

Industry Partner:

Focus Brands

Team Paw-esome Members:

Courtney Allen

Rex McKay

Alana Pendleton

Project Overview:

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.

My Roles:

  • 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, and sketched low-fidelity ideas for our prototype.

Target 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.


Process

Process_Schlotz.png

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:

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:

Schlotzsky’s ecommerce platform’s current user flow

Schlotzsky’s ecommerce platform’s current user flow

Semi-structured Interviews

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.

Method Details:

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

Affinity Mapping Process

Affinity Mapping Process

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

Tab-through Mapping

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.

Method Details:

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

Tab-through Results.png

Survey

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.

Method Details:

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

I would make the whole process somewhat more cohesive.

Think Aloud

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.

Method Details:

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


Ideation

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:

Personas:

User Personas

User Personas

Journey Maps:

Design Implications:

Design Implications

Design Implications


Design

From our research, we distilled our findings down to 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

Iteration 1

In order to accomplish these design goals, we came up with 3 design directions for our redesign for Schlotzsky’s food ecommerce platform:

Accessibility Sketches.png

1) Accessibility Direction

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

Customizability Sketches.png

2) Customizability Direction

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

Consistency Sketches.png

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

Feedback Session

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”

Iteration 2

wireframe_fb_1.png

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


Prototype

We distilled our findings from our feedback sessions on our wireframes, and constructed our final prototype of our redesign solution.

New User Flow

Prototype’s New User Flow

Prototype’s New User Flow

Our prototype aims to make Schlotzsky’s food e-commerce platform more inclusive and accessible.

Key Features

SPLASH.png

Landing Page

Limited Navigation Options to decrease amount of tabbing and consistent with the Marketing Site

Artboard – 2.png

Concise Menu with Card Layout

Decreases amount of tabbing

Artboard – 7.png

Synthesized Customization Process

Some food options allow users to select more than one option

Artboard – 13.png

Checkout Process

Offers a more clean experience and more payment options

Here is a video of a run-through of our 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

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.

Method Details:

  • 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

Heuristic Evaluation

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.

Method Details:

  • 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

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:

image2.png

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

image1.png

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

image3.png

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

image4.png

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:

eval_results_fb.png

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!