SFS-Gradient-1

 

Sugar Free Shack

Tasty, guilt-free treats for those with a sweet tooth

Project Type: Conceptual

Responsibilities: UX Design, UX Research, Prototyping

Team: Solo Project

Duration: 80+ hours

ABOUT

Sugar Free Shack offers a variety of sugar-free desserts made with high-quality ingredients to health-conscious residents of Los Angeles. Their goal is to simplify the process of ordering cakes and sweets in order to boost their revenue.

Frame-15-1
PROBLEM CONTEXT

Given their established website, impressive ratings of 4.5 out of 5 stars on both Yelp and Google, and coverage in local media, there is a great deal of anticipation for a positive customer experience. In exploring potential opportunities, I considered these factors:

  • There is a rising trend of Yelpers using mobile devices to access information and reviews (Dixon, 2022)

  • In 2021, bakery pioneers are responding to growing health concerns by introducing more nutritious and health-conscious offerings (Vierhile, 2022)

  • The prevalence of diabetes in California is significant, with 10.5% of adults having been diagnosed with the disease and 33.4% having pre-diabetes (American Diabetes Association, 2022)

What opportunities exist to beat out competitors and cater to the needs of health-conscious Angelenos?

THE USERS

Angelenos with dietary constraints and the health conscious are interested in healthier, sugar-free desserts, but want efficient services and information.

Goals:

  • Fast and efficient services
  • Accurate information about the menu, including their availability
  • A selection of sweets to meet the needs and preferences of clients
  • Access information about products, such as ingredients, nutritional information, and potential allergens
unsplash-image
THE PROBLEM

Sugar Free Shack's revenue is being affected by the current website's inadequate mobile usability.

  • The lack of a responsive website can lead to a poor user experience for mobile users

  • Customers may experience frustration when inaccurate or incomplete information about products is provided

  • Slow service can negatively impact users' experience and overall satisfaction

IMG_6326

When attempting to order a monthly keto box, users see this screen.

IMG_6328

It is difficult for mobile users to subscribe to newsletters due to the lack of responsive design.

IMG_6330

The lack of margins on the cart page makes it difficult to view, and there are also misspelled words.

IMG_6329

The search feature is very difficult to use due to the lack of margins.

 
THE SOLUTION

A responsive redesign to improve mobile usability will help with increasing revenue. 

  • Providing positive user experiences can increase the likelihood of customers making more purchases
  • Health-conscious Angelenos are more likely to be satisfied when product information is accurately depicted
  • Same-day pick-up options can improve efficiency and enhance the overall service
DISCOVER

I conducted a usability heuristic evaluation and competitive analysis to identify opportunities for improving the business's revenue. These methods provided valuable insights into the areas that needed improvement and how competitors were meeting the needs of their users.

DEFINE

81% of consumers say a positive customer service experience increases the likelihood of making another purchase (Zendesk, 2022). 

I analyzed reviews on Yelp, Google, and GrubHub from 75 clients over the past year to uncover their needs, frustrations, and motivations. This valuable data gave me a better understanding of health-conscious Angelenos and their goals.

NEEDS:

  • Availability of a bakery for clients with dietary constraints: 99%
  • Quick and efficient services: 37%
  • To be informed about the availability of sweets listed on the menu: 19%

FRUSTRATIONS:

  • Inaccurate menu or sold-out items: 19%
  • Disappointment with sweets bought: 11%
  • Poor customer service: 11%

MOTIVATIONS:

  • Tasty and healthy sweets: 56%
  • Great, friendly service with knowledgeable staff: 31%
  • Meeting health/dietary needs: 19%
unsplash-image

Providing efficient service and comprehensive information is crucial to creating a positive experience for health-conscious individuals in Los Angeles.

Through the use of an affinity map, I was able to identify the key themes that positively impact the user experience:

  • Providing accurate information
  • Offering efficient services
  • Catering to dietary constraints and the health-conscious

The data revealed that the primary customers were health-conscious Angelenos with dietary restrictions. Point-of-view statements were used to develop personas and identify their needs. Two personas were created based on this information.

DEVELOP

To rapidly generate solutions, I used Crazy 8's. I reviewed goals. Sugar Free Shack's goal is to boost revenue. The health-conscious Angelenos' goal is to get speedy service with accurate product information. As a result, I decided to focus on the product page as the best starting point to address any information gaps.

Screenshot-2023-04-06-at-1.19.44-AM

Main pages were uncovered using flows.

With quick iterations, I expanded my focus to the different flows. My goal was to create an effortless ordering experience for Sugar Free Shack customers. I concentrated on the task flow, streamlining every step to simplify the process. Although the user flow was trickier, breaking it down into happy and alternative paths helped me identify the essential pages to design.

I went from feeling overwhelmed to being able to see a clearer picture.

With the flow sorted, it was time to tackle the menu - a headache for our health-conscious Angelenos. They struggled with inaccurate information and were overwhelmed by the sheer number of options. To simplify things, I went old-school and used card sorting with paper to categorize each item and bring some much-needed order to the chaos. A sitemap was also handy in ensuring I covered all the crucial pages and categories.

unsplash-image

Designs went from sketches to low-fidelity, then high-fidelity.

Full-Home-Page
Order-Page
Churro-Donut-Page

Sample wireframes of the homepage, menu, and product page

With my newfound insights, I knew exactly what I needed for my designs. I started by sketching some screens to brainstorm layouts, then created low-fidelity wireframes to flesh out my ideas further.
 

Since Sugar Free Shack already had an established logo and brand, I made sure to include these elements in my high-fidelity wireframes. I carefully selected a color palette that complemented the logo while still meeting the strict legibility standards set by WCAG Level AAA. At this stage, I sought out feedback on the user interface to ensure that it was as intuitive and user-friendly as possible.

Style-Tile

Style Tile for Sugar Free Shack

Using an iterative approach had a huge impact.

I tested two prototypes: one for desktop and one for mobile. Three users tested each. Tests were moderated and in person. I focused on the user flow and their ability to complete tasks. Using the feedback I received, I identified patterns and themes in an affinity map to help me refine my designs further.

  • 83% of users completed both tasks without any errors
  • 83% of the users said finding the information they needed to complete the task was easy 
    67% of the users found the customer favorites section helpful in accomplishing the tasks
DELIVER

A responsive redesign was provided to improve mobile usability and increase revenue. 

  • A smoother user experience makes it easier for customers to find what they are looking for and make purchases

  • Accurately depicting product information caters to the needs of health-conscious Angelenos

  • Same-day pick-up options make services more efficient and convenient

These are the main improvements I made after conducting research and usability testing.

Group-9

The original design of the navigation bar lacked sufficient margin, which could be frustrating for users trying to navigate.  The new responsive design allows users to easily access the navigation bar and explore the site, eliminating frustrations.

Group-10

The original design did not provide users with consistent information, causing confusion. The new design makes it easier for users to find the information they need, as detailed product information is now available.

Group-10-1

The original design only provided limited options for online orders. Additionally, the checkout process was not user-friendly. The redesign displays all available products that can be ordered online for pickup. The checkout process is improved and more intuitive.

The final product

NEXT STEPS

Although the project ended, continual iterations make the product better.

Based on the feedback during this round of testing, I would:

  • Conducting further research to understand how users search for products

  • Explore how ingredient and nutritional information can be confusing to make information clear and user-friendly

REFLECTION

This was my first UX project; it was a great learning experience. One key takeaway was the power of an iterative approach. By continuously testing and tweaking my design, I was able to catch and fix issues before they became big problems. Another lesson was the importance of time management - I now know to give myself more wiggle room when planning projects. And when in doubt, I learned to revisit the research. It's easy to get lost in the design process. Staying grounded in the data helped me make better decisions. 

© Liz Arenas 2023