The Cupcake Store

Redesign website - UX Study Case

UX UI Designer & Researcher, Student

My Role

Tools

Figma, Photoshop, Illustrator, Notion

Project Overview

In order to enhance my design and user experience expertise, I am showing on a case study for The Cupcake Store, a company based in Dublin, Ireland. The company originally started as a small business that sold cupcakes at a small farmer's market, but it has since expanded to include an online platform for selling custom and themed cupcakes.

Problem Statement

When preparing for get-togethers or parties, busy people can easily order cupcakes online. How can we simplify and improve the personalized cupcake shopping experience?

Goals

The goal is to identify issues and provide solutions to enhance the website's functionality and overall user experience.

My Design process

To guide myself in this project I used the design process methodology:

Empathise

Before I started searching for issues and possible solutions, I tried to learn more about the company, its story, goals, and products.



The Cupcake Store was established in 2008 as a small farmer's market stall that sold delicious cupcakes. It was founded by Patricia Kelly, who is a skilled pastry chef. Over time, the business has grown to include several markets in the Dublin area, as well as online sales and ordering. The bakery specializes in creating corporate and branded cupcakes and takes pride in offering high-quality products at competitive prices. As a result, the business has developed a vast clientele in both the personal/birthday party and corporate sectors.

The Cupcakes Store

Heuristic Evaluation

One step ahead to learn more about The Cupcake Store, I used a Nielsen heuristic analysis methodology to identify potential usability errors on the company's current website. Through this process, I identified several usability problems, such as poor visibility of system status, inconsistencies and shortage of standards, lack of error prevention warnings, and other issues.

Sitemap

I analyzed the website's organization, architecture, and user flow to identify flaws and potential improvements. My goal was to streamline the website, improve user experience, and increase sales and customer satisfaction.

Conclusion

  • The website's design requires improvement, particularly in terms of hierarchy, alignment, and consistency in typography and elements.

  • The menu is confusing, and misalignment issues persist in the header.

  • Navigation is problematic, with misplaced pages and buttons leading to dead ends. Simplifying navigation is crucial.

  • The main page lacks emphasis on products, and ordering logo-branded cupcakes lacks clarity.

  • The process of ordering a branded cupcake requires additional user steps post-purchase.

  • The text is overly lengthy and lacks effective communication, missing clear information priorities. Improved organization is needed for better readability and understanding.

This research conducted for The Cupcake Store, a Dublin-based business specializing in cupcakes for personal and business events. It identifies the target audience as diverse, including children, families, millennials, young adults, corporate clients, event planners, and social media influencers. The target demographic ranges from 20 to 45 years, both genders, with any income and education level, including students and graduates.

Desk Research

The primary customers are tech-savvy individuals and businesses who prefer online ordering for convenience and customization. Event planners and corporate clients are highlighted as key customers who seek unique dessert options for their events.

I conducted market and competitive research to align with the research findings and business goals. I analyzed three websites: Eliye Cakes, Lola’s, and The Natural Bakery, focusing on usability, design, displayed information, and product checkout flow, comparing them with direct and indirect competitors. See the table below for the results.

Competitive Analysis

Define

After analyzing the company's target audience, business goals, and conducting a competitive analysis, I have identified the problem that will guide my design choices in the future. Furthermore, I have created personas based on the user profiles that were identified during the research phase.

Persona

I've set two personas through our research. Julia is a payroll assistant. She wants to order cupcakes for a weekend celebration. She values professionalism and likes to feel safe online, so she conducts thorough research before making final decisions. The second is Angela, a 56-year-old HR professional responsible for arranging company events. She needs company logo cupcakes for an event and The Cupcake Stores can provide them.

User Journey

After identifying personas, I mapped out their journey for purchasing products according to their needs. The user journey phase is crucial, this helps identify when needs and pains are most evident and find opportunities for improvement.

Ideate

During the analysis phase, I found that the website's information was disorganized and difficult for users to navigate. There were inconsistencies in nomenclature, missing information, non-existent pages, and broken buttons. I improved the user journeys and organized the information to make it easier to understand and navigate. You can see the outcome in the image below:

Information Architecture

Userflow

With the information architecture organized, I set out to develop a new userflow based on the user's journey, as we can see in the image below:


Scenario 1:
Julia is looking to order cupcakes for a birthday party.

Scenario 2:
The second scenario solution it’s coming soon:

After information architecture and the Userflow, I moved on to the sketching and ideas phase for the new website layout. As can be seen below, sketches and wireframes were developed at this stage.

Sketch

Wireframe

I created a mood board to guide the visual aspect of the website, based on the current website's visual identity and color scheme.

Mood board

The new propost of the website offers significant usability, design, and functionality improvements. To ensure a consistent and unified experience, I have decided that the logo company needs to be rebranded. I've created a visual identity to complement the new website's aesthetics and effectively communicate its cupcakes' unique essence.

Redesign logo

Prototype

The prototype phase involves implementing the visual ideas generated in the previous phases.

High-Fidelity

The next step involves validating the changes implemented in the project, followed by gaining insights and refining the design based on these new discoveries. Given that UX revolves around user-centered design, with users as the central focus, testing becomes crucial in determining the effectiveness of these solutions. It serves as a fundamental process in this phase, enabling the validation of ideas and facilitating learning from the outcomes.

Takeaway

What I've Learned So Far

This assignment has been a long journey of learning. As I always say, knowledge and practice are two different paths. While knowledge is like a speedy highway, practice is akin to climbing a mountain on a steep, winding road. It takes more time to effectively learn how to do something than simply to understand it. With each moment, I've expanded my knowledge and experience.

UX/UI is a continuous process, not merely a method. There are no wrong or right answers in the design process; therefore, all decisions made must be validated by the user in an ongoing learning process.

Research is essential; it's not just a simple part of the design method but a phase that permeates the entire process. It enables us to transcend common sense and biases, deeply understand business and user needs, and uncover hidden needs and problems that may not be evident at first glance. Research prevents us from making decisions without a solid theoretical basis.