Schlotzsky's Web Accessibility

Evaluating and proposing methods to meet WCAG 2.0 AA Accessibility for more user

 

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.

 

Our team of four interdisciplinary researchers conducted evaluations of the current platform and proposed opportunities to the Focus Brands team.

In this five-month project, I served as a UI/UX designer and User Researcher.

 

Research

WCAG Compliance

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 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, we 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.

Mobile and Web Review

After familiarizing ourselves with the product, we 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.

What it Offers

Competitive Analysis

To understand the business environment, 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.

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

Being composed of members with typical vision, 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 also experiences total vision loss. We conducted a remote, semi-structured interview with her, casting a wide net in questioning to lure out information we did not know to ask about. 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. Another aspect is understanding different assistive tools and settings that enable visually impaired users to operate technology. 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.

Although the primary goal of this project was to create a better experience for visually impaired users, we acknowledged all users would be affected. A solution that only focused on screen reader optimization could adversely affect the primary users. Based on data Focus Brands shared with us, it was apparent that the largest consumer base lied in older audiences. However, these consumers were much more likely to go in-store rather than use a digital platform. Therefore, we angled our focus towards Shlotzsky's younger demographic as the early adopters of our new design.

Tab Through Analysis

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.

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.

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.

These analyses were 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, while these tests measure the 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. Sighted users can simply scroll past this content, but the tabbing navigation selects each individual items multiple times, concatenating stress and risking abandonment.

User Journey

We created a series of journey maps tracking the steps a sighted and a visually impaired user takes to order a meal on both the website and mobile app. Along each step, we noted the expected pain points and satisfaction levels of the users.

Data Synthesis

More familiar with 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 Session

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.