Optimizing Chat Feature Usability on HappyFresh Post Checkout.
UX team in HappyFresh define North Star as product and team future vision. Below is one of the case study about the journey to reach North Star.
Project summary
When users run out of stock, HappyFresh' Shopper will take the initiative to contact users to offer replacement items based on their preference. One of the ways to communicate with shopper is using chat feature which can be accessed by users on the order details page.
However, our previous Order Details page was quite problematic, which causes a high cognitive load of users and in particular makes them fail to understand how the chat feature works.
The redesign of the order details page aims to reduce cognitive load and increase the clarity of chat features. At the same time, it will allow users and shoppers to communicate smoothly and achieve business goals.
Background & Issues
About HappyFresh
HappyFresh is an online grocery platform that allows people to shop products from partnering supermarkets around the city and has been operating in Indonesia, Malaysia, and Thailand.
Focus area
Based on our data and research team findings, we got numerous usability issues on the order details page. However, in this case I will only elaborate about:
1. Order details tend to cause a high cognitive load
2. Lack clarity of chat case
Based on our data and research team findings, we got numerous usability issues on the order details page. However, in this case I will only elaborate about:
1. Order details tend to cause a high cognitive load
2. Lack clarity of chat case
3. Users didn't received chat notification ; Disclaimer for chat notification issue has been reported and handled directly by tech team.
User issues
1. Order details tend to cause a high cognitive load
It happened because the information presented is too wordy and lack of hierarchy which causes a mental burden for users when consuming this page.
#1 High users cognitive load
2. Lack clarity of chat case
Chat is the contact option that is mostly chosen by users to communicate with shoppers. HappyFresh chat system requires shopper to start conversation first, meaning chat will not be available in the user's app as long as the shopper hasn't started any conversation.
In fact, we failed to provide clarity about that unavailable chat case, it's proven by users behavior researched by our team:
#1 Users open order details page 5 times during order shopping status and at the same time they clicked on the floating chat box when the chat is not available.
#2 When floating button returns no results, user opens the FAQ to find out how to contact the shopper, badly we didn't provide article about contact with shopper.
#1 Users open order details page 5 times during order shopping status and at the same time they clicked on the floating chat box when the chat is not available.
#2 When floating button returns no results, user opens the FAQ to find out how to contact the shopper, badly we didn't provide article about contact with shopper.
What does it mean?
It shows that from the start user needs interaction with shopper and they were looking for the chat by clicking the component which looks related to it. When it ended up users couldn't find the chat, this issue created the wrong perception that HappyFresh doesn't have a chat feature.
#2 Unavailable chat issues
3. Users didn't received chat notification
Issues above are exacerbated by users' complaint to CS that users often didn't get chat notifications but still get others (promo, order delivery, etc) .
Users realize it when they wanted to check the order delivery, they was surprised that there were some unread chats so they miss important chats from shopper. This leaves users confused about how HappyFresh chat works and clearly shows that communication between users and shoppers has been hampered all this time.
Note: chat notification issue has been reported and handled directly by tech team.
#3 Chat notification issues
Business issues
Supported by Voice of Customer data, Out of stock (OOS) items are consistently one of the issues faced by our users in all countries. The action that must be taken if OOS occurs is to replace the product, the problem if there is no replacement is it can increase the percentage of HappyFresh GMV loss. So far, the most efficient method to offer the replacement product in HappyFresh is via chat.
Goals & Metric
User goals
Since the issues related to each other, we planned to revamp the whole Order Details page and want users to:
● Understand every information and feature in order details quickly without burden, minimal effort, and encourage them to act according to the direction of the content.
● Understand how chat feature works
● Increase chat engagement; get them to respond quickly to chat conversations.
Business goals
● Increase OOS replacement rate
● Maximize chat feature usage since it requires costs in maintenance
● The primary metric we’ll be looking at is engagement rate for chat feature
How might we
We list the how might we to help us reframe design challenges to solvable problems:
● HMW simplify content to reduce user cognitive load?
● HMW improves content hierarchy and clarity?
● HMW help users quickly and easily understand how chat works?
● HMW increase user engagement into chat?
● HMW simplify content to reduce user cognitive load?
● HMW improves content hierarchy and clarity?
● HMW help users quickly and easily understand how chat works?
● HMW increase user engagement into chat?
Brainstorming
Next, a brainstorming session was run with the design team, researchers and PM. We involved several teams in this session to open up opportunities for fresh ideas. In this session we generated some ideas and insights, then process it again until we got a solution to be implemented that fit our users' and business goals.
Design process
We poured the proposed solution into the design under team lead supervision. Supervision here means our lead would ensure that we didn't get out of the track, help to keep the users and business in mind and challenge every decision made.
This process required some explorations and discussion until we finally got the North Star design concept which I presented to the PM, the head of design and stakeholders.
#Design process
Design principles ━ Best practice
We also defined design principles to understand what success means from a design perspective:
● Content simplicity, ensuring we provide the most relevant information and reduce number of scrolls
● Clearer hierarchy, reorganize which content that needs more attention and is consumed first by users
● Clarity, providing transparency for each case and communicating it in a better way
● Content simplicity, ensuring we provide the most relevant information and reduce number of scrolls
● Clearer hierarchy, reorganize which content that needs more attention and is consumed first by users
● Clarity, providing transparency for each case and communicating it in a better way
● Reliability, by re-embedding those universal design principles, we expect order details to be a page that users can rely on from the moment the order is confirmed until it is received with their hands.
North Star design concepts
Some feedback has been received and have iterated into design concept, until finally we have the final result for the order details page.
Visual design limitation
The visuals on the final North Star Order Details still use legacy designs system because we didn't have more capacity to update with fresher designs.
#1 High level of order details page
#2 Clearer chat availability & Improvement
Emphasizing for better awareness
Sometimes users tend to insist on tapping the disable button to ensure the condition. We provided a simple animation to emphasize the state of chat so that users can easily recover from this. The video is a loop preview.
Engage more with Out of Stock pop up
By providing clarity for Out of Stock items up front can encourage customers to engage more & make decisions faster.
Results
User Testing
We conducted UT which it yielded good insight. Chat access and unavailable case was well received by users quickly, although on the other hand users hope to be able starting the interaction first without having to wait for the shopper. But so far it's not become a big problem for them as the goal here is to provide better clarity of chat feature.
A/B testing
We also did A/B testing on High level order details page, which resulted the new message box works better. There's 25% increase of chat engagement from users who were experiencing out-of-stock issues during post-checkout in the new variant.
This might happen because by highlighting informations of OOS on users' eye level will increase their awareness hence higher engagement to the chat screen. For new chat feature A/B testing result is currently unavailable because it's still being developed.
New messages box
Takeaways
1. In this redesign I learned more about incorporating business objective into design.
2. Never underestimate small thing in design, because small design change is able to uplifted the experience
3. Work closer with data analysts and researchers to better understand previous and recent data as well as how to combine those data to generate new ideas.