The Bake Off Box

WHAT ARE THE CHALLENGES?

THE SOLUTIONS

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:

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 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:

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.

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?