Focus Brands | E-Commerce Redesign for Accessibility

Objective

Over one semester: To improve and redesign Focus Brands’ e-commerce experience to be more accessible for a wider range of audience, and to create a more pleasant and efficient experience

Our Given Problem

Target Audience

Having known that we were redesigning a site to more accessible, we generated target audience personas to begin the project. The information was gathered from Schlotzsky’s persona information and paired with the Web Content Accessibility Guidelines (WCAG). We walked through each persona with a value proposition template to best understand what each person would prioritize in their online ordering experience. This start also helped to recruit for our interviews.

Additionally, Rex and I went in-store to evaluate the branding of Schlotszky’s and how they were treating their customers, and discovered their food was also tasty in the process.

Interviews & Affinity Mapping

Since we had background information on sighted users from Focus Brands, the team focused on visually-impaired users. We interviewed two individuals in-depth about their online ordering experiences and gathered the information in the form of affinity mapping. One individual has color-blind vision, specifically red-green impairments; the other individual has no sighted vision at all. From the affinity mapping, we determined the main processes about which visually impaired users use to order food online, what technology is involved in that process, and also the struggles they endure throughout the process.

While we did keep in mind every implication we found, we prioritized 3 implications in particular because of the emphasis and frequency at which they were founded:

Rigorous Research Analysis

At this point, we wanted to breakdown the current experience for all users. We utilized 4 different methods to best analyze this: Tab-Through Analysis, Accessibility Filtering, Journey Maps, and Implications.

TAB-THROUGH ANALYSIS

My team and I actually generated this method ourselves. We wanted to know exactly how many “actions,” meaning number of tabs, steps, taps, etc., it would require to complete the online ordering process on Schlotzsky’s website and mobile application for sighted and visually-impaired users. In order to do tab-through for the visually-impaired users, the team enabled built-in accessibility features on our personal laptops and phones; we did this because our interviewed users utilize built-in settings currently. We then counted the number of inputs used during the ordering process. To say we were overwhelmed is an understatement. Here are our results:

ACCESSIBILITY FILTERING

What better way to understand how a person who is color blind or has contrast issues than to adjust your own screen to reflect that? The team was able to get a taste of another person’s life through a Chrome plug-in, Funkify. With it, we were able to understand the online ordering process, and generally the online experience through different impairments.

JOURNEY MAPS

At this point, we understood our audience better than ever: we had interview data, Focus Brands data, tabbing data, and visually impaired simulation data. Now we moved through their individual journeys, marking areas of opportunity. To start we generated the user flow. This would keep the journeys as consistent as possible, though we discovered some unique differences between sighted and especially fully blind journeys. Such one was how the fully blind were likely to restart their journey if they were to activate the deceiving “View Menu” option on the e-commerce site; this would actually resend them through the location-finding process, which they would have already completed at this point.

Opportunities were determined as periods of prolonged plateaus (positive or negative) and extreme dips into the negative.

IMPLICATIONS & GOALS

Here we summarized our design implications and defined what our goals would be during the redesign. These are not only for visually impaired users, but for all users to enjoy.

IMPLICATIONS

1. Cluttered Navigation Bar

   • Causes High Number of Tabbing

2. Overwhelming Customization Process

   • Induces Excessively High Amount of Tabbing

3. Inconsistent Between Marketing and E-commerce Site

   • Users are Confused and Untrusting

4. Lack of Payment Options During Checkout Process

   1. Requires More Text Input

INITIAL DIRECTIONS

Each teammate went home and drew up different concepts, sections of the experience for the most part. Then we brought all of the sketches together, stitching them into 3 different, distinct directions: accessibility, consistency, customizability.

After generating these different, we quickly launched testing studies. Participants were to perform three tasks while thinking aloud: start an order, create one custom sandwich, and checkout. Our evaluation was based the notes written during the cognitive walkthrough and also virtually through Optimal Workshop’s chalk mark test. The key findings we found were insightful per each design:

Accessibility

• Checkboxes on Customization flow were clear

• Layout of Confirming order was lacking some clarity

• Determined to be compatible for mobile devices

Consistency

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

Customization

• Favoriting was a popular and expected feature

• Wanted order information present at all times

• Confused on editing items within Customization flow

FINAL DESIGN

Taking the best and leaving the worst, we combined all through design routes into a final design. We changed the user flow and made sure to carry out our key features.

Testing RESULTS

For more in-depth testing of our final design, we preformed A/B testing with the current design versus ours and we also performed heuristic analyses.

HEURISITIC ANALYSIS

We asked several people to go through an adapted heuristic analysis. In order to streamline the analysis, we added guidelines and cutdown on the categories. As a team, we also scoured the design with a very, very in-depth analysis. Definitely learned that while it is fantastic to rate every feature, every design choice made, it quickly becomes exhausting. Next time, I would break this down into smaller sections to be more digestible. Here’s a few distinguishing notes from the analysis results:

A/B TESTING

For the A/B testing, 4 participants (1 who was fully blind) were asked to perform 3 tasks: customize a sandwich, create a favorite sandwich, and complete order. We tracked their time, number of input actions required, success rate, and asked a post reflection survey based on the NASA TLX to gauge their experience. We also recorded any comments they made during the process. These results exemplified the improvements the team made to the current design. Here are the results per each task:

Task 1: Customize a Sandwich

For sighted users:

• Reduced time taken by 81%

• Reduced number of tabs needed by 6%

For all users:

• Satisfaction increased by 19%

Task 2: Create a Favorite Sandwich

For sighted users:

• Reduced number of errors made to 0

For all users:

• 100% of users able to complete task

Task 3: Complete Order

For sighted users:

• Reduced time taken by 38%

• Reduced number of tabs by at least 11%

NEXT STEPS

Of course no design ever really is finished, so if this project were to continue, this list would be priority:

• Screen Reader Pathing needs to be thought out and mapped out more

• Headers’ colors need to be consistent

• Add back arrows so the user is able to undo actions at every step

• Checkout payment options should be finalized (instead of showing “Other”) and can include options like PayPal and
  “Pay At Counter”

• Change description and action layout of menu items to reduce clutter and to better accommodate screen readers

• Actions and Text layout for each order item in Cart should be grouped and spaced so most important information is clear to user