Focus Brand, Schlotzsky's

DURATION. 

Aug.2018 - Dec.2018 

ROLE.  

user research, prototyping & testing, interaction design

PLATFORM.

website

Design a best in-class ordering platform

Left - Schloyzsky's current website.  Right - Olo online ordering platform.

Research Goal

1. Find the current issues existing in the online ordering process

2. Understand the way users perform the tasks and achieve their intended goals

3. Identify design opportunities and establish design directions

Think-aloud Usability Test

To understand our client’s website and its competitors in a meaningful way, we conducted think-aloud usability tests on the Schlotzsky’s and TacoBell websites. Participants are asked to perform some given tasks and talked about their feelings or thoughts when conducting these tasks. Rather than practice the competitive analysis, we tried to get insights from users directly.

Semi-structured Interviews

Except for first-time users, we also want to know how loyal customers feel about the online ordering experience. So we contacted our industrial shepherd to request interviews with real customers. Unfortunately, only 4 customers confirmed to do a phone interview with us out of 60 people that he reached out. Even worse, only 2 out of 4 picked up the phone at the scheduled time, which only left us two sets of interview data. This limited amount of data was not able to represent all the customers, but it did give us some insights.

       Question samples:

• Describe your takeaway order experience - What do you like most about the olo website and what parts are most difficult/annoying/stressful?
  
• Do you usually check-out as a guest or do you log in? Do you have an account?
• Do you collect and use reward points? What do you feel about the current process?

Heuristic Evaluation

Task Analysis

In order to understand how users performed the tasks and achieved their intended goals, we conducted a task analysis based on the previous observation. We focused on the user flow at this step and attempted to find the errors and redundant tasks during the whole process. 

Persona

The three personas shown below have been generated based on our research with users who fit the descriptions of our target users. Given that we only got access to one participant with visual impariment, so the third persona is somehow based on our interview as well as secondary research.

Journey Map

We drew the journey map to showcase the online ordering experience, which helped us find the opportunities for building a better platform.

Synthesis of findings & Design direction

Another thing we keep in mind — Rewards

Offering a discount or rewards is a good way to attract more clients and build their loyalty. The Schlotzsky’s rewards the customers with special services and attention — notifying them about exclusive offers or giving them a discount. However, if you order food through the website, you need to complete these steps to earn your rewards: 

1. Place your order on the Olo platform;
2. Remember to keep the receipt when picking up your food.
3. Log in to your account on the Schlotzsky’s website;
4. Manually enter the bar code at the bottom of the receipt within 72 hours of your visit.

Given that all of our participants chose to checkout as guest and did not really place their orders, we tested the rewarding system by ourselves. We felt that the current flow is too inefficient to make both sides profitable. But rewards could be processed automatically if ordering food via the mobile application. We believed that the integrated platform could do the same thing. Therefore, we wanted to design a system through which customers are aware of the rewards and motivated to earn them.

Brainstorming

We had a clear goal — to design an integrated ordering platform. So we wrote down the necessary website elements on the sticky notes and came up with a bunch of features that we felt appropriate for building a better ordering experience. Principles for filtering our ideas:

• Keep simple and feasible.
  Compared to the current platform, will it become more complicated if adding the new feature?
  Can this feature reduce users' cognitive load when ordering takeouts?
  Is it simple for users with visual impairment to use?
  

• By using this feature, users are more likely to find the food they like.
  Is it easier for users to find their favorite food?
  Will it prevent users from placing their orders?

Finally, in addition to improvements in the user flow and design details, we added two extra features:

# Pre-quiz

This feature enables users to select the ingredients they want to have first and then get food recommendations based on their selections.

# Chatbot

This feature is based on auditory communication with the user, like a phone order, which is specially designed for people with visual impairments. We simulated this also by preparing a script and reading it out while users are interacting with the chatbot.

Paper mockups

We asked four people to perform the tasks, mentioned below, on the paper mockups. One digital accessibility specialist, two Ph.D. students that fit the "fast track couple” persona and one faculty member who fits the “silver sophisticates” persona. They were requested to think aloud while they went through the ordering process. The observations from this were noted down and summarized.

The feedback for chatbot was not as good as we anticipated. People without visual impairments did not like the idea and wouldn’t use it when ordering food. However, the accessibility expert felt that it would be really useful if done right. While it may not be a welcome idea to order food through voice interaction, I believe the chatbot could be a good assistant when people have trouble with the platform or their orders. Due to the time limit for this project, we decided to put more emphasis on the improvement in the overall ordering experience and look for opportunities to further test the chatbot in the future.

Low-fidelity Prototype

Based on these insights, we combined the best features from all these concepts into a single wireframe design. Since each of our initial concepts addressed a different set of accessibility requirements, we found that combining these features would lead to a more holistic website design for Schlotzsky’s.

Feedback

We invited three ordinary users to conduct a cognitive walkthrough. They were required to add the BBQ Chicken Sandwich to the cart and try the pre-quiz. Next, the three users self-reported their feedback on the System Usability Scale (SUS) test. The following are the summary of findings:

From the SUS post-session evaluation, our wireframe received the scores of 75, 85, and 87.5 respectively, from User 1, User 2, and User 3. The average SUS score from the tests is 82.5, which would be an ‘A’. Overall, the wireframe was very well received. Most of the feedback for changes revolved around specific details of the UI, but not the solution concept.

A more flexible architecture

Since the Schlotzsky’s provides different menus and prices in different locations, we wanted to make sure that users are presented with menu items and prices available in that area. Therefore, in the low-fidelity prototypes, users are required to select the pickup restaurants before implementing other steps. However, this design also has some obvious disadvantages.

1. Not friendly to users who just want to browse the website
2. Registered users with order histories can save this step
3. Not conducive to the overall impression of the website

Therefore, we tried to build a more flexible architecture for all kinds of users. By applying the new flow, users are able to view the full menu when they enter the website. They can select the restaurants at any time just before customizing their food if not logged in.

High-fidelity prototype

We improved the prototypes in these aspects.

# Brand identity

Branding is important. To be consistent with the current website style, I followed the design guideline provided by Focus Brand to make high-fidelity prototypes. Since fonts, colors and button styles have already been decided, my design focus shifted to the features and the layout of elements. I made changes based on actual needs.

# Avoid mistakes

The platform reminds users of the unavailable items in the selected restaurant. They are required to double-check their location and service choices before checking out. And the order cannot be placed until they complete all the necessary information.

# Design for accessibility

We reorganized all the suggestions regarding the accessibility of our wireframe from the previous feedback stage and improved our design based on that.

# Highlight the rewards

Technically we would like the rewards can be automatically credited to the registered users' accounts. We encourage but don't oblige users to log in when ordering takeouts. By emphasizing the rewards, we want users can get what they deserve.

We conducted another round of evaluation with 5 participants on the interactive prototypes and received a mean score of 83 in the post-session ranking on SUS scale. We also presented our work in front of the industry shepherd. It is so glad that we can bring contribution to the Schlotzsky’s and received a fairly high evaluation from the folks from Focus Brands and faculty.

Lessons I learned from this project

# Accessibility takes priority.

When I tested the website with screen readers, I finally knew how difficult it is for people with visual impairments to order takeouts online. Even a small detail like placeholder text can cause obstacles to these kinds of users. It is no wrong we want to delete unnecessary elements. Although we ordinary users may feel some styles or colors are more attractive, we need to check their accessibility before applying them.

# The selection of test participants should be careful. 

We will try to avoid having one person evaluate the same project twice. For this project, we asked the expert from AMAC to evaluate both low-fi and high-fi prototypes. She knew quite a lot about our design and even the improvements, so she gave us a fairly high score in the usability test. However, it is hard for us to get more useful suggestions from the second evaluation, and the effectiveness of the test has also declined.

# Check your design in actual size.

For convenience, I often zoom out the canvas in order to view the entire artboard during the design session. I thought the page looked balanced and nice in the prototyping software, but actually the font size was too large and the layout was somehow unreasonable in actual size. I had to modify and reorganize these elements again to make them look comfortable in the browser. This gave me a lesson that design work should be viewed constantly in its actual size before release.

Thanks for reading!