Project - 2020

Heineken DOT B2B platform 






About Heineken DOT


Heineken DOT is a B2B drinks ordering platform, it is a responsive website and available on Android & iOS app store.
I started to redesign for the mobile and desktop version in 2020 with a UI designer. Within less than a year the redesigned platform was launched in Indonesia.
It is currently available in more than 7 countries, such as Egypt, Malaysia, Nigeria, Russia and more.






My Role
  • User research
  • Interaction design
  • UI design support
  • User testing 
  • Project planning


The Goals
  • Improve Customer experience
  • Increase Top line growth
  • Reduced Technical Cost




Challenge



  • Users are  40+ years old, not tech savvy, and we don't have direct access to the users, so building empathy with them is not easy.




Design Process





User research 


It is hard to interview users under the COVID limitations, but luckily Heineken has a very close relationship with local POs, so we sent them a questionnaire in order to gain some insight about users. Heineken also provided us with user research they have conducted before the COVID, which helped us in creating these personas



Personas




User experience map


I created 2 user experience maps from different business scale owners. We listed all the users’ needs based on personas, the final result is the features which we suggested to add in this platform.





Homepage redesign







Problems on homepage:


Our team did an assessment on each page and flow, we combine the user insight from Heineken team to come up with these problems on the homepage:


  • The drop rate is high
  • Poor visual hierarchy, lack of focus
  • No clear guidance to the order flow




     



Goals and Solutions:







1. Engaging users start order from homepage

  • Add outstanding CTA buttons
  • Add a product catalog
  • Add a promo product carousel
  • Change color schemes to be more appealing and



2. Quick access to main features 

  • Add Notification bar
  • Add notification overlay
  • Add setting overlay

2. Gain trust from users

  • Add USP & introduction of this platform
  • Add chatbot give user support
  • Add FAQ
4. Clear visual hierarchy

  • CTA Consistent button styles
  • Use standard color to deliver clear information
  • Design logical space to give more focus




Order flow redesign





 

Problems:


1. Conversion rate is low           
2. Poor visual hierarchy, lack of focus    
3. Filter interaction is low
4. Taking many steps to start ordering 
5. Redundancies in user flow




Combining user research and these problems,
I found the following goals and solutions:





Simplify flow


Users need to select a distributor each time before ordering. We cannot avoid this step but we can streamline it.

Solutions

 
  1. Add a Predictive search bar, when users type on it, it shows the relevant results
  2. Pre-select the last selected distributor option











Give users clear guidance & support



Solutions:


  • Prominent CTA button
  • Simplify quantity button interaction in product card
  • Move the coupon code to the cart section instead of the summary page, so that the user could see the discounted price before checkout
  • 2 checkout buttons - quick checkout without scrolling
  • Add order overview on the top of the cart to provide a glance of the order
  • Add Delete all button on cart page give user a fluent editing experience







Clear product information in the product card


Solutions:

  • Usage of promo label presents a clear visual hierarchy
  • Add inventory level
  • Better organized product package type information


            
                
























Improved Filter design


Solutions:

  • Add a filter overlay while leaving enough space for catalog
  • User can select multiple brands and categories at the sime time with an overview of their selection

We did a usability test for validating the designs, this is the result from the order flow:


+ Users would mostly scroll or use the search bar to find products

+ The users like how the products are displayed, it has all the information they need

+ Customers can see the number of products on the top, that will incentivize them to scroll 












- Users indicated they miss the brand filters on top. The filter button presented in the new design is not being used by any of the participants

- Communication of the featured product is not clear, What does "feature product"means?

- The add to cart interaction is not clear. They miss the ‘regular’ quantity selectors

The learnings


 
Overall the feedback is very positive, testers were very happy when they saw the new platform.

From the negative feedback, we can see that we overestimated users' acceptance. This new design lack enough indication for them, especially since our users are not tech savvy, we need to be aware that every small change for them is enormous, it costs extra time for them to adopt changes.










Iteration after the usability test



Users couldn’t find the filter easily.


 Solution: 

Since users are used to seeing the filter directly on the catalog page, we chose to not hide it under a button. In the new design, there is clear division on brand filters, this makes for more organized and easier to scan visual.















Users doesn’t know what is "featured product”


Solution:

This naming is ambiguous, we changed it to Buyers’ choice, the research shows that social prove has a positive impact on order frequency (+10.4%)

The add to cart interaction is not clear


Solution:

Add quantity selectors gives users clear indication.

 



       

The outcomes


Improved order  via defined metrics on the redesigns, including

•  Reduce y% drop rate on homepage
•  Increase x% conversion rate
•  Increase z% amount of active user

•  User feedback like  "I enjoy the new order flow way more", "I like to come back here and redeem beers"




Highlighted pages


I redesigned the UX for promotions, my orders, order template, rewards, performance, contact us and chatbot pages. I don’t show them all here, but you can see some highlighted pages designs below:








Design system


Another important part of this project is creating a design system for this platform, I have supported our UI designer in completing this design system: