Tropical Smoothie Cafe Mobile App Redesign

Unsolicited redesign improving the UX experience of using curbside pickup

Tropical Smoothie Cafe (TSC) is a restaurant franchise in the US with over 800 locations nationwide. Most recently, the brand implemented hyper-local marketing initiatives and enhanced their order modes to include curbside pickup and delivery options. Backed by detailed research, this a concept redesign of the TSC mobile application of the curbside pickup mode. This project spotlights various UX processes including evaluation, user testing, card sorting, and usability testing to improve the checkout flow, design, and usability issues.

Like so many other companies adjusting to the socially distancing measures in response to COVID-19, Tropical Smoothie introduced a curbside pickup option to consumers in the mobile app. While many users are pleased to see the pickup option available, they struggled with the flow. Being a regular user and supporter of the brand, I felt there were several ways that the app could be improved to make the experience of using the service even better.

Instead of focusing on what I thought could be improved, I found it crucial to include actual users into the process to hear about their experiences while interacting with the app. I used research as the starting point for this project and those findings to either validate or invalidate my assumptions which informed the design changes that were made.

The high level goals were to:

1. Address the usability issues on current app and make necessary improvements
2. Facilitate a better user experience for Tropical Smoothie by improving its UI and design a hi-fidelity prototype
3. Test the prototype with real users, reiterate on the prototype from user feedback

Roles and Timeline:

• Lead UX Researcher & Designer
• April — June 2020

Analyzing the current app

To help guide my research, I conducted an app audit where I interviewed a diverse network of family and friends. The users I spoke with had all used the service at least once and expressed their experience while using the mobile app. The questions were centered on having the users expand on their experience while also uncovering their motivations for using the service, as well as providing them with a task to complete: placing a curbside pickup order for a smoothie. Over the course of two weeks, I conducted usability testing on 6 participants and documented interactions with the app.

Motivations:

• 5/6 users said they like to eat healthy and have something on the go and felt this was a healthier option compared to other fast food joints.

App features & usage:

• Individuals preferred the option to check out as a guest (especially if they are in a hurry or do not want to create an account)
• Users struggled to successfully locate the menu items as the current app presented 15 menu categories for them to select from
• Individuals felt overwhelmed by item customization screen and shared confusion when focusing on necessary steps to complete their order

Understanding how users group items

On the current app, the mobile menu offers and overwhelming amount of selections that includes 15 menu items to select from. I was really interested to see how users grouped items in the menu so we conducted open and closed card sorting where we either provided them with the current menu categories or allowed them to group the items how they wished and create their own categories.

The results from both card exercises revealed uncertainty as there were too many categories in the menu to choose from. In findings from the closed card sorting, many users placed the subcategories into six main categories. This action suggested that many of the current menu categories were unnecessary. From the open card sorting, users deemed several categories as outliers and from the options, created an average of six categories (smoothies, sandwiches, flatbreads, bowls, kids menu, sides & cookies).

Visualizing the Journey

We decided to draft up the user flow to visualize the path of the user completing the task of creating an account / logging in, placing an order utilizing the curbside pickup option. By sketching this out, we were able to visualize the pain points users experienced with the complex process of carrying out a curbside pickup up order. This mapping strategy allowed me to accurately discover and define individual desires and expectations of the customer journey.

Bringing things to mid-fidelity

With a solid understanding of our research insights and pain points our users were experiencing, it was time to translate our insights into design features for improvement on the app for each of the screens.

Adding visual aesthetics to the redesign

To keep in line with the core Tropical Smoothie brand identity, I drafted a mood-board that was representative of the brand’s current colors. Taking inspiration from those elements, I kept with a similar theme and selected fresher colors for the redesign.

The Redesign

Experience #1: Home Page

Currently, the app offers users the options to select “Get Started” or “Browse Locations” on the homepage. After performing usability testing, I discovered that users had to either have an account or create one in order to place an order which proved to be a frustration point for some users. Additionally, by selecting “Browse Locations,” users were lead to a dead end. In the redesign, I updated the copy to be more clear with options to ‘Sign In,” “Create Account,” with an additional option to continue as a guest (which many users expressed interest in having). Additionally, I did a brand refresh with a new, updated logo and consistent colors throughout the experience.

Experience #2: Menu Page

Finding the menu categories was a major pain point for users during the usability testing. Many expressed that they want a simple menu and felt that the orange with white text menu was nearly impossible to read and navigate. After performing open and closed card sorting, we discovered that users placed a majority of the menu items under six main menu categories versus the 15 that are currently on the mobile app. To increase the menu’s discoverability, I changed the design to an expanded menu that listed all categories at a glance which meets best practices for accessibility.

Experience #3: Locations Page

In usability testing, I discovered that many users were frustrated on how to navigate back to the previous screen if they needed to change the location. In the redesign, I updated the screen to include a location text box where users could enter their city, state, zip to find the nearest location and then select whether they would like to place a Curbside or Pickup order.

Experience #4: Curbside Pickup

Many users were confused about the flow of the curbside pickup option. In the current mobile app, after selecting the “Curbside Pickup” option, users were prompted to enter the vehicle details and were uncertain on what to do next to continue, “ Do I add my vehicle to the order?” In the revised design, I took this feedback into consideration by moving the vehicle details to the review order section after they entered their order which I felt was a more natural flow to the ordering process. Additionally, I changed the CTA from “Add to Order” to “Checkout” so that it is more clear and straightforward to the user.

Hi-Fidelity Usability Findings

Through user research, I was able to gain insight into the goals of food mobile app users. To validate the changes I made, I tested the redesign with surveyed users with my prototype. I asked the same questions from my initial interviews and recorded behaviors and insights.

• 3/3 participants used the “checkout as a guest” option
• 2/3 users were able to successfully locate menu item under correct category
• 3/3 participants found the curbside pickup option to be “relatively straightforward.”

Next Steps

• Develop menus, lists, past orders
• Stylize location pins to distinguish categories
• Add social media login options

Key Takeaways

In talking to some of Tropical Smoothie’s users, I gleaned actionable insight into how, why, when they use the app. This knowledge is a good starting point for improving different parts of the app to better help users achieve their goals. To that point, a product is never quite finished and continuous iterations are always necessary.

Hope you enjoyed the read! If you want to talk UX or say just say hello, catch me on LinkedIn or my Website.