HN PACKAGE BUILDER
ROLE IN THIS PROJECT
I was the Senior UI/UX Designer in this project. I worked closely with the product manager, UX manager and web developers.
DEFINING THE PROBLEM
In-store sale representatives give great advice to their customers. They are able to sell more related products and bundle these items with the main purchase. How does Harvey Norman replicate this online?
Create and develop a 'Package Builder' feature where customers are educated and offered related products at a discounted price once they have added their main purchase to their cart.
Shop with confidence. We give good advice in store, we need to replicate this online.
Sell more accessories online - higher profit, bigger basket size
Planting the seed to buy accessories
Sell more related products
Minimise operational effort
Increase conversion rate
Based on in-store research customers are driven by 2 things - being educated and receiving discounts
Educating customers on how to get the most out of their purchase
Feel rewarded for buying more in one purchase
Making it a good and exciting experience (get everything I need, ready to go, reassurance)
Package Builder In-store Process
Secure the main item
Educate customers with additional items
Discount as an incentive
and to close the deal
We looked at a few possible areas where package building can happen
1. Product page
PROS: User knows what they want, helps the user build a vision of the product along with other suggested accessories, the user is offered at the very start of the buying process.
CONS: The page might be too busy already.
2. Shopping / Cart
PROS: Product has been secured, the customer is making the final decision, the page is fairly clean.
CONS: Don’t want to distract customers, adds technical complexity and higher technical risk.
3. Confirmation screen / confirmation email
PROS: Plant the seed for when they are ready, lots of real estates.
CONS: Feels somewhat cheated, customer needs to go through the payment process again.
4. Add to cart pop-up
PROS: Customer has already selected the product, can be used on most pages, its dynamic and gets
attention, not as busy.
CONS: Hiding the vision until after the decision is made, it's small and customer can close it easily
PACKAGE BUILDER EXPERIENCE
Participants understand the goal of Package Builder. They all concluded that both desktop and mobile versions of Package Builder is clean and easy to navigate through. However, the Package Builder section on the mobile version was missed by 2 out of 3 participants as they did not scroll down and clicked on view cart straight away.
What are the goals of the usability test? What specific questions will be answered? What hypotheses will be tested?
Do participants understand the concept of package builder?
Do participants know to choose a product from each tab/category?
Is the education piece enough for the customer to be curious or interested in adding accessories to their main purchase?
Do the empty slots make the customer click on the tabs?
Do participants know that if they can't find the deal they want they can chat to one of our representatives online?
TEST HIGHLIGHTS & RESULTS
All participants found the UI of Package Builder to be clean and straight forward. One participant said that she normally exits pop-ups but because the layout looked different from what she has seen before, she found herself investigating what was presented to her on the screen.
For the mobile version, the Package builder section can be missed and a slight rework of the top section where the recently added product is shown. Possibly remove the image to allow space for text and move up the Package Builder section or completely rework the top section where you can have an additional button ‘continue shopping’. In this case, users are able to continue shopping. 'Go back' button is not enough for them to know that this also means continue shopping.
For both mobile and desktop version, it is important that we use the right tone of voice as well as the context in explaining what is presented to our users. This is also crucial for the educational pitch for each category. Although participants were reading this, it was still not enough for them to understand how important these recommended products are to their main purchase.
Participants naturally tapped on the icons and all have the same understanding of what these icons are. One particular participant suggested making the buttons more obvious to ensure that they don't get missed. However, 6 out of 8 tapped on the symbol and the other 2 tapped on it when the scenario was changed to ‘add the product to cart and you are also thinking of buying accessories but don't know exactly what to get as yet’.
We may need to change the text to something shorter and more straight forward also to make this text stand out or maybe add the short text in the button.
DESKTOP & MOBILE DESIGN
Here are the final designs based on the guerrilla-test we conducted within the company. The testers were not part of our team but from different teams such as Finance, Online Sales Representatives, Customer Service and Accounts.
RESEARCH, DESIGN, TEST, REPEAT
I’ve just taken you through one iteration of our design thinking process. Here’s a quick recap: we empathised with our user to discover their needs, defined the problem, brainstormed ideas, created a prototype and validated our assumptions through user testing. We learned a lot from our first iteration; the idea is to keep repeating this process until you’re confident that your solution will work out in the real world.