Icons-04.png
Icons-03.png
Icons-02.png

© 2019 by Rex McKay

FLoofy

BACKGROUND

Accessible Redesign

Evaluating and addressing AA WCAG standards

OVERVIEW

Our team at Georgia Tech evaluated the Schlotzsky's Austin Eatery online ordering platform for accessibility and spoke with visually impaired users to propose a new visual and navigation experience.

INDUSTRY

Food Service

AUDIENCE

Visually Impaired Adults

BACKGROUND

 

With an ongoing concern regarding accessibility and a universal experience for their customers, Focus Brands came to Georgia Tech to evaluate the Schlotzsky's Austin Eatery online ordering platform and propose a new accessible experience. The primary objectives requested of us was to meet Web Content Accessibility Guidelines (WCAG) AA standards as well as refresh the experience for ocular-typical customers.

 

RESEARCH

WCAG AA COMPLIANCE

Before we could advise Focus Brands on improvements for better accessibility, we had to understand the benchmarks expected. WCAG are the guidelines as set for by the World Wide Web Consortium (W3C) to ensure that online users with visual impairments are able to efficiently and successfully navigate the web. This compliance takes into special consideration navigation by means of screen readers as well as visual contrast values. AA level compliance is the recommended conformance for most sites as it balances the needs of impaired users while also maintaining the majority of content for ocular-typical users. Sites rated lower than AA compliance are vulnerable to legal action should their navigation be too cumbersome for impaired users to reasonably use, effectively ostracizing a population.

ONSITE OBSERVATION

Next, we needed to familiarize ourself with the brand with which we would be partnering. To achieve this, another research member and myself went to a local Schlotzsky's franchise to observe the environment, employees, and customers that may be expected. Each observer took note of the layout of the branding and layout of the franchise and well as try to understand the personality being presented. We then posed as naive customers and pressed the employee at the register for assistance and information.

MOBILE AND WEB REVIEW

After familiarizing ourselves with the product, each of our four members dove into the branding, pages, and layout of the Schlotzsky's mobile app and website. As Focus Brands owns multiple franchises including Cinnabon, Auntie Anne's, McAlister's, its sites follow a matching template. Focus Brands also utilizes Olo, a third-party vendor, to host and process its online ordering requests. When the vendor's content is accessed, the user's experience changes to one based on Olo's template and capabilities rather than Focus Brands' home experience. This jump may disorient users as well as provide some design customization limitations. The Schlotzsky's mobile app follows the Olo layout as well.

COMPETITIVE ANALYSIS

For understanding the environment under which Schlotzsky's operates, we turned to competitors' ordering platforms as well as other Olo clients. This helped us understand the capabilities of Olo as well as prevent us from reinventing features that other companies have successfully implemented.

Which Wich?

Olo-based

Newk's Eatery

Olo-based

Chipotle

Olo-based

Taco Bell

Self-managed

SOCIAL LISTENING

Next, I leveraged existing resources to analyze reviews of Schlotzsky's stores, iOS app, and Android app and coded similar themes into word clouds to identify the biggest successes and pain points current customers experience. These reviews were gleaned from Google, Googly Play, the App Store. Overall, roughly 300 reviews from the previous 365 days were observed and coded into the data set.

USER DISCOVERY

Visually Impaired Users

Being composed of all members with vision within ocular-typical bounds, we were unfamiliar with the experience of a visually impaired user. To assist us, we reached out to Ricki Enger, a technology usability specialist who experiences total vision loss as well. We conducted a remote semi-structured interview her and cast a wide net to gather as much information as possible. This process is critical as we cannot know what we do not know. As we interviewed Enger, we had one researcher acting as interviewer and two others as scribes to collect notes for synthesizing later. From our discussion, Enger enlightened us to the wide range that exists in visual impairments and their causes. Although we often think of vision loss as being 100% blind one's entire life, that is actually a rather unique scenario. Many users still retain some form of vision and have had a span in their life when they had no impairment at all. Therefore, they have some familiarity with what things may look like or how they should be conducted. Another aspect is understanding different assistive tools and settings that enable visually impaired users to still operate technology effectively. This would lead us to discover the importance of screen readers and the tab through process when designing an accessible digital product.

To round out our questioning, we also conducted an interview of a user living with colorblindness. This clued us in into spectrum as well as help us prioritize accessible features for the greatest impact.

Sighted Users

Although the primary goal of this project was to create a better experience for visually impaired users, we must acknowledge that all users would be affected by a redesign. With that consideration, we needed to understand who Schlotzsky's main consumer base was. The visual disconnect between the primary and ordering experiences would still disorient most users, and a solution that only focused on screen reader optimization could adversely affect primary users. Based on data Focus Brands shared with us, it was apparent that the largest consumer base lies in older audiences. However, these consumers are much more likely to go in-store rather than use a digital platform and are also less inclined to learn a new experience. For these purposes, we angled our focus towards Shlotzsky's younger demographic as the early adopters of our new design.

Tab Through Analysis

Equipped with a better understanding of how visually impaired users interact with digital media. I revisited the Schlotzsky's mobile app and website and conducted an analysis of how many steps it takes a visually impaired user to order a meal in the best-case scenario. The task used was to go from the home page to checking out with one basic sandwich.

Website

Navigating the Schlotzsky's website using only tabbing and entering, it would take a assistive tool user a minimum of 103 actions to place an order. For comparison, a sighted user can complete the same task in a minimum of 20 actions.

Mobile App

Next, I activated the accessibility features installed on an iPhone 6 and used swiping and tapping to navigate. In this assessment, it would take a assistive tool user a minimum of 230 actions to place an order. For comparison, a sighted user can complete the same task in a minimum of 30 actions.

To reiterate, these analyses are not intended to be accurate of a assistive technology user's experience, but more to give us a general idea of where the problems lie. Screen readers are more likely to scan an entire page for context before moving on, these tests just measure the more direct path. Regardless, the stark difference in steps is very apparent and is attributed to the ordering process's navigation through the customization process. Currently, users MUST go through the customization steps and cannot add a default item to the menu. Additionally, every possible customization option is shown unfolded. For sighted users, they can simply scroll past this unnecessary content, but the tabbing navigation selects each individual items multiple times, concatening the stress which can lead to a visually impaired user dropping off from completion.

USER JOURNEY

Based on what we had learned at this point, we created a series of timelines tracking the steps a sighted and a visually impaired user takes to order a meal on both the website and mobile app. Along each steps, we tracked the expected pain points and satisfaction levels of the users.

DATA SYNTHESIS

Equipped with knowledge of both sighted and visually impaired users, Schlotzsky's online consumers, and the current user flow, we began to synthesize our data and build an affinity map detailing pain points and opportunities. This would lead us to define our implications that we would consider in our proposed solution.

 

DESIGN

IDEATION SKETCHES

Armed with these implications, our team separated to ideate screens that would improve the process. Afterwards, we gathered back together to share our concepts. From here, we began to mix and match each screen into three core emphases: Accessibility, Customizability, and Consistency.

WIREFRAMES

Accessibility

This concept focused on making the ordering process as easy as possible for visually impaired users. Because many VI users prefer to leverage features used on a phone, this design was accompanied by mobile concepts as well. The key features in this concept were keeping the number of tabs needed to a minimum and a voice recognition page that allowed VI users to order without the need for navigation.

Customizability

This set emphasized user control and flexibility. Users can skip customization and add items to their cart directly or save previously favorited items for quicker access in the future. This concept also featured an exploratory page that helped users filter for items based on their dietary restrictions and preferences. Features such as these were included as a process that assists visually impaired users while also providing new control for sighted users.