Email: khirani6@gatech.edu

Linkedin: in/khirani6

Created with ♥ by Komal Hirani

 

© 2019

Overview .

 

Project Description

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 ecommerce platform to be more accessible and meet the WCAG AA accessibility standards.

My Contributions

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, designed graphical elements for implications, personas, and journey maps, and sketched medium-fidelity ideas for our prototype.

Timeline

Aug 2018 - Dec 2018 (4 months)

Team Members

Courtney Allen

Rex McKay

Alana Pendleton

Tools Used

Pen + Paper, Sketch, Adobe XD

Solution Overview

Our solution is a re-design of Schlotzsky's food e-commerce platform that aims to be more inclusive and accessible.

Landing Page

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

1

Concise Menu with Card Layout

Decreases amount of tabbing

2

Synthesized Customization

Some food options allow users to select more than one option

3

Checkout

Offers a more clean experience and more payment options

4

The Process

1

Research

Tab Through Mapping

Interviews

Surveys

Personas

Journey Mapping

2

Ideation

Design Implications

Design Goals

Informed Brainstorming

Design Directions

3

Design

Wireframes

Feedback Sessions

Hi-fidelity Prototype

4

Evaluation

A/B Testing

Heuristic Evaluation

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

We also used tab through mapping to understand how long it takes for each user group to complete the process of ordering a sandwich. Here are the results that we found when tabbing through the website and mobile app when trying to order a sandwich:

Semi-Structured Interviews

2 Participants (1 fully-blinded user and 1 color-blinded user)

GoalTo gain rich insights on visually impaired users experiences with the current online food ordering system. 

 

Outcome: 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.

Analysis and Findings: Affinity Map

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:

Affinity Mapping Process

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 like to use technologies like Apple Pay to automatically fill in their information each time they order food

Survey

Goal: To better understand the current allowance and limitations that online platforms provide when fully-sighted users are trying to order food.

Analysis and Findings

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.

Personas and Journey Mapping

We then compiled our findings from our research into user personas and journey maps:

User Personas

We combined information obtained from Focus Brands and from our user interviews to create 4 different user personas:

User Personas

Journey Maps

Based on the information from our tab-through mapping and interviews, we then generated journey maps for each primary user group as they navigate the current website and order a sandwich online. Since two of our personas would have the same experience while using the system, we decided to combine our personas and target three main user groups: fully-sighted, fully-blind, and those with other visual impairments:

Journey Maps

 

Ideation .

Implications and Goals

From our affinity map session, we identified pain points and areas of opportunity for improvement. From these, we defined our implications that would guide us towards designing our final solution: 

Design Implications

We then distilled our implications and decided on 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

Ideation Session

With our design goals and implications in mind, we went home to individually ideate and sketch out screens that would improve the current e-commerce platform. We then came back together to share our concepts:

Sharing our individual concepts during the ideation session

After sharing our concepts, we began to mix and match each screen and combined our sketches into three different design directions: Accessibility, Customizability, and Consistency:

1

Accessibility Direction

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

2

Customizability Direction

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

3

Consistency Direction

This direction focuses on creating a cohesive experience between the Olo platform and the Schlotzksy’s Marketing site.

Feedback on Design Directions

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”

 

Design .

Wireframe

Once we gathered feedback on our sketches, we began to distill our key findings and create a set of wireframes that 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

Wireframe of our solution

Feedback Session on Wireframe

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

Final Prototype

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

New User Flow

User Flow of our final prototype

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

The updated design features a variation of the imagery and branding of Schlotzsky's to present a more complete picture. Color were chosen based on Schlotzsky's palette as well as based on indication and contrast.

Video of 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

5 Participants (1 fully-blinded and 4 fully-sighted)

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. We asked the participants to complete three tasks with both Schlotzsky's website and our own prototype: customize a sandwich, create a favorite sandwich, and complete the order.

Heuristic Evaluation

3 Participants

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. 

 

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, and 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:

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

1

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

2

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

3

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

4

Despite these issues, we found that our prototype, when compared to Schlotzsky’s current e-commerce platform:

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!