Courtney Storm's Portfolio

Schlotzsky's | E-Commerce Redesign for Accessibility

MY ROLE : UX Researcher & UX Designer

TIMEFRAME: August, 2018 - November, 2018

CLASS: HCI Research Methods, Sponsored by Focus Brands

TEAM STYLE: 4 UX Researchers & UX Designers

TEAMMATES: Komal Hirani, Alana Pendleton, Rex McKay

TOOLS USED: Stakeholder Analysis, Benchmarking, Observational Studies, Interviews, Affinity Mapping, Optimal Workshop, Value Propositions, Persona Generation, Tab Through Analysis, Visual Impairment Simulator, Journey Maps, User Testing, Adobe XD, Heuristic Analysis, Data Analysis, and PowerPoint

BIGGEST TAKEAWAY: Research driven design choices are a must when it comes to 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

 

Customers order online on a multitude of devices. How should Focus Brands design a best in-class ordering platform that can be used by a wide range of customers?

– Focus Brands

 
 

Target Audience

Schlotzsky’s provided the Fast Track Couples & Generational Soup Personas among others. We limited down to these personas as they were the people who were ordering online in addition to going in-store.

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

The team and I working through the affinity mapping.

The team and I working through the 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.

A summary of our findings from the affinity mapping.

A summary of our findings from the affinity mapping.

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:

 
  1. Good filters and/or efficient navigation

  2. “Personalized menu”

  3. Detailed item descriptions

 
 

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

edited.jpg

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

R3_Current-Flow-Chart_v1.png

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.

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

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.

 

New User Flow

KEY FEATURES

  • Consistent with marketing page

    • Limited navigation options

  • Cut down on tabs

    • Concise menu

    • Card layout

  • Synthesized customization process

  • Improved the checkout process

    • Offered more clean experience

    • Offered more payment options

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:

“The header on the home page and the order page change color significantly which makes it almost feel like a different website.”

 
 

“I would like a tracker to show me what’s going on with my order at all times.”

“I would like an apparent ‘back’ arrow to show me I can go back to add another item [when on the checkout page.]”

 
 

“Checkout is better done in bite sized pieces instead of asking for it all on one screen.”

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 non-sighted users:

  • Lowered mental demand by 38%

  • Lowered effort by 43%

  • Increased performance by 43%

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 non-sighted users:

  • Lowered mental demand by 69%

  • Lowered effort by 73%

  • Lowered frustration by 75%

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 non-sighted users:

  • Lowered mental demand by 20%

  • Lowered effort by 14%

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