2021 Jul - 2021 Sep
Customizing Recommendations
Launching a new feature for B2B e-commerce web application
As a lead designer, I was responsible for:
Interactive prototyping
User testing
User flow
Wireframe
Visual design
Release monitoring
Communicate with stakeholders
Objective
“Design the advanced feature for recommendations”
Example of recommendations experience on client’s shopping site
Recommendations (not “Recommendation” 🙂) is ViSenze’s most popular feature for online retailers to contextually recommend products within end users’ buying journey. To strengthen its proposition in the market, the team planned to introduce an advanced ‘Customization’ feature. With this feature, our client can fully control what’s being recommended - the products (could specify brand, price, color, pattern, etc), the order of display, and the number of recommended products.
Functionally, what to build is already defined as we are enabling backend capability to the frontend. Then how should we form the experience? I was in charge of shaping the experience of it.
Challenge
“How to find the right difficulty level for the expert users?”
Our users are digital merchandisers professionally trained in setting up strategies to enhance product visibility. If the experience is overly explanatory and easy, it will slow down their workflow.
How to make this into easy experience?
Approach
I took a look at industry leader’s experience first to understand terminology, flows, patterns. It seems like there’s no common pattern exist, and interestingly, our users mentioned that they had to go through steep learning curve to get used to each tools. That means, we could be a standard of good user experience.
Reviewing market references
So I did 3 rounds of user testing for this project to figure out an‘ easy enough’ user experience. Each session gave me great hints to further improve. Each round of test was conducted in a similar format, we gave users a set of tasks, and they need to talk aloud while running the task.
Examples of user tasks
Round 1: failed hard
Luckily we tested this! When I walked through the flow with the working team, I received positive feedback so I was somewhat confident in the flow. The testing turned out that no one could clearly understand the UI.
“Need to shift from rule base to human intent”
The language used in the screen was showing ‘mechanism’ of the rule, ‘not the user intent’. It took a while to understand when to choose ‘Boost product’, only when we gave a hint that you may want to promote certain products over the rest, users could choose ‘boost’.
What’s worse was the second level option, no one gets what is ‘input output match’ although it was presented with explanation. Conceptual explanation doesn’t help.
Mental model shift
Round 2: Provide a guide for setting up the rule
Learned from the research, I shifted the experience into ‘intent driven’. Users need to choose ‘what they want to do and specify when and how’. Also to give some more guidance for users to set up the rule I added ‘preset’ - collection of frequently asked rules by our customers.
The result was much better! And this time also the testers gave great inputs;
Everyone loved Frequently used rules! They want to see frequently used rules by default as this would be the guide to set up their rule.
Users want to emphasize when to trigger the rule, in current UI, it’s hidden.
When setting up the details of the rule, no one understood ‘match with
Result analysis
Round 3: Don’t make users start from scratch
I applied the the lessons, did quick sessions with slightly changed prototype. I opened up the frequently use rules and made ‘add if’ to necessary step to specify ‘when’ to apply these rules. This worked, but users gave us the great insight to shift the mental model: start the rule setting from frequently used rules and modify if they want, so that users won’t start the rule creation from scratch. That will shorten the time to set up the rule.
Frequently used rule became the primary flow
Release
With couple of iteration, below are final UI we shipped for MVP of customization.
Select and preview the preset rule
Edit preset rule
Create custom rule
Save for future use
Rule application panel
Result & lesson
We released this feature and received great improvement in our client’s revenue. Eye buy direct saw an increase of $1.2 million in its annual revenue on mobile alone and is seeing a 7% increase in conversions after implementing ViSenze Smart Recommendations
Zalora resulted in a higher engagement rate of more than 10% and increased the average order value by 15%.
This project reminded me of the importance of early testing.
If we didn’t test, the product won’t be so well received. Early test revealed us that we were in the danger of creating a product with mechanical way - users are expert in the industry, but not in system. They don’t have specific ‘rule’ in their mind yet. Showing the guiding rules and let them preview the results and modify from there, is much easier way. And the early test enabled us to quickly change the notion of design.