top of page
Overview
Aldo x Klarna
Optimizing the chat experience from the very first step.
Overview
Welcome to the new standard of eCommerce! Aldo Group has partnered with Klarna to bring the window shopping experience online for all consumers. With the Hero integration, online shoppers will now be able to directly connect with store associates to ask about styling inquiries and get fashion advice in real-time. To properly introduce the new integration, a revamp of the chat menu was heavily needed for all three brands under Aldo Group: Aldo, Call It Spring, and Globo. Initially, a revamp took place in early 2022 to welcome the Hero integration. Unfortunately, a redesign was requested again due to complications resulting in unwanted user behaviour.
Interested in what the challenges were? Keep scrolling 😊
The Challenge
The Challenge
The revamp of the chat menu for Aldo, Call It Spring, and Globo had undergone two separate deployments due to navigational issues caused by the design. The purpose of the first redesign was to create a grand introduction for the Hero integration in addition to making a more seamless chat experience. A second redesign was needed due to unpredicted user behavior, where shoppers would knowingly select the option to speak with a store associate even though the request pertains more to customer service. Here is a quick recap of the challenges for both redesigns.
The first redesign focused on revitalizing the look of the chat menu in addition to implementing the Hero integration. It originally surfaced as a full-page overlay with two simple CTAs and lots of white space. The first decision was to swap the overlay for a bottom drawer. This allows the animation to seem less intrusive to the shopping experience while supporting a more modernized design. Visual icons were also introduced to differentiate between the CTAs and add to the personalization of the site.
A second redesign was needed due to the feedback on the chat menu’s UI. It had been recorded that around 20% of incoming Klarna (Hero) requests should have been sent to customer service. Inquiries regarding technical issues, past purchases, and promotional discounts were asked of sales associates who then had to redirect the customer to CCC (Customer Contact Centre). This issue greatly lowered productivity and customer satisfaction, which is why a redesign was once again needed.
To define the solution, we first had to identify where the problem lies. An analysis was made to document what requests were sent through the Klarna channel that was intended for customer service representatives. Chat histories were recorded to identify what type of information had been asked of stores associates that were technically meant for the CCC channel. Verbatims were taken to determine key words and phrases that can be categorized under customer services. What we needed to understand is the intent of our users and why they had chosen to use the chat feature in the first place.
A question to consider...
From conducting the analysis, it was discovered that the confusion began at the very first step of the chat experience. Users gravitated towards the first option of the chat menu mainly due to their lack of patience to fully read what each service entailed. There may also be other factors that are hindering their ability to navigate the menu, factors that may have further tested their patience. That being said, it was time for an inspection of the chat menu.
Define & Discover
Define & Discover
Header & Title Clarity
The current chat menu titles lack context. At the first level, users are unable to differentiate between the option to speak with a store associate versus a customer service agent. As a result, inquiries are sent to the wrong services.
Hierarchy of CTAs
One of the restrictions of the current styling is that the top CTA will be most interacted with simply because it appears to be the first out of the list. To prevent this user behavior, the chat options should not be stacked.
Business Costs
The most cost-efficient way to answer the inquiries of a user is to have them visit the help center. That being said, the CTA should entice the users to click on it.
Button Styling
The current stacking of CTAs appears more like a list than individual links. This may have caused further confusion, resulting in unintentional clicking around the menu.
Many iterations were explored prior to finalizing on the final approach. We looked for different ways to address the problems that were discovered in the previous chat menu design. We focused on the key areas: Header & Title Clarity, Hierarchy of CTAs, Business Costs, and Button Styling. We must ensure that there will be no reoccurrence of the same problems to provide clear and seamless navigation in the chat experience.
User Experience
User Experience
slide 1
slide 2
slide 4
slide 1
1/4
Final Designs
Final Designs
We made it! The designs are fully polished and are ready for deployment. After rounds of iterations and gathering feedback from the stakeholders, we have finally reached a design that reinforces the UX that the previous chat menu lacked. As previously mentioned, there are three brands under Aldo Group, meaning each of the three sites had its own menu purposely styled to match with the brand guidelines. Below shows the final looks of the chat menu for Aldo, Call It Spring, and Globo.
Reflection
Looking back 🤔
To be a user experience designer, I must first put myself in the role of the user. We are not creating a design for aesthetics, but a design with a purpose. The main reason the first redesign had "failed" was due to the lack of user understanding. I learned that the layout of my designs can greatly impact the way the information is received. The reason we maintained a list structure for the CTAs was because we had thought it would be the most effective way to present the chat menu options, and do not get me wrong, it is an effective layout but just not for our circumstances. We had forgotten an important rule of eCommerce, which is to avoid cognitive overload. With the amount of information we were showing, it is easy to lose the focus of the consumer if presented in the wrong way. The typical behavior of a shopper is that they are often in a hurry and would not take the time to read word-for-word before making a decision. With the original redesign, the text appears much heavier than they actually are due to the lack of white space. We needed more separation between the CTAs to avoid being visually overwhelming. This is the main objective we achieved with the new design. We had a clearer distinction between all the chat menu options, in addition to some copy changes to target the user's intent rather than whom the user wanted to speak with. With these improvements, we hope to avoid any overlap of requests that are meant for store associates vs customer service representatives.
bottom of page