Camelia Cake Shop

OVERVIEW

Camelia Cake Shop is a local business that specializes in baking custom cakes for special occasions. A full website redesign is proposed along with an interactive cake design feature.

PROJECT TYPE

Responsive Web Design
(Design Consultant for a small business)

MY ROLE

UX Designer, UI Designer, Brand Developer

TIMELINE

2 Weeks

THE PROBLEM

The ordering process at Camelia Cake Shop creates a significant amount of back-and-forth communication between the customer and the owner. This concern presents the ineffectiveness of the ordering process to convey a customer’s cake ideas.

THE COMPETITORS

Camelia’s direct competitors in the custom cake industry provided three elegant small cake businesses. An analysis was completed to identify strengths, weaknesses, and any potential opportunities.

A cakeshop that places an emphasis on all-natural, high quality, locally sourced ingredients.

An artistry house specializing in handcrafted custom cakes for Weddings, Birthdays, Baby Showers, and Graduations

A dessert shop that make cakes that defy physics and push beyond conventional boundaries into the extraordinary realm of exceptional desserts.

KEY OPPORTUNITIES

  • Minimize the potential for misinterpretation of a customer’s cake idea during the order process.

  • The ordering process is too open-ended for users with little baking experience.

  • An FAQ section can help answer user questions in quick fashion.

USER RESEARCH

The Interviewees were made up of 5 participants (3 females and 2 males) ranging from their Early to Late 20s. All participants are have within the last year and have either ordered through the website (2) and have directly contacted the owner (3).

The Nature of the Interview included a phone call for 15 minutes between the hours of 5 P.M. to 7 P.M.

KEY FINDINGS

  • It is easier for users to convey their cake ideas through visuals.

  • Users are more comfortable with messaging the owner about their cake requests.

  • The customer group discovers Camelia through word of mouth.

MEET THE USER PERSONA

From the user interviews, the persona of Chloe was created as a basis for any design decisions moving forward. Chloe is a young professional who loves to spend a little extra for special occasions like her birthday and look bougie for her followers on Instagram.

THE PRODUCT REQUIREMENTS

In order to minimize this back-and-forth communication during the cake ordering process, it is critical for this responsive web redesign to automate as much of this process as possible.

THE MAIN QUESTION

How might we personalize and automate the cake ordering process?

THE SOLUTION

Create an interactive cake design feature for a user to convey their cake ideas as well as allowing users to choose from a selection of pre-designed cakes.

INFORMATION ARCHITECTURE

Many small businesses lack information architecture for their websites so it was important to provide a well-structured site to allow easy user navigation. This sitemap focuses on the interactive cake design feature.

All pages on the secondary level of the sitemap were determined as significant sections through competitive analysis as well as user interviews. The owner prefers a user to order her products via the website instead of Instagram, so the Order page was made clear to users. The Delivery/Pickup page then notifies users on the owner’s availability to determine whether they should proceed with the cake ordering process. From there, users determine the type of order they’d like to place and are given the option to select an existing cake design or build their own cake in the Build-Your-Own Cake feature.

LET’S VISUALIZE THE SOLUTION

The wireframes were created based on the sketches as well as the sitemap. Key desktop and mobile screens were featured below. 

The Camelia Cakeshop homepage features a picture of the owner’s signature cake, the owner’s message, and a clear button for users to order a product. Below are a few testimonials to give potential customers an idea of the product quality if they decide to order from Camelia Cakeshop.

The Build-Your-Own Cake feature gives users an interactive cake model that adapts to the attributes selected by the user. Main attribute headers and item selection are seen as scrollable menus.

WIREFRAMES

VISUAL DESIGN REFRESH

The current visual design of the Camelia Cake Shop presented accessibility concerns due to its light colour palette as well as typography that may express a modern look but not the elegance that its products suggest. In this refresh, the colour palette was darkened and the typography was updated to match the elegant products.

BEFORE

AFTER

USABILITY TEST RESULTS

A set of usability tests were conducted on three users. The two key task flows that were tested include:

  • Selecting a pre-designed cake and submitting a cake request.

  • Using the Build-Your-Own Cake feature.

Here’s a few high fidelity screens that were tested during this phase:

SUCCESSES

  1. The Build-Your-Own Cake feature was very intuitive.

  2. This ordering process is different from typical cake shops.

REQUIRES REVISION

  1. A few decor options in the cake design process were too vague and may need clarification. (ex. gum paste designs)

  2. Users do not want to go back-and-forth with customizing and being within budget.

  3. Some users could potentially want a pre-designed cake that is grouped in an occasion they are not celebrating.

  4. Restrictions need to be placed on the number of decor items that can be added to a cake. (Maximum: 9)

DESIGN ITERATIONS

  1. A prompt was added to the vague decor items for a user to provide more clarity.

  2. Add a running dollar amount throughout the build-your-own cake feature

  3. Reconfigure pre-designed cake groupings from occasions to design types.

  4. A prompt was added when a user has reached the maximum number of decor items that can be placed on a cake.

BEFORE

AFTER

THE FINAL DESIGN

Camelia Cake Shop is a well-known local cake business that intends on pushing the industry boundaries and sell unique products. With this website redesign, the cake business will continue to think outside the box with the new Build-Your-Own Cake feature. This feature has yet to be seen in the industry and could save bakers and customers time by conveying their cake design ideas effectively. 

THE SCREENS

  • Camelia Cake Shop Homepage

  • Build-Your-Own Cake Feature

  • Pre-Designed Drip Cake

  • Screens (Left to Right): Delivery/Pickup Date, Cake Design Types, Customer Information

THE PROTOTYPE

OWNER REMARKS

“I love how you can customize a blank cake like it’s a canvas. It really helps with envisioning [the cake], which is the main discrepancy I experience with clients. I’ve always wanted a feature like this, but I never knew how to do it. I would need to review the customization portion in more detail as cakes can become very complicated, but I’ll be potentially implementing these designs as a future project.”

REFLECTION/NEXT STEPS

This project was the first time I worked with a real-world client and it was interesting to balance the business owner’s wants and her customers’ wants.

Before this website redesign can be implemented for customer attraction, a few notes should be considered in the next design update:

  1. Create a realistic interactive 3D cake model.

  2. Review all items (i.e., flavours, finish, decor, etc.) in the interactive 3D cake model with the business owner and update as needed.