How can the Hero integration be prominently introduced into the existing chat menu flow without disrupting the experience of the Aldo site?
The Problem at Hand
A third-party feature called Hero is being brought into aldoshoes.com as a new option in the chat menu. This integration would allow for customers to directly contact store associates for their inquiries about styling and product concerns. The challenge is to be able to introduce this pilot feature in a way that would entice consumers to interact with it.
As I was the lead designer for this task, I was responsible for discovering the most effective solution for the Hero integration. The designs that are now taken into production are the revamp of the chat menu and a Hero pop-up that would vary depending on the page the user is currently on.
August 2021 - September 2021
Before starting any design production, research was conducted on existing customers of the Hero integration. This involves analyzing and auditing websites that are also partnered with this third party. Competitors include Herman Miller, Credo Beauty, rag & bone, and more. The purpose of this research is to identify what UX strategies were used to promote a virtual shopping experience using the Hero feature. After I had a solid understanding of how to introduce the integration, I began iterating on potential design changes for the Aldo chat menu.
Hero Chat Menu Option
I first tackled the design on the chat menu with two distinct styling differences. The upper row screens showcase a full-page overlay design that is consistent with the previous chat menu design look. The bottom row screens introduce a new styling method of having a bottom sheet with a darkened background. After further refinement, the final selection was chosen which had the design of a bottom sheet and the use of emojis for the category identifier.
Currently in Production
The finalized chat menu revamp was launched as of October of 2021 for Hero pilot regions within Canada and USA.
In addition to a chat menu revamp, I decided to design pop-ups that would entice users to check out the Hero integration. These notifications would vary in copy and visuals depending on the page it is activated. The logistics of when and when the pop-up would be prompted were also annotated as a reference guide for the development team. Below showcases a few design iterations, copy considerations, and behavior logic.