Revamping a cart widget
For Gandi – 2021
Gandi is a french domain and hosting provider, offering more than 750 different domain extensions. The company manages more than 2.3 million active domain names, 20 000 hosting customers and more than 100 000 websites.
About Gandi
In order to acquire new customers and to build customer loyalty, Gandi seeks to improve the user experience from purchase to management. In this perspective, the shop, the cart, the purchase funnel should be improved and modernized. The cart widget, which is a kind of summary of what you have in your cart, had to be modernized and deployed everywhere on the product.
Context
The cart widget that existed was quite archaic and was dependant of the content, leading sometimes to hide some major contents such as button. Because of that, the cart widget was available only within the shop. The final goal is also to be able to offer suggestions in a dedicated space to improve the customer experience and increase the average basket.
The problem
User goals
Be able to see a summary of my cart at anytime anywhere in Gandi’s application.
Business goals
Modernize purchase experience through a usable & modern cart widget
Add product suggestions
Increase average basket
Design challenge
Design a feature that is everywhere : admin, shop, cart overview, purchase funnel.
Design a feature that we know will quickly evolve
Manage a lot of product for our advanced users
Manage different country, currency, VAT, owner organization
Manage information when user is logged and when user is not
Challenges
I designed the feature through research, wireframing, visual design, interaction design, prototyping and cross-team collaboration.
I worked closely with the product manager and with the front-end dev team to understand technical constraints and ensure design quality standards. And as usual, I worked with the design team to share the different decisions, design reviews and also to improve the design system.
Team & Role
Design process
First thing first, I needed to know what could be displayed in this cart widget, so I took inventory of the products. This inventory allowed to establish rules to create a modular way to construct a product in the cart widget.
At the same time, we research with the UI engineer what could be the display and also the best way to create this cart widget with react to have the most accessible widget. Our constraint was also to make it work with the different layout that we have in admin and in shop. We did a lot of research, benchmark to see what was the pattern of this kind of feature. We also push tried to push the limit in this discovery with some wireframe ideas that we knew was not technically possible.
Discovery & Ideation
As this feature was cross product, we chose that this will be the first step to the whole design revamp. We chose to work with white background and a minimal styling.
Design
Product display
Cart widget construction
Depending on where the cart widget is displayed and whether the user is logged or not, wether there are products or not, we have different usecase and manner to construct the cart widget.
Cart widget open or close - Visible or hidden
Depending on where the cart widget is displayed, its whole behaviour can change.
In shop, the cart widget can be fixed allowing user to benefits from the future suggestion feature wherease user should not be disturbed by this cart widget when managing products in app.
Solution
Iteration & improvement
Rework the “added to cart” notification behaviour when cart widget is fixed as these notifications are redundant. ➝ dev WIP
Rework the cart widget footer to implement the chat widget ➝ it will be rework again on next step because of a new chat button. ➝ dev WIP
Improve micro-interaction on appearance and disappearance of products and cart widget. ➝ design WIP – low prio
Add the suggestions feature and define when and which suggestions should appear. ➝ dev WIP
Cart overview redesign to provide purchase option / upsell to our users. ➝ dev WIP
Further improvements on shop and purchase funnel. ➝ design WIP