Black and Gold Exclusive Mockup Facebook Post (Graph) (1400 × 768 px) (1).png

A website redesign for a custom cakeshop: A UX case study

Project Overview

'Cakestar' is a beloved custom cakeshop with a magic that just couldn't be found on their website. As a UX designer, I set out to revamp their website to be just as sweet and delightful as their cakes. My redesign includes a new direct ordering feature, stunning visuals, and an improved user experience that makes ordering a cake as easy as pie.

My Role

User Research
Insights Gathering
UX Design
Visual Design

Tools Used

Figma
Canva
Pen-paper

Problem Statement

The original Cakestar website lacked visual appeal, making it difficult for users to engage with the content. The online ordering process was also cumbersome, requiring users to fill out a form with limited options. Additionally, there was no testimonials section, leaving potential customers without social proof to build trust in the brand.

From the company's point of view, the problem is that they are losing potential customers who are looking for a more convenient way to order cakes. The lack of an online ordering option is limiting their reach to a broader customer base, particularly those who prioritize convenience and ease of use. This results in lost revenue and potential growth opportunities for the business

Value Proposition

Redesign the website to boost sales by allowing users to place orders directly from the website
Provide users with an easy and efficient ordering process that can be completed in just a few clicks
Improve user engagement and trust by adding a reviews or testimonials section on the website
Enhance the visual appeal of the website by adding more pictures of cakes and improving the overall design
Increase Cakestar's social media presence by integrating links to their social media accounts on the website.

These goals will help ensure that the redesigned Cakestar website will provide a better user experience and help the business meet its sales and marketing objectives

Laptop Mockup Instagram Post (Graph) (1).gif

" Every great design begins with an even better story "

Design Process

User Interviews

As part of the design process, I conducted five user interviews to gather insights on their pain points, behaviors, motivations, and expectations. To better understand my users, I created an empathy map based on the data collected during the interviews.

Colorful Simple Empathy Map Brainstorm (1920 × 1150 px).png

This research phase was critical in gathering the necessary information to ensure that the new system is user-centered and meets the needs of its intended audience.

Understanding the User

Pain-Points Analysis

User Persona

After the qualitative and the quantitative user research and web analytics, I iterated 2 personas representing my key audience.

Competetive analysis

Based on a brief competitor analysis, I focused on creating an enhanced feature set that focusses on the problem and creating a product that was market-fit.

While conducting the research on several bakery websites, I focused on the following areas:

1. Website Layout and Navigation: I analyzed the overall layout, ease of navigation and how well the information is organized.

2. Visual Design and Branding: I evaluated the visual appeal of the websites, the quality of their images and videos, the use of color and typography, and how well they convey the brand's message and aesthetic.

3. Online Ordering System: This section was really important for my project, as I was introducing online ordering for Cakestar's website from scratch. The research included assessing other websites' online ordering system, how user-friendly it is, how easy it is to customize cakes, and how well it integrates with payment and delivery options.

4. Customer Reviews and Testimonials: I analyzed how other websites are showcasing the positive reviews and testimonials and how they respond to negative feedback.

5. Social Media Presence: I evaluated how active they are on various social media platforms, how well they engage with their audience, and how they showcase their latest creations and offerings.

Business

User

Shared

Product Goal

Information Architecture

User Flows

As a UX designer, my intention behind creating these flows was to map out the optimal paths for users to achieve their goals on the website.

I have created two main flows to help you understand how the users navigate through this website, where they might encounter obstacles or confusion, and how to create a seamless user experience that meets their needs.

1. Submitting Order Request User Flow

2. Online Order User Flow

After the crazy 8's and how might we exercises, I sketched out some paper and pen wireframes. The ideating process helped me think through the preliminary flow and easily review what was necessary , unnecessary and which areas needed improvement.

Paper First (sketches)

Wireframes

Before the creating the UI, wireframes were developed, which during the development process were modified, improved and detailed until the final result.

Flow 1

Flow 2

Usability Study Findings

I conducted a usability study after making the wireframes. Users were asked to complete 2 prompts:

Browsing the cake designs
Placing the order online

Through this study, I identified patterns and developed insights which helped me design the mock-ups from these wireframes.

Test Findings

01

The Personal Info Page: After the tests, it was determined that this page was redundant and unnecessary. This feedback led to its removal for a more streamlined and efficient user experience.

02

Testimonials: Users expressed need for a testimonial section to be added with each cake listing. This would enhance user's trust and help them make informed decisions.

03

Online Ordering: Online ordering functionality was well-received and deemed convenient.

04

Confirmation Screen: In addition to displaying a message confirming the successful placement of an order, users expressed the desire to easily access their order information, including shipping and billing details, after placing an order.

User Interface

Homepage

Revamped homepage with modern design, prioritizing visuals over text. Artistic elements and imagery add a captivating and cake-inspired aesthetic.

Before

Lack of Visual Appeal:

Insufficient use of visually engaging images, making the website appear dull and unattractive.
Over-reliance on text, making it overwhelming for users who prefer visual content.

Limited Product Presentation:

Inadequate showcasing of cake designs and flavors, leaving users with limited options and less confidence in their choices.

Absence of Social Proof:

No customer testimonials or reviews to establish credibility and trustworthiness
Minimal integration with social media platforms, missing out on opportunities for customer engagement and promotion

After

Improved Visual Appeal:

Increased use of high-quality, visually appealing images throughout the website.
Enhanced overall aesthetics and design to create a more modern and artistic look.
Reduced reliance on text-heavy content and prioritized visual elements.

Enhanced Product Presentation:

Showcased a wider variety of cakes and bakery products through visuals and descriptions.
Introduced a "Popular Cakes" section, highlighting the most sought-after designs and flavors.
Incorporated customer testimonials with each cake, providing social proof and personal experiences.

Integration of Social Media:

Added an Instagram section to display real-time photos of the bakery's creations.
Connected the website to the bakery's social media accounts for seamless cross-promotion and engagement

Streamlined User Experience:

Simplified navigation and menu structure for easier browsing.
Added clear and prominent call-to-action buttons for key actions like ordering and viewing cakes.
Implemented a user-friendly and intuitive online ordering process.

Colourful Muffin Liners for Baking _edited.png

Other Pages

Laptop Mockup Instagram Post (Graph) (6).gif

Online Ordering Feature

With just a few clicks, users can browse through an extensive selection of custom and bakery cakes, explore different designs and flavors, and add their desired items to the cart.

The interface guides customers through the ordering process, allowing them to input their personalization preferences, delivery details, and any special instructions

Users have the option to securely make their payment online, ensuring a smooth and hassle-free transaction.

UI-Kit

In the UI-Kit, all available interactive elements for the site are added and displayed in different states.

Grid System

Rows: 2000; 8px

Columns: 12

Margins: 70

Gutter: 20

Results

As a designer, my role in this project was to create a comprehensive design solution that addressed the identified user pain points and business needs. While the designs didn't ship during this case study, there is potential for the company to implement and develop the redesigned website in the future. By showcasing the value and impact of the proposed design solution, including improved user experience and increased online orders, there is a strong foundation for the company to consider investing in the development and launch of the redesigned website. The designs serve as a blueprint for the potential future growth and success of the business in the digital space.

Key-Takeaways

Throughout this project, I gained valuable insights and lessons that I will carry forward in my future endeavors as a designer. Some of the key learnings include:

User-Centric Approach: Designing solutions that address user needs and pain points.
Iterative Design Process: Embracing feedback and continuous improvement.
Collaboration and Communication: Effective collaboration with stakeholders and users.
Testing and User Feedback: Validating design decisions through testing and user input.

Reflect

While reflecting on the project, I also acknowledge areas where I could have improved:

Time Management: Enhancing project efficiency and meeting deadlines.
Documentation and Organization: Improving documentation for better collaboration.
Embracing Constraints: Finding creative solutions within limitations.

Moving forward, I will apply these learnings to refine my design skills and create impactful solutions, while also addressing areas of improvement for more successful project outcomes.

Thankyou!