Designing the Ecommerce module for Autodome
--
About Metadome
Metadome.ai (Formerly Adloid) is a B2B software company that builds immersive 3D & XR technology which enables cloud-based & photorealistic customer experiences for brands. Their customers include the likes of MG, Hero, Lexus, Asian Paints amongst many others. I did my first Product Design internship at this company and you can read about my internship experience here 👉🏼
About the project
During my Product Design Internship with Metadome.ai, I primarily worked on a new product suite called Autodome, a web-based 3D car configurator custom-built for car companies that allow users to visualise and configure a photorealistic 3D model of a car they pick. There are three modules as part of this suite:
- Discover: Presentation mode to learn more about the car through video playback, a 3D car configurator which allows the user to visualize and customize the selected car in 3D, and compare mode to compare two or more cars in 3D.
- Ecommerce: Allows users to visualize multiple accessories on the 3D car model and make a purchase
- AI chatbot: Helps users to visualize and customize the car through textual conversations like Chat GPT
Try it out: https://autodome.metadome.ai/
Check out the trailer:
- In this case study, I will be focusing on how we designed the e-commerce module
The e-commerce module
- An intuitive way that lets users equip and visualize multiple accessories onto the 3D car model and make a purchase. The users can pick and choose from a wide catalogue of accessories, and view a photorealistic result of how it would look on the car in real life.
- The users can also make a purchase of desired accessories and either get it delivered or installed at a dealership of their choice.
Challenges addressed
- Categorization — Since we had to design a scalable interface for multiple car companies, we needed to design a well-categorized list of accessories so for a functional user experience. Car companies usually sell hundreds of accessories, if not thousands.
- Visualization — We wanted the user to experiment and equip multiple permutations of the accessories available. But accessories of the same type visualized on the 3D car model should not conflict each other. For example, a user can add different spoilers to their cart, but the can only visualize one at a time.
- Logistics and Delivery — Some accessories can be installed by the customers themselves and others need to be professionally equipped at a dealership. We needed to make these differences clear to the users so they can make a decision.
The Design process
1. Selecting Categories
- The user first chooses the category from a list and then subcategories, after which they pick individual accessories. This made it easy for users to narrow their search. They can also directly search for a specific accessory.
- When the user clicks on the Accessories tab, a panel from the right moves in with options to chose a category. Many of these categories include badges such as ‘Recently added’ or ‘New items’.
- The selected category page opens under which a horizontal carousel of Subcategories is present. The user can surf through the carousel and click the desired subcategory. The results will get populated below as per the subcategory selected.
- Selecting an accessory will equip it on the 3D model. You can also view more details about an accessory or add to cart.
2. Accessory item card
It was very important for the list items to contain a lot of information as these were necessary for the buyer to make a purchase decision. This involved a lot of iterations as shown below:
Finally, we arrived at a solution that accommodates a lot of data but is also scalable and fits with the product very well. On desktop, the card contains a lot of essential data points:
— Thumbnail
— Accessory name
— Price
— Details CTA
— Buy CTA
— Special badges for ‘Bestseller’, ‘New’, ‘Out of stock’, etc.
On mobile, there is not much space to accommodate all these data points. So the user clicks on the thumbnail, and the Name and Price of the selected accessory updates in the bottom bar.
3. Details card
- On Desktop, clicking the ‘Details’ CTA will open a more elaborate card that contains all information about a specific accessory. You can use the arrows on either side to navigate between different accessories. If you want to see how the accessory would look on the car, click the ‘View on car’ CTA. In the case that the accessory being viewed is already equipped on the 3D car model, then the CTA changes to text that reads ‘Equipped’.
- The card contains the following data points:
— Thumbnail
— Accessory name, Price, Colours and the serial number
— Description
— Table of specifications
— View on car CTA
— Buy CTA
— Special badges for ‘Bestseller’, ‘New’, ‘Out of stock’, etc.
Checkout flow
Info: I was only involved in designing the Desktop version of the checkout flow
1. Shopping cart
Here, the user can review the accessories added to cart. The list is divided into two categories:
- Accessories that can be delivered directly home and can be installed by themselves. For example, cushions, tire repair kits, etc.
The user can choose delivery at home, or to pick it up along with the rest of the accessories.
2. Accessories that need to be professionally installed at a dealership such as tyres, spoilers, etc. No choice to be delivered at home will be available.
This resulted in 3 possibilities: Delivery at home and dealership pickup, only delivery at home and only dealership pickup.
2. Selecting a dealership and/or adding a delivery address
- Depending on whether the user has accessories to be delivered and/or picked up at the dealership, the user must next choose a suitable dealership and/or input their delivery address.
- Each Dealership list item provides details of the name and address, distance based on pin code and a hyperlink to maps, estimated delivery date and the number of accessories available.The list of available accessories can also be expanded thereby allowing the user to compare across different dealerships.
- The list of dealership is categorized in order from most to least recommended. Ranking of recommended dealership is based on:
- Proximity to the user’s location based on pin code
- Number of ordered accessories available
If the user has opted for delivery, then they will have to input details for the delivery in the next step:
3. Reviewing an order
After placing an order, it is always possible to view details in order to change address (if possible), tracking shipment, etc. Again, there are 3 possibilities:
- Delivery at home and dealership pickup
- Only delivery at home
- Only dealership pickup
You reached the end!
Working on this project made gave me the confidence the tackle any problem statement with rational reasoning and sound design. This project was done in collaboration with two other designers and we went through multiple rounds of iterations to arrive at a final product.
Follow me on Twitter and LinkedIn, checkout out my portfolio, or drop an email: nihal.palocaren@outlook.com
If you enjoyed this article, do consider 👏👏👏. You will surely enjoy my other ones too:
