Enhance purchasing experience

Business Background

Build one solution for 3500+ vendors

BloomNation serves as a platform supporting over 3500 florists in establishing their online stores through white-label services. In the course of organizational restructuring, I worked alongside a Product Manager and Engineering Lead to establish a new growth team to boost the company's revenue by 6%. Our primary focus was enhancing the end-customer experience. My role involved crafting a solution applicable to all vendors on the platform, allowing each shop to selectively disable features based on their requirements. Moreover, we implemented diverse themes and customized CSS for individual shops, providing a unique and tailored appearance.

Goals

Simplify the purchasing process for users who were already interested in buying, enabling faster decision-making and improving conversion rates

After presenting data to our leadership team, we were assigned to reduce checkout duration and minimize drop-off rates on the Product Detail Page. However, as a designer, I did not initially comprehend how these objectives would address the difficulties faced by our end users. I analyzed several user session recordings to observe user interactions within the targeted flow to gain further insights. This review provided valuable information that led me to suggest a more customer-centric objective to the team.

Enable users who intend to purchase to complete the transaction in a single session

Looked deeper into the data and realized that many users drop off from the product detail page (PDP) and return to purchase in a second session.

Help users overcome writer's block during writing card message

The card message people spend the most time on, which is almost two minutes, worth the users' time. The more time users spend, the stronger their connection with the order.

Solutions

Enable users to quickly and easily purchase personalized gifts with transparency and clarity throughout the entire process

To ensure that the final solution is effective and adaptable to various types of vendors while minimizing the risks associated with customization, I propose a prioritization strategy that focuses on solving problems that we have confidence will make a significant impact, supported by both qualitative and quantitative research. Additionally, the solution should require minimal effort from cross-functional teams to implement.

Informed purchasing experience to help consumers make better decisions

Before: lack of pricing and delivery information
After: More accurate product information, including delivery info, pricing, and product image for different tiers, which helps consumers make better decisions with ease

Build a stronger emotional connection to the gift item

Before: When entering a card message, consumers may experience writer's block, which takes about 2 minutes on average.
After: Flowers are often given as a symbol of love and apology. This solution can help people express their emotions more easily through writing without interruption.

Checkout - Payment methods

Before: Credit cards were the only payment method we accepted.
After: Through Stripe, we implemented Apple Pay, Google Pay, Stripe Link, and Afterpay. This leads to a faster checkout experience, especially on mobile devices.
Results

Total checkout time reduced from 6 mins to 4.4 mins. Card message step drop-off rate down from 55.2% to 9.76%. PDP page conversation rate increased from 6.3% to 13.5%.

We received some amazing data from end-consumers after releasing the new features. The solution improved the customer experience with clear information and easy checkout. We also received valuable feedback from florists and made some follow-up iterations based on their feedback. However, unfortunately, this project did not successfully increase our revenue due to a sudden release from our competitor that caused a 70% drop in our traffic from SEO.

Project: Card Message

Help users easier to write an emotional piece

There are two important milestones in this project. The first milestone involves creating a card message component. The second milestone is to use A/B testing to determine the optimal placement of this component within the flow of the project, in order to minimize the drop-off rate

Pain points

After analyzing over 100 user sessions on FullStory, there are two key insights analyzed from the research:

Sympathy is the top occasion associated with card message

The purchaser takes time to carefully craft the accompanying message for the flowers, as it serves as a means to express their emotions, whether it be love or an apology.

Users leave the website and come back during the writing process

One of the major challenges faced during the writing process is that customers often feel stuck when they come across a blank text area.

Key Design Decisions

Make users feel they have control

Instead of allowing users to directly use the suggested card message, we encourage users to use our suggestion as inspiration. Once users fill the text area with our suggested message, they can still edit the message as per their liking.

Don't break the flow

We paid extra attention to the overflow style. Writing an emotional piece is difficult, and we don't want the error message to become a hindrance to the writing flow. Therefore, instead of stopping users, I designed an obvious error indicator and allowed them to keep writing.

Make it a component, so we can test within other page

During the planning phase, we decided to implement A/B testing to determine where to place the card message section in order to minimize the drop-off rate during the purchasing experience. To accomplish this, I designed the card message section as a single component that could be easily implemented in other areas of the flow.

Project: Payment Method

Implement Stripe payment during purchasing

In order to offer more payment options to our users, our leadership team decided to partner with Stripe to test their latest payment feature. However, since we are beta testing this new component, we encountered numerous unknowns during the process. The design challenges I faced were centered around finding ways to minimize risk while still moving quickly to meet our deadline.

Design Challenges

Move forward with tons of unknown information

To mitigate any potential risks, I created a flow that contained all the challenges we might encounter based on the customer's journey, and effectively communicated them with the team. This helped us avoid any future risks and ensured a smooth implementation of the payment component.

Use prototypes to make decisions

During the project, we had a deadline to test a new feature by Stripe. I expressed my concerns regarding the implementation of Apple Pay on the product detail page since customers hadn't yet entered the recipient's address. This conflicted with the leadership's goal of implementing the feature. To resolve this conflict, I combined both hi-fi and lo-fi prototypes to create screens quickly for usability testing and collected feedback. Based on the usability testing results, we decided not to proceed with the project.

Project: Product Detail Page

Redesign product detail page

One of the major changes in the project is to display more information on the product detail page which will be displayed at the beginning of the purchasing flow.

Research & Strategy

Audit based on industry research and competitor

Handoff

Mobile First

The mobile-first experience was designed as 67% of the traffic comes from mobile. The fixed button's performance on different mobile browsers was discussed during handoff.

One solution for 3500+ vendors

As we're implementing the product detail page template for over 3500 vendors, I've been spending a lot of time communicating with the implementation team. I want to make sure that the new design will work even with customized CSS, so we've been brainstorming as many edge cases as we can think of to plan ahead.

Quick iteration after rollout

We get lots of feedback from the shop that this design created tons of problems for them because we set the default to “get it today”, which is too easy for users and they called florists to change the delivery date, even though the data showed that over 96% of our orders are ordered for delivery on the same day.

Before: Default on "get it today"
After: No default selected
Reflection

End-users are just part of "users"

Industry data can be likened to valuable resources that can provide invaluable insights to enhance your business strategies. This data can be pivotal in understanding market trends, customer preferences, and competitive landscapes. Nevertheless, while industry data can serve as a useful tool, it is crucial to remember that the process of validation does not solely rely on this. It is equally important to conduct thorough testing and obtain feedback not only from your end-users, who are the direct consumers of your product or service, but also from all stakeholders involved. This may include your employees, partners, investors, and anyone else who may be directly or indirectly influenced by your business decisions. By doing so, you can ensure a more comprehensive understanding of the impact and effectiveness of your strategies.

> NEXT PROJECT