Shopify app | Bundle builder

Jennifer Stones

UX Engineer

UX Designer

UI Designer

Figma

Shopify

Low-fi mock ups

Overview

The problem

Before the redesign the bundling process was tangled in complexity. Understanding how to bundle products effectively while offering discounts or freebies proved to be a difficult task for merchants. The convoluted nature of the process led to frustration and inefficiency, stopping merchants from maximising their sales potential. Recognising this challenge as a barrier to success, our focus was on simplifying the bundling experience for our users.

Challenges

Navigating complexity: Bundling products and discounts within the app is very complex, which posed challenges for users in understanding and efficiently utilising its functionalities.

User diversity: Catering to a diverse user base with varying levels of familiarity in bundling concepts, we needed a solution that was intuitive for both novice and experienced merchants.

Integration with Polaris design system: Ensuring integration with Shopify's Polaris design system and guidelines while maintaining the best possible UX.

Technical constraints: Overcoming technical limitations and constraints within the Shopify ecosystem to implement desired UX enhancements and optimise the app's performance.

Feedback incorporation: Effectively incorporating user feedback from various sources, such as interviews, usability testing, and support team insights.

UX Review

What I did

Conducted user interviews with a diverse range of merchants to gain insights into their pain points, frustrations, and needs regarding bundling products.

Facilitated usability testing sessions where participants interacted with the existing app, allowing me to observe firsthand where they encountered difficulties and areas for improvement.

Reviewed support tickets to gather insights from merchants who reached out for assistance.

What I discovered

Merchants struggled with the complexity of the bundling process, particularly in creating and managing bundles with discounts or freebies.

Rules and conditions were a huge pain point. Merchants couldn’t figure out how to achieve the bundles they envisioned.

Many users found the current interface confusing and unintuitive, leading to frustration and inefficiency.

There was levels of familiarity with bundling concepts among users, highlighting the importance of designing a solution that caters to both novice and experienced merchants.

Ideation

User flows

Before wireframing, I mapped out potential user flows to help visualise merchants' bundle building journey. I identified key tasks such as designing bundles and applying discounts. I used these in discussions with the development and support teams which helped weigh up factors like user preferences and technical constraints.

User flows

Low-fidelity wireframes

With the knowledge gained in the UX review, I started drafting low-fi wireframes to map a more streamlined path for the bundling process. These wireframes acted as a guide, directing the design course and making sure every step was easy to understand for users. Through repetitive testing and adjustments, I fine-tuned the flow, always keeping clarity and user convenience at the forefront.

Low-fi mock ups

Polaris design system

In the transition from wireframes to high-fidelity mocks, I made use of Shopify's Polaris design system. With this library of UI components and design guidelines, I made sure there was consistency throughout the interface. This helped to maintained familiarity for users but also expedited the design process significantly. There were some challenges however in finding that some layouts I had hoped to use were not possible using Polaris.

Polaris design system

High fidelity mocks & prototypes

The mocks were a helpful communication tool during stakeholder design reviews. By presenting stakeholders with visually compelling representations of the interface, I was able to explain design concepts, rationale, and proposed solutions.

High-fi mockups

I also created prototypes for specific problem areas in the app. I then conducted A/B testing on these features to determine the most effective solutions. Participants could navigate through the app's interface, interact with various features, and provide feedback. This process enabled me to identify areas for improvement and refine the user experience.

Link to prototype

Specification

For the handover process to the dev team I created specification documentation in Figma which included:

References to Polaris components.

Each modification and new element clearly outlined.

Instructions for implementation.

Unchanged elements were noted.

Responsive aspects of the design - desktop / tablet / mobile.

Edge case handling

Results

Merchant sales

Merchant sales now reach $6,000,000 per month. By simplifying the bundling process and offering more intuitive features, merchants could create more compelling offers, leading to improved sales performance.

Support tickets

A 12% reduction in support tickets related to bundling issues signified an improvement in user understanding and confidence in the app.

Reviews

After the redesign, we received a lot of positive reviews from merchants! These not only validated the effectiveness of the redesign but also serve as social proof for potential future users.

Welcome page

Create a new bundle

Add products to bundle

Set pricing and discounts

Feedback

These guys are good. This app has really helped increase my stores the average check out transaction amount as more customers bundle products.

- Brick loot

Bundle builder is a great product. It has helped increase our sales by a significant margin. More importantly the team has been incredibly helpful. Couldn't have asked for better customer support and onboarding experience. They actually listen to their users! Excited to see what they implement next!

- Kumori

I have tried many different bundle apps and this is, hands down, the best one. This app has helped us increase our AOV by $20! Their support team is amazing as well. 10/10

- Puzzledly

We've been using Bundle Builder for a number of years and the product is excellent... Bundle Builder has definitely saved us a lot of time but more importantly it has led to increased sales.

- Krav Maga Global (UK)

Like this project

Posted Nov 19, 2024

UX design for the Shopify app, Bundle Builder. focusing on the user flow and interactions within the bundle set up process.

Likes

Views

Clients

Eight