Sweet Tooth Bakery

PERSONAL PROJECT | USER INTERFACE DESIGN

Table of Contents
Project Details
Design Process
Hi-Fidelity Design
Conclusions
Back to Top

Project Details

Sweet Tooth Bakery is a fictional specialized dessert shop that provides a delicious and streamlined online ordering experience. It offers a selection of unique treats specifically made for people with dietary restrictions that include dairy, gluten, and nuts.

Challenge

Sweet Tooth Bakery is a modern and whimsical dessert brand focused on a common problem for the diet restricted: lack of selection and availability. Those with these dietary restrictions have a hard time finding baked goods that meet both their taste and dietary restrictions.

Selection
Not many places have an abundant amount of selection within the specialty products category. There tends to be very little offered and/or no variety.

Availability
Not many food stores or product lines offer diet restricted food. They are not always readily available in-store or through online ordering.

Goals

  • To create a brand and online shop where the products are designed to meet the needs of diet restricted individuals.
  • To display a wide array of selection for all of these specialty baked goods.
  • Make ordering and delivery as easy as possible, both at home and on-the-go.

Target Audience

  • Those with dietary restrictions such as lactose intolerant (dairy), gluten intolerant, and nut allergies.
  • The general public: baked goods are made to be delicious for everyone, not just people with food allergies.

My Role

Sole UX Designer: research, wireframes, mockups, prototypes.

Tools

Figma

Ideas & Strategy

I began this project with brainstorming different ideas and strategies on how I wanted to approach designing the user interface for the target audience. This was a concept project with an emphasis on learning Figma and practicing visual design principles.

Design Strategies

Strong Branding

Visual Elements

Accessible Menus

Easy Navigation

Clear Diet Icons

Designing for diet restrictions

On the allergen filter, three main choices are given right now, which according to research are the most common: dairy, gluten, and nut allergies.

When a user selects one or more allergens, the desserts presented adhere to the selected allergen by displaying a symbol in the upper right hand corner.

  • If Gluten is selected, a “G” would appear.
  • If Nut is selected, an “N” would appear.
  • If Dairy is selected, a “D” would appear.
  • If None is selected, no changes would appear to the menu options.
  • If multiple options are selected, they would be next to each other in a row in the top right hand corner of the image.

Hi-Fidelity Design

After generating the strategies of designing for the target audience, I created some wireframes, lo-fidelity designs, and then high-fidelity designs — which closely match the look and feel of Sweet Tooth Bakery’s final products. They include visual elements, navigation, and interactive details. 

Desktop Mockups

Mobile Mockups

Prototypes

Buying cupcakes

Buying donuts

Conclusions

Next steps if I had more time:

  • I would continue to develop the other pages of the website.
  • Learn more about UI and branding to expand on what users would experience and feel.
  • I would also conduct usability studies, develop personas, and continue with the rest of the full design process, end-to-end.
  • I loved designing this project. It was fun gathering all of the desserts and exercising my visual design skills. My goal was to practice using Figma and creating elegant UI Design.
Back To Top

Other UX Case Studies

Safe & Sound

UX | Service Design

Bloom

UX | Native App Design

Ocean Bank

UX | Responsive Design