Overview:
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
IntroductionAditi Sinha - A cake artist, is the owner of Vanilla Bites, she started collecting cooking knowledge from her various travel experiences and following the instructions and guidance she started creating a fusion of traditional and modern cooking recipes, keeping health and hygiene as the utmost priority. At the age of 50, she is constantly trying to upgrade her culinary skills and make her recipes reach all. She has written a book to share her experience and recipes named "Aditi's Kitchen Diary" with more than 100 recipes. She has also mastered dessert making, and baking, and now being a famous realistic sugar flower artist in her region, she wants to expand her business "Vanilla Bites".
Design Problem
Aditi wants to expand her business and wants new clients. Her brand needs a good platform to share her recipes and reach more clients.
She needs to focus more on the custom-made sugar flower art business.
Goal
The goal is to expand her business by reaching out to international clients and food enthusiasts online by creating a responsive website.
- A responsive web design, that provides easy interaction on both desktop and mobile.
- A custom-made order option for the bakery (sugar flower arts, cakes, and chocolates).
- A landing page with information and brand value.
- Focus on easy navigation and accessibility for users.
POV Statement
"I would like to find ways to make it easier for users to navigate and access the website when looking for custom-made bakery and food items because there are various factors to consider when ordering, such as food restrictions, delivery times, and online customization, which can create confusion."
"I would like to explore ways to make food recipes and online tutorials more easily accessible to users because many people find it difficult to
HMW Questions
How might we improve website navigation and accessibility for seamless and intuitive online customized ordering?
How might we enhance the accessibility of food recipes and online tutorials so that users can effortlessly locate free recipe books or workshop videos for their initial baking or cooking experiments?
ResearchCompetitive Analysis
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.
Strengths
Weaknesses
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.
Preferred online places to order bakery:
-Bakers on Instagram, such as Cake Affair for custom-made options.
-Bodega 42, Costco, Walmart, Sam’s Club, Lund’s and Byerly’s.
-Local Bakery Services.
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.
1 would look for Vegetarian Cake.
1 would look for Sugar-free cake for health concerns.
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.
User Interviews
Survey Reports
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.
After the research and survey are done, the next step is to analyze the results and create qualitative data to categorize them into common groups as sticky notes. This technique helps in organizing the ideas from the research.
The important points are grouped into categories such as -
Existing brands and services for custom-made cakes.
User’s checklists and paint points.
Type of occasion for cake order to find out users’ requirements.
Dietary restrictions.
Affinity Mapping
Define
Ideation and Key Features:
After gathering and analyzing research points, I was able to generate a large number of initial ideas to address the pain points and needs of the users. Following a prioritization process, I identified the most important features that need to be addressed for the app. The ideation and define process follows with creating personas related to the user needs to empathize them and developing user flows and task flows for the initial structure of the app design.
Image input, option choices for cake, cake-topper decorations and food restrictions
Express delivery food / cake options
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
User Persona
The design process includes developing 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.
DesignLow Fidelity Wireframing
Initial Mobile App Wireframe Desig
Initial Desktop Wireframe Design
Mid Fidelity Wireframing:
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
Homepage
Order
Sign In
Sign Up
Customization
Browse
Workshop
Selected mid-fidelity desktop screenshots
Payment
Payment Confirmation
Contact
The image depicts how the design responds to user needs by adapting to different screen sizes, orientations, layouts, and platforms.
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.
High -Fidelity: Mobile Wireframing:
Homepage
Menu
Shop
Sign in
High -Fidelity: Desktop Wireframing:
Browse
Order
Sign in
Sign up
Browsing
Customization
Prototyping & TestingAfter testing the high-fidelity prototype, I focused on the points that needed iteration.
1. Add an option to add images for reference on
the customization page.
2. Label the images .
3. Label the colors in names instead of
numbers, making it more understandable.
4. Shrink the Logo to balance it with the shop
and menu icons in the navigation bar.
5. Homepage: give some space between headers
and paragraph.
6. Center align the quotation of the owner.
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
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.
All . Mokosh . Vanilla Bites . Thrive . Move