VANILLA BITES
A Digital Makeover for Aditi's Culinary Journey

Click to view the final mockup

Responsive Web Design (UX/UI Design)

Tools Used Figma, Adobe Creative Suite

Time 4 Weeks

Client: Aditi Sinha, Founder of Vanilla Bites and writer of Aditi’s Kitchen Diary

Aditi Sinha is more than just a baker-she’s a storyteller through food. From learning age-old family recipes in her childhood kitchen to picking up regional flavors during travels with her husband, Aditi has spent a lifetime blending tradition and innovation. At 50, she’s a renowned sugar flower artist and the founder of Vanilla Bites. With over 100 recipes documented in her book "Aditi’s Kitchen Diary", she is now ready to take her culinary journey online.

Initial Problem Statement

Despite her regional fame and strong local presence via Instagram and Facebook, Aditi lacks a centralized, professional platform and needs a way to reach new clients. Her dream is to:

  • Reach international food enthusiasts.

  • Share her culinary wisdom and recipes.

  • Offer custom sugar flower art orders online.

WHAT IS THE REASON?

1. Orders only come through informal channels. She is not using an online mobile app for getting orders.

2. She wants to sell her new recipes and sugar flower art tailored to clients' preferences, but lacks a website to showcase her offerings, making online orders difficult.

3. She is not sure about how to connect with new customers and reach global clients along with her old and close friends as clients and there is no digital space to promote her book or story.

My Role & Design Approach

As the UX/UI designer, I led the end-to-end design process:

  • Conducted interviews with Aditi and her loyal customers to understand their needs.

  • Developed user personas.

  • Sketched low-fidelity wireframes, moved to mid-fidelity prototypes, and conducted usability tests.

  • Finalized a high-fidelity prototype for desktop and mobile.

  • Mobile-first design for accessibility across devices.

  • Seamless navigation and accessibility features.

The goal was to create a responsive, user-friendly website that reflects the authenticity of Aditi’s brand, with:

  • A welcoming landing page introducing her story and values.

  • A dedicated recipe section for sharing curated recipes.

  • A custom order page for cakes, chocolates, and sugar flower art.

  • Mobile-first design for accessibility across devices.

  • Seamless navigation and accessibility features.

Research

Competitive Analysis

I conducted a comprehensive SWOT analysis of various baking brands and services that offer sugar flower art online. I examined brands such as Arati Mirji, Sugar Ruffles, Sugar Flower, and Maggie Austin. You can find the detailed analysis in the link below, along with a summary of their strengths and weaknesses.

Strengths

  • International delivery is one of the important part of the service which is provided by two out of the four brands.

  • Arti Mirji provides tutorial for Sugar flower art and she specializes in Sugar flower art. One of the brand also provides business consultation and workshops.

  • Core competencies are realistic and natural looking sugar flowers, extremely creative. Bespoke sugar flower art for cake decorations which is easy to order.

Weaknesses

  • A need for other food options and also instructions for any dietary restrictions.

  • Online order button for cake orders should be prominent, also the option for workshop

    booking should be prominent with a proper navigation bar.

  • Responsive website required which makes ordering easy.

  • One of the brands only caters to haute couture cakes; orders are too expensive; no free tutorial options for beginners.


Summary:

Total 5 Participants: 3 Female and 2 Male
•  All have hosted events like birthdays/ anniversaries/ weddings/baby shower etc.
•  Three out of five participants love to bake and follow recipes from online blogs and YouTube.
•  One of the participants has a small-scale business for custom-made cakes and desserts.
Baking Hobby:
54% - No
30% Yes

Baking Interest-Recipe books or Websites they follow?
The participants mostly follow online recipes for baking and other food preparation. 90% of them said no to workshops. They mostly like to learn recipes online through YouTube and well-tried recipes from friends, family, and colleagues and follow online tutorials with high ratings.
YouTube is one of the highest times participants mentioned for following recipes.

Dietary restrictions?
3 out of 5 do not have any restrictions or would not think about restrictions while ordering.


User Interviews

Survey Reports

Summary:

The survey aims to understand the users’ preferences for online cake-ordering options and choices, and what they expect while ordering online. The survey comprises questions that assess the users’ existing service and product experiences. After carrying out the survey the key points to note for the further process are:

  • 54% of the participants say they do not have any hobby for bakery while 27% say yes to baking as a hobby.

  • Most of the participants follow YouTube to learn recipes.

  • 85% did not face any problems while ordering cakes online, while about 14% faced difficulties.

  • Most of them prefer customized cakes for special occasions.

Image input, option choices for cake, cake-topper decorations and food restrictions 

Define - Key Features

Express delivery food / cake option

Blogs and Advertisement pages, contact, gallery, events

Booking for free online workshops or other subscription plans or business guide videos after getting a promo video

Account Creation and custom online order button with choices of customization

A link to online recipe books or free youtube videos and channels

Special workshop and online order for sugar flower art

A landing page with information and brand value - Logo, a catchy headline-About-Highlights, and a CTA button to order online or Subscribe for online/offline tutorials

Meet Jenny, a baking enthusiast, passionate about baking and is eager to enhance her skills by joining an online class.

This user persona identifies Jenny’s challenges, including her enthusiasm for exploring new recipes and her limited time for cooking classes. This results in a need for online courses to learn new recipes and techniques.

User Persona

The design process begins after developing the information architecture(IA) determining how users find and interact with information (user flow and task flows) followed by wireframes, which consist of three sections: initial sketches or low-fidelity wireframing, mid-fidelity wireframing, and high-fidelity wireframing. The final visual representation of the app is created during the high-fidelity wireframing stage, before moving on to high-fidelity prototyping. At this stage, I worked with my client to determine branding and typography.

Design

Transforming the Low Fidelity wireframes to Mid Fidelity Wireframes:

Some of the mid-fidelity mobile app screenshots are displayed below, I started working on the mid-fidelity wireframing digitally on the Figma tool. At this stage, the wireframing begins with distinguished grids and columns, image and text boxes for all the required pages.

Homepage


Order

Browse


Customization

The wireframes below depicts how the design responds to user needs by adapting to different screen sizes, orientations, layouts, and platforms.

Workshop

High -Fidelity: Mobile Wireframing:


Order


Homepage


Sign In


I began by designing the homepage and the order page, focusing on creating a user-friendly ordering process.

Developed a mobile-first design for the order page, featuring a large CTA button and a search bar. Users can easily place orders using the “Order as a Guest” option, or they can sign in or sign up.

Browsing, Customization and Sign in/ Sign up page

Users can easily browse through various categories and, if they wish, navigate to the bold Customization CTA in the top right corner for customization options.

Desktop Design

Efforts were made to uphold the principles of scalability and spacing in accordance with established desktop guidelines while designing a responsive application. The customization options have been purposefully structured to be swift and easily clickable at each stage with referral icons, thereby minimizing any potential confusion for users.

High -Fidelity: Desktop Wireframing: 

      Prototyping & Testing

After testing the high-fidelity prototype, I focused on the points that needed iteration.

1.      Add an option to add referral image 2.      Label the images .

on the customization page.

3.      Label the colors in names instead of 4.      Shrink the Logo to balance it with

the shop and menu icons.

5.     Homepage: give some space 6.    Center align the owner’s quotation.

between headers and paragraphs.

Aditi Sinha (founder of Vanilla Bites)

Aditi’s comment after the high-fidelity prototype testing:

“I loved the entire look of the web design; you have done a great job. I wanted the theme to be exactly what you have incorporated; the background images are beautiful. I was concerned about the logo being changed from the initial logo, but I also wanted it to be simpler. You just gave it a perfect size and did the minimalizing perfectly without it being modified entirely.”

Feedback: “My only suggestion is to add the consultation button to the contact page instead of keeping it on the resources page. It would be great if you could also mention my studio address and contact number separately on the contact page to make it more visible.”

Other Feedbacks:

“Easy and eye-catching, didn’t need to search a lot to complete a customization or order task. Everything was right in front of me. I find this to be very interesting and seamless, it didn’t take much time to understand the entire process. Would love to buy a customized cake from this brand. The color selection option is very cool.”

“Everything was in place, instructions were very clear, and completing the customization task and order process was very clear. The look of the entire page and visuals go very well with the baking theme, users would love to browse and look for buying options.”

Iterations

-Added the “ Let’s Order” button.
-Added space between headers and paragraphs.
-Added “Vanilla Bites” as branding
-Everything aligned left.
-Changed the Logo Size and removed Brand name to make it simple and balance the size.

-Increased the font size of the menu buttons for better visibility.
-Added space between headers and paragraphs.
-Added “Vanilla Bites” as branding
-Everything aligned to the left.


-Removed the Footer.

Added examples for placeholders for better user understanding.

Added examples for placeholders.

Changed the custom button placement
Followed by the Catalogue

Background in warm and dark tones inspired from the colours of wood, bakery, tiramisu, chocolate, since the client shared a link of her blog in which she used her favourite warm wooden texture as background and wanted the same for her website along with colors inspired from various types of flowers. Infused the warmth of bakery in the brown and gold - bronze tones from the following visuals along with the pastel floral colours.

Branding and Style Tile

Logo Design


Aditi Sinha’s Blog from which I took the visual inspiration. As she wanted to continue with the same color and theme.

Final Design Mockups

My Challenges and Key Takeaways:

  • This project has provided me with valuable real-world experience. I had the opportunity to work with a client while considering the needs of both the users and the client. I also made sure to focus on creating a responsive design, keeping the correct sizes in mind for both mobile and desktop platforms.

  • One of the main challenges I encountered was finding participants with specific backgrounds for user testing and gathering accurate information during surveys. Another challenge was creating customizable options for cakes, ensuring there were enough choices, and giving customers a preview of how their customized cake would look.

  • In this project, I learned that it's crucial to pay close attention to the varied preferences and needs of users when offering customization options, while also considering the client's deliverable possibilities. I received a wide range of questions and suggestions from the user testing participants, which prompted me to reconsider and incorporate enhanced options.

  • Key takeaways from this project included working closely with the client, focusing on their specific direction and following their instructions and requirements, as well as considering the needs of the end users. Also developing a responsive web design was another experience where one has to think about the limitations, font and button sizes, and constraints.

Impact & Success

  • Aditi now has a professional presence online.

  • Clients can order without relying solely on DMs.

  • Recipe lovers can explore dishes by attending workshops or consultations directly with Aditi.

  • Increased engagement and visibility beyond her local region.

User Feedback:

“I love how I can finally see all her creations in one place. The custom order form made ordering a wedding cake seamless!” - Client Feedback.

Reflection & What’s Next

Designing for Vanilla Bites was a blend of emotion and function. I learned the importance of storytelling in digital design and how even traditional businesses can flourish with the right tools. My next step would be to integrate blog and video content, allowing Aditi to teach her recipes online.

From her kitchen to the world, Vanilla Bites is now more than just a brand’s experience. This project showcases how thoughtful UX/UI design can empower personal brands to grow, connect, and thrive digitally.