“pink fruit shake in jar” by Element5 Digital on Unsplash

Visual Design: Why Smoothie King Needs a Queen

Michelle Wasabi
Oct 30, 2018 · 5 min read

A queen meaning another design perspective. Their app design leaves a lot to be desired and having diverse perspectives, proper usability tests, and useful feedback could enhance their product use.

Are there any Smoothie King lovers out there? If you’re a frequent visitor to this fun smoothie chain then you may be familiar with their clunky app. For anyone not familiar Smoothie King is a franchise that makes smoothies, sells healthy snacks, and promotes nutrition by offering vitamin supplements for their products. They utilize bright colors and healthy yet delicious ingredients to attract a wide range of customers. Customers who are like me find themselves at Smoothie King when they need to clear their conscious after a week-long junk food binge.

Project Outline

  • Goals
  • Information gathering
  • Wireframes
  • Screen Mockups + Improvements
  • Conclusion

Goal

My primary goal was to remove barriers for my users. I kept this goal in mind as I made visual design choices.

Curiosity

How can a user walk up to the cashier and quickly access frequently used services such as viewing their purchase points and then scan the barcode to earn more points? Customers want both their smoothie and their freebies!

Information Gathering

I asked some customers and employees (9 people) about their own app use to have a better assessment of how the app is used and their opinions. Here are some words used to describe the app in its current state:

  • Useless
  • Annoying
  • Forgettable

Customers reported they enjoyed the reward’s system and earning discounts on their purchases. The app does not appear to offer more value other than a points and rewards system. All of that could change in the future but in the meantime, I focused on improving features that are most utilized.

Visual Design

Please be mindful these are concept designs. I am not affiliated with Smoothie King unless they hired me in the future *wink wink

Wireframes

digital wireframes(left to right): Main Screen, Points Screen, and User Account

Screen Mockups

Below I’ll review each screen and feature that I focused on for this project and highlight the changes.

Home

the app’s home screen

Summary: the current screen to the left feels less like an app and more like mobile responsive. Once a user chooses to click on an app they know exactly where they are and do not need to be reminded that this is a “SMOOTHIE KING” product. Instead, they can use their screen real estate to give users useful information. See the list below.

  • Delightful daily greetings that change each day of the week
  • Subtle call to action “see promos” that is unobtrusive but suggestive
  • Large image slider for quick visual reference to real products
  • Colorful progress bar under images gives visual feedback as user scrolls
  • Legible and trendy font that provides a clean design feel
  • Reduce cognitive load with clearly organized headers and titles
  • Bottom navigation for user interactions and flow
  • Nav icon color provides “active” vs “inactive feedback to the user

Points

a barcode and illustration for earning points

Summary: the current screen has a little bit of a different use because it serves as their point and promo screen. I suggest separating the two screens and only providing the promo information when it becomes relevant. I want to also voice the confusion with their promo decision. Why do they offer money off instead of “Free” products like other franchises?

My approach was to modernize and clean this page up with lots of white space. They are selling food products not tires. There’s so much benefit to using bright, tasty colors to keep their users in the mood for delicious products. See the list below.

  • Created custom made icons and designs
  • Consolidated the purchase points and the barcode scanner
  • Microcopy informs the user of their progress

Account Purchases

the user profile page showing purchase history

Summary: the current account profile is useless! There’s no way around it. Don’t believe me? Go see for yourself. It offers no value to the user. I decided to consolidate areas of the app so the user could do more with one click.

  • Profile image and personalized greeting to help the user feel connected
  • Use of tab navigation to maintain easy usability and organized information
  • Tabs limited to just three (3) options
  • Maintain cohesiveness by using the company’s primary color
  • Utilize microcopy to keep the user informed
  • Purchase history with a detailed view (see image below)

In addition to showing purchase history, the user can expand this page for more details. My design choice adds value by helping the user recall the smoothie name and the ingredients used. Now they can “favorite” a purchase for future use.

Reduce the wait time for in-store purchases.

Instead of customers standing in line trying to recall what they want they now have a personalized reference list. This not only improves the user experience but also the experience of customers behind them.

Conclusion

I’ll never forget the first time I downloaded and opened the Smoothie King App.

Ugh…so confused

All I wanted to do was get my points and my smoothie. There were so many barriers because it was unclear how to quickly navigate in the app. Then when I returned to the app for the next purchase I was still hesitating on where to click. I’m a smart girl so when simple things stump me I instantly feel frustrated.

Bottom navigation is becoming standard so implementing that into this app will instantly change the user’s automatic response of where to click. Integrating purchase history and adding valuable information into user’s accounts will simplify their store experience. Eventually, this franchise will have to offer a pre-order option. The more improvements they can make before then the better prepared they will be to remove barriers to delightful app use.

Feedback

Hi readers! I’m evolving my career to include psychology, design, and tech. I’d love to hear constructive criticism on how I can improve my design thinking, process, and decisions. Thank you!

Michelle Wasabi

Written by

UX | UI | Front-end Designer | Psychologist in Miami trusting the process + evolving my career + living my best life. Next goal is a UX full-time position!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade