The British Bake Off Production
The Bake Off Box
A responsive website design for a baking subscription to optimize the subscription model and increase user engagement.
PROJECT OVERVIEW
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?
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.
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.
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
DISCOVER
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
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
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.
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
THE BAKE OFF SHOP
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
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
THE GIFTING PROCESS
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.
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 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
THE COMMUNITY ENGAGEMENT
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?
