Role Digital product designer
Team Cross-functional product team
Goal Increase user adoption of product badges in Qubit’s ecommerce platform.
Create a scalable solution to drive towards AI-powered badges.
Summary
I was part of a cross-functional team working on Qubit’s platform for ecommerce merchandisers, enabling users to create personalised campaigns and experiences for their customers. I was tasked with improving the product badging feature to increase customer adoption and create a scalable UI enabling Qubit to add AI-powered badging in the near future. Using iterative user testing and rapid prototyping, we created a feature that drives value for our clients.
User insights
Varied use cases. Users wanted a way to show both product information badges, temporary campaign badges and revenue driving social proof without overcrowding their pages.
More coverage. One thing stopping users from implementing our product badges was the limited coverage. They often found that their badges would either appear everywhere, reducing their effectiveness, or nowhere.
- Unified customer journey. Users wanted consistent badges in the customer journey, from homepage, to category page, to product page.
Users want control. While AI-powered badging looks and sounds great, our users still want control over the when, where and who of their badges.
Keep it simple. Extra functionality can easily get overwhelming for users, we needed to make sure our solution was understandable and could be implemented by users without any technical knowledge.
Examples of product badges
Before: Badging set up page
Phased delivery
To get things out to our users quickly and reliably, we decided on a phased delivery approach:
1. Use cases
Starting with increasing use cases for badging, such as adding scarcity and more flexible product rules.
2. Locations
Next we would increase the locations for badging, for a consistent user journey from category to a product to the basket.
3. AI
Finally adding AI functionality that would create a truly one-to-one personalised experience.
User interviews
With our delivery plan in mind, we wanted to make sure that we made good design choices from the start. We spoke with our users to understand what they were already doing, their pain points and the use cases and functionality they would like from us.
Cross-functional workshop
Next I gathered the product team, along with members of our customer teams to ideate on the future state of badging. This helped us pull out some really insightful engineering ideas and tackle some common pains that the customer team see when talking to clients about badging.
Rapid protoyping
Following our design workshop, I created our first prototype and arranged both internal and external user testing sessions. I then went through several rounds of rapid prototyping, starting at the big problems and then ironing out all the design details until we had something that users understood and wanted to use.
Evolution of setting up badge rules, from the existing page to the final design.
Solution
- Fallback badges. The key update in phase one was a decision table, this would increase the coverage of badges without overcrowding the page. However, users' mental model was that they could add more than one badge to a product, so education in the product was key.
- Separating rules by data type. With the addition of new rules, users easily became overwhelmed with the options and quite often mis-interpreted them. Categorising them based on data types made this a lot clearer and easier to scan.
- Inline inspiration. We saw that users would regularly browse competitor sites for ideas, so we wanted to help users do this within the product. They can trust that their badge is relevant and is set up correctly.
- Additional styling functionality. Being able to set up all our badges in one place was helpful, but when your sale badge looks exactly like your information badge it can lose it’s impact. Allowing users to change the colours and style of their badge created more flexibility.
- Previewing and coverage. The most important thing to users when previewing their badges was to check that it looked correct, so we needed to keep a visual on-site preview, but users also wanted to know how many products would be badged, so we added estimated coverage, so users could be sure that their campaign wasn’t too big, or too small.
Customise your badge showing message recommendations and additional styling functionality.
Outcomes & next steps
- 12 campaigns were launched in the first 2 weeks of launching the closed beta, including several clients that hadn’t wanted to migrate from Qubit’s legacy platform.
- Half of all successful campaigns published in the merchandising platform were driven by the new badging feature.
- Feedback from follow up interviews with clients who had used the feature was incorporated for general release, including additional product rules and alerts.
- Successful AI badging Proof of Concept confirmed our North Star.
- Design and technical scoping started on phase 2, increasing the number of locations badging can be used throughout the ecommerce funnel.
Dashboard showing the number of active users in the platform, with a visible increase when we launched the closed beta in April.
Learnings
- Rapid prototyping in Figma. When we started with so many unknowns, being able to iterate on the designs was key to moving quickly, solving the big problems before spending time on the details.
- Bitesize education. When building a complex feature, setting expectations and understanding early is important. By creating and using empty states, users were able to absorb bitesize pieces of information as they went without being overwhelmed.
- Clients look to us as experts. Building a good tool is not just about the features, but about the relationship. Adding suggested messaging was a real delightful moment and really built trust with our platform.
hello@daniellelast.com
© Danielle Last 2020