The Bake Off Box

A responsive website design for a baking subscription to optimize the subscription model and increase user engagement.

Image alt tag
PROJECT OVERVIEW
The British Bake Off Production

The British Bake Off Production

Background

Client: The Bake Off Box is a monthly subscription service that delivers baking recipes developed by the Great British Bake Off Show directly to your door.

Each box brings a baking recipe along with a recipe card, dry ingredients from British suppliers, and Bake-Off branded baking equipment.

*All product images used in the project are provided by the British Bake Off Production team.

UX Technique Used

  • Competitive Analysis

  • Heuristic Evaluation

  • User Persona and User Flow

  • Wireframing and Prototyping

  • Usability Testing and Iteration

Design Team

I collaborated with another designer from mapping out the problem to delivering the final design solutions.

My Role

  • UX Research

  • UI/UX Designer

  • Design Strategy

Timeline

  • 6 Weeks Engagement

Tool Used

  • Adobe XD

  • Miro

  • Photoshop

  • Illustrator

WHAT ARE THE CHALLENGES?

Image alt tag

Upsell the Bake Off Shop

In addition to selling the subscription boxes, the client wants to boost sales on the bakeware as well.

Although there are only a few products now, the Bake Off Shop will become a significant part of the business going forward.

Image alt tag

Engage the Gift Recipients

The boxes are popular gifting items during Christmas and other special occasions. 

However, due to UK's Global General Data Protection Policy (GDPR), the Bake Off Shop can't directly communicate with the gift recipients.

Image alt tag

Get the Bakers Involved

The client received overwhelmingly engaged responses via user surveys that the customers want to be more involved in the choices of recipes and bakeware items that go into the next box.

THE SOLUTIONS

The Bake Off Shop

Upselling the Bake Off Shop

  • Smart recirculation between the Bake Off boxes and related bakewares to boost overall sales

  • Personalized recommendations of frequently bought together items to create upselling opportunities

  • Be visible of system status by providing clear and persistent interaction when adding item to the cart followed with a confirmation

  • Cart preview on hover, allows users a quick look at the shopping cart without navigating them away from the products they're currently browsing

Redesigning the Gifting Experience

  • Reduce friction in the gift shopping experience by providing convenience for the users to make the purchase in the least possible steps

  • Create as much gift excitement as possible for the gift redeem experience to optimize customer experience

  • Obtain the recipients' contact information strategically by giving the right context and clear reasons

Building Community Engagement

  • Involved the bakers in the selection of upcoming recipes or bakeware by hosting a poll on the home page

  • Provide the users with voting progress and results

The Bake Off Box - Baking Subscription eCommerce
DISCOVER
The Bake Off Box - Baking Subscription eCommerce

DEFINE PROJECT SCOPE

#1: Asking the right questions

After meeting product owners, marketing teams, and engineers with a clear understanding of Bake Off Box needs, I identified two main areas to provide support:

  • Research on current subscribed community and engagement to drive more awareness

  • Redesign the recommendation model for subscription to increase the overall conversion rate for both mobile and desktop users

#2: Narrowing down problems

After validating with the stakeholders, I further break it down into three focus areas:

  • 1st Priority - Bake Off Shop, Shopping Cart & Checkout

  • 2nd Priority - Gift Shop and Gift Redeem

  • 3rd Priority - Community Engagement

The Bake Off Box - Baking Subscription eCommerce

USABILITY HEURISTIC EVALUATION

Before diving into each challenge, we conducted a usability heuristic evaluation on the current site based on Jakob Nielsen's 10 general principles for interaction design.

Here are some areas that can be improved:

  • Consistency and standards: Standardize information on each card that meets customer's expectations. The "Add to Cart" button and a shopping cart icon used side by side might cause confusion to users.

  • Flexibility and efficiency of use: Provide short cut and a "Add to cart" button when presenting gift options to users

  • Help users recognize and recover from errors: Keep users informed where they are in the process and where to go next

DEFINE
The Bake Off Box - Baking Subscription eCommerce

DEFINING USERS

Upon thorough analysis of user insights from the social media community and feedback from past customer satisfaction surveys, I found that women aged between the age of 40 to 50 years old take up the majority of the existing customer base, and highly likely, they are fans of the British Bake Off Show.

Creating a user persona using customers' insight helps me understand the users' needs, goals, and behaviors. Mary Watson is a fictional character presenting the ideal customers of the business, which will set as a guide in the design process.

The Bake Off Box - Baking Subscription eCommerce

PROBLEM STATEMENT

After problem identification and user analysis, I focused on working towards these three challenges so as to achieve the ultimate business goal: increase conversion.

In the following section, I will go into detail on how I solve each challenge.

CHALLENGE 1
THE BAKE OFF SHOP
Current Shop, Product, and Shopping Cart Screens

Current Shop, Product, and Shopping Cart Screens

UPSELLING THE BAKE OFF SHOP

Top Priority

  • Challenges: Both boxes and bakewares get enough attention and increase conversion on the checkout process. Create a better shopping experience with ample upselling opportunities throughout the process

  • Areas to focus: Bake Off Shop, Shopping Cart & Checkout

  • Constrains: The client operates on a low margin, hence not able to afford coupons for stimulations at this moment

  • Deliverables: Wireframes & High Fidelity Prototype

Direct and Indirect Competitors

Direct and Indirect Competitors

COMPETITIVE RESEARCH

I looked into similar subscription services in the US and UK market followed by the UX Guidelines for Ecommerce from Nielson Norman Group.

After brainstorming with the designer on the team, we came up with many solutions to enhance the user experience for the persona.

The features we decide to proceed with are:

  • Shop list page: Provide hero images and the category menu to provide clear product organization

  • Product detail page: Provide cross-selling opportunities between baking boxes and tools. Utilize customer reviews and ratings to bring trust and credibility

  • Add to cart: Provide clear, persistent feedback when adding an item to the cart by adopting a slide-down window

  • Cart preview on hover: Allow users a quick look at their shopping basket and express checkout

  • Shopping cart: Present recommendations to upsell related products

LOW FIDELITY PROTOTYPE

After conducting usability testing externally with 5 enthusiastic bakers and internally within the company, here are some key findings:

  • Provide a search function on the Shop Page

  • Provide CTA button and recommendation above the fold per request from product owner

  • Users can access the full shopping cart by clicking the cart icon. However, after applying the hover to preview cart function, we drove users' attention to the slide-down window. How can we guide the users to view their full shopping cart more easily?

FINAL HIGH FIDELITY PROTOTYPE

Major iterations are:

  • The search function has been added to the shop page

  • The "View Shopping Cart" button is provided when previewing the shopping cart.

  • A list of recommendations are presented above the fold to better upsell related products on the shopping cart page

  • Enlarged the "Add to Cart" slide-down window for better accessibility

THE RESULTS

Stakeholder:

The client is satisfied with the shop page that it looks more professional and organized. The carousel view on the shop page and product detail page provide a great opportunity to showcase their product.

Participants:

100%

Users are able to complete the given tasks during the high fidelity testing and felt the site is easy to navigate

80%

Participants would like to view the full shopping cart before they proceed to checkout.

60%

Navigate to the check out page via the "View Full Shopping Cart" button from the slide-down window

CHALLENGE 2
THE GIFTING PROCESS
Current Gift Shop Page

Current Gift Shop Page

REDESIGNING THE GIFTING EXPERIENCE

Second Priority

  • Problem: Redesign the gifting experience so the client can capture the email addresses of recipients. This allows client to start a channel of communication to better engage with the gift recipients

  • Areas to Focus: Gift Shop and Gift Redeem Process

  • Constrains: Due to the GDPR rules in the UK, the buyer would not able to input the recipient's email on his/her behalf

  • Deliverables: Wireframes & High Fidelity Prototype 

COMPETITIVE RESEARCH

After conducting competitive research on popular gift shopping e-commerce models such as Birch Box and Red Letter Days in the UK, we brainstormed various solutions as a team.

Taking the pros and cons of each of the solutions, we decided to proceed with the last option: Creating an Account to Redeem Gift via a gift redemption code.

But the challenge is how can we make the redeeming process more inviting and engaging for the recipients if they have not heard about the brand before?

VISUALIZING THE USER FLOW

I redesigned the user journey to a more interactive experience where the recipients can activate the gift subscription to start the channel of communication. Though it seemed more steps, this can be set as a starting point when gift customization is introduced in the future.

In order to visualize all steps a user would take to accomplish his/her goals and better get my design ideas across, I created user flows from both buyer and recipient's perspectives.

LOW FIDELITY PROTOTYPE

Gift Shop Page:

While conducting heuristic analysis on the current site, in order to learn more about each gift bundle, it directs the users to another page. Missing the "Add to Cart" button on the gift page might impede conversion.

The product owner greatly supports the idea of presenting the gift options on the Gift Shop Page from the wireframe I designed but in a way that is consistent with the Bake Off Shop.

Gift Redeem Process:

The gift redeeming process is built from scratch. When tested, 100% of the participants completed the tasks, they are familiar with the pattern. However, 60% of them are curious about the benefits of registering an account with the brand.

The Bake Off Box - Baking Subscription eCommerce

FINAL HIGH FIDELITY PROTOTYPE

Major iterations are:

  • Converting on the gift shop page: Gift product information is provided on the Gift Shop Page with a straightforward "Add to Cart" button

  • Storytelling on the gift redeem page: This is a great opportunity for us to acquire new customers since the recipient might be unaware of the brand. We want to introduce the brand to the recipients with a touch of excitement

  • Strategic circulation on the confirmation page: In order to provide upselling opportunities to recipients once they have redeemed the gift on the confirmation page, we would like to circulate them to the Bake Off Shop page to continue exploring the site

The Bake Off Box - Baking Subscription eCommerce

THE RESULTS

Stakeholder:

This helps the brand to attract new customers from a business standpoint and sets the foundation of bringing customization to the gifting experience in the future.

Participants:

100%

Participants are familiar with the pattern of registering for an account first and then redeem the gift.

80%

Participants would prefer the new version because it is easier for them to acquire recipients' email addresses than their shipping addresses. Sometimes, they may accidentally take away the surprise elements from the recipients by asking for the home address.

CHALLENGE 3
THE COMMUNITY ENGAGEMENT
Current Social Media Showcase on the Website

Current Social Media Showcase on the Website

COMMUNITY ENGAGEMENT

Third Priority

  • Problem: Involve users in the choices of recipes and bakeware items that go into the box as a first start to engage our community on the website

  • Constrains: The client operates on low margin, hence can't provide customization towards Bake Off Box

  • Deliverables: High-Level Research and Prototypes

COMPETITIVE RESEARCH

After conducting intensive market research, I have synthesized two methods to involve users in their choice of recipes and bakewares of upcoming boxes.

  • Host poll on the home page: Inspired by the vote for your favorite red carpet looks, we can adopt the same UX practice to engage customers to participate

  • Host poll via social media: Use Facebook or Instagram Story function to host a poll where the users can vote through various social media channels

FINAL HIGH FIDELITY PROTOTYPE

The area I focused on is #1 hosting a poll on the home page, I provided 2 options that aligned with the brand aesthetic and user interface:

  • OPT A: Preview results while voting, vote via the up button

  • OPT B: Vote via checkbox options

The product owner is satisfied with both options, A/B testing needs to be conducted to determine the final recommendation.

RESPONSIVE DESIGNS

Ensuring the user experience is successful on various devices, we created mobile experiences for the challenges we need to solve.

Click here to view full Style Guides for Desktop and Mobile.

TAKEAWAYS

LEARNINGS

Collect the dots before trying to connect them.

#1 Don't take it for granted

While conducting the competitive research for the product list page, I thought about adding a “Quick View" function to increase conversion since 48% of e-commerce sites are using it.

However, after further research, this feature may cause usability issues on a larger-scale usability study where the customers may misinterpret “Quick Views” for product detail pages and cause confusion about the site hierarchy. Instead of blindly assume a function would work just because it is a common practice, we should conduct usability testing or A/B testing to make the final decision.

#2 Practice mindfulness in UX

  • Be mindful of the constraints: Especially working with clients in another country, it is important to be aware of the regulations and related policy upfront.

  • Collaborate consciously: Since the client is using a Shopify template, it is important to be mindful of the existing framework and collaborate with cross-functional teams on adding or changing features to ensure it is compatible with the current setup. Conscious collaboration facilitates team commitment.

#3 The importance of usability testing

One of the challenges I met in the project is to convince the stakeholders to invest time in user testing when we have a tight schedule.

I started by letting the product owner understand the benefits of the testing that design-centric companies have a higher ROI and it offers a window of opportunity for the entire product team.

In the end, I successfully persuaded the stakeholders to invest time in testing. We set usability testings as an objective framework to make product and design decisions especially when we have two features that we don't know which one is better. Talking to the users not only helped me gain usability and iteration insights but also provide inspiration for potential possibilities and challenge me to solve problems in a user-centered approach.

WHAT'S NEXT?

  • Conduct A/B testing on the community engagement: Suggest to conduct A/B testing on the 2 options I proposed for hosting a poll to vote for the upcoming recipes to gain deeper user insights

  • Email design for gifting redeem: How Might We improve the usability of emails in the gift redeem process and convert the recipients after their gift subscriptions expire?

  • Gift returning: The order return is critical for customer retention. Gift experiences are personal to the users and returning experiences may be awkward. How Might We adopt UX practice to build a better user experience for gift returning?

"It has been absolutely a pleasure working with Di, and I'm always happy to see her work. Di and the team managed to complete the project in an organized way with high quality."
Said Julie, the product owner from The Bake Off Box
The Bake Off Box - Baking Subscription eCommerce