Shopify app | Bundle builder
Jennifer Stones
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.
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
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.
