Case Study / Desktop Site
B2C E-Commerce

  • Redesign an e-commerce site for TastyCakes Madrid, a small-business bakery bakery that specialises in American style cakes and cookies made with Spanish ingredients

    • Figma

    • FigJam

    • Photoshop

    • Trello

    • Slack

    • Google Forms

    • Google Meet

  • Gabriel James Johnson, UX/UI Designer

    Rosanne Baars, UX/UI Designer

    Murilo Spricigo, UX/UI Designer

    Ziad Alhourani, UX/UI Designer

  • 4 weeks to delivery of high fidelity prototype

  • User Experience

    • Competitive Analysis

    • User Interviews

    • User Survey

    • Affinity Diagram

    • Empathy Map

    • User Persona

    • User Journey Map

    • Problem Statement, MoSCoW Map

    • MVP Statement

    • User Flow

    • Low and Mid Fidelity Wireframe and Prototype

    • User Testing

    User Interface

    • Visual Competitive Analysis

    • Style Tile

    • Design System

    • High Fidelity Prototype

Challenge

TastyCakes, a bakery nestled in Madrid, blends American indulgence with Spanish flair to craft exquisite cakes and cookies. Their unique twist on grandma’s classic recipes, using locally sourced ingredients, sets them apart in the regional confectionery landscape.

TastyCakes’ website faced several pain points, such as navigational complexities, unfocused branding and (most notably) a lengthy check out process. We sought to redesign their digital space to align with TastyCakes’ essence and to better cater to their prospective users’ needs.

Goal

We sought to redesign TastyCakes’ digital space to align with their essence and to better cater to their prospective users’ needs, focusing on the following:

• Streamline Navigation: Simplify the website's navigation to improve user accessibility and ease of use.

• Refine Branding: Align the website design with TastyCakes’ brand identity for a cohesive and engaging online presence.

• Optimize Checkout Process: Reduce the length and complexity of the checkout process to enhance user experience and increase conversions.

• Cater to User Needs: Design with the target audience in mind, ensuring the digital space meets their expectations and needs.

• Enhance User Engagement: Create a visually appealing and intuitive interface that resonates with prospective customers.

UX / Stakeholder Interview

Our research phase began with a stakeholder interview with Susan Kellerman, TastyCake’s founder, owner and lead baker. We formulated general questions based upon initial research into the site, but felt that the most valuable insights would come from facilitating a comfortable interview environment that would be conducive to Susan elaborating in detail regarding her business’s challenges, customers, needs, website and planned future. Susan was incredibly forthcoming and provided us with ample material to move forward.

UX / Features Analysis + Brand Analysis + Competitor Map

From there, we analyzed various Madrid bakeries’ websites, identified their critical functionalities and created a features analysis to ensure that our TastyCakes site redesign would provide users with a seamless experience.

Using the same competitors, we then created a brand analysis that helped us delve further into TastyCakes’ visual identity and values.

With these insights, we created a competitor map to plot TastyCakes market niche as contrasted against some of their competitors. TastyCakes was unique in their focus on locally sourced ingredients paired with their novel emphasis on American recipes.

Click to enlarge.

UX / User Interviews

We then interviewed five users interviews regarding their bakery purchase habits, and then tasked them with completing a purchase on the existing TastyCakes website.

“Wait — why did all these search bars pop up?

“You get three cookies and not one? If I knew that I would have purchased them instead of thinking it was too expensive.”

“I’d rather order from somewhere else than fill all of this out. It’s going to take too long.”

Many users experienced confusion regarding the product pages, citing the multiple search bars and distracting left navigation panel. Others were uncertain about the quantity of items included with the purchase price.

There was near unanimous frustration with the checkout process, with users stating that it felt too lengthy and counterintuitive. The desire for streamlining and more user-friendly navigation confirmed our initial assumption

UX / Affinity Diagram + User Persona + User Journey


Creating an affinity diagram crystallized our findings and helped us to begin understanding them in a more visual way. It was invaluable in revealing patterns and user-centered insights.

These finding were humanised by creating a user persona, “Magnificent Maria,” who personifies the bakery’s target audience — a young professional expat with a penchant for American treats. Her user journey map illuminated pain points in the existing website flow and potential opportunities to enhance engagement.

Click to enlarge.

UX / MoSCoW + Problem Statement + MVP Statement

Drawing on insights drawn from empathizing with our users, we generated three How Might We statements.

Then, utilizing the MoSCoW method, we prioritized features by breaking them up into Must Have, Could Have, Should Have and Won’t Have categories.

We encapsulated these within a simple problem statement, which used this to formulate our MVP statement.

UX / Site Map + User Flows

At this point, we were able to move forward into information architecture. The site map visualised the website’s structure, ensuring a logical flow between sections. The user flow and happy path mapped a user’s journey from discovering products to completing a purchase, maximising ease and satisfaction.

UX / Concept Sketch + User Testing

From here, we were in a good position to rough out some basic concept sketches. We consolidated them and created a prototype to test our assumptions with users (following them through product selection and order). Feedback matched our initial hopes:

“Very intuitive.”

“I don’t have to think. And I like that.”

UX / Medium-Fidelity Prototype + Usability Testing

Insights gathered from user testing refined the designs, leading to a medium-fidelity prototype. Feedback gathered from usability testing was noted and also incorporated into the high fidelity prototype.

“Why is there a search bar in the top navigation AND in the product search? Do they give different results?”

“Are recommended products and featured products two different things?”

Click to enlarge.

UI / Visual Competitor Analysis + Brand Attributes + Mood Board

A visual competitor analysis then ensured our design aesthetics aligned with industry trends while not mimicking competitors. Our exploration of brand attributes culminated in a mood board that captured TastyCakes’ identity — fun, tasty, familiar and homemade.

Peer testing revealed that one attribute we felt strongly about — artisan — was not immediately identified via the mood board. This cut was reflected in our high fidelity prototype.

The style tile defined typography, color palettes and UI elements, fostering a consistent visual language that was carried over into the components and high-fidelity prototype.

UI / High-Fidelity Prototype

Comparison

From left to right are our updated version and TastyCakes’ existing site. I like to think that we were successful in giving users a more comprehensive picture of TastyCakes’ products and services though:

• Streamlined navigation

• Optimized checkout process:

• Enhanced user engagement

Next Steps

  • Continued user testing and desirability testing

  • Iterate and Refine: based on the insights gained from testing, make necessary adjustments and refinements to the prototype

  • Repeat Testing and Iteration: continue iterating, testing and refining until the prototype performs well