AUTODOME ECOMMERCE
UX DESIGN INTERNSHIP
METADOME
Roles & Responsibilities
UX Research
User flows
High fidelity screens
Feature roadmap
Project Context
Fall 2023
Team:
Archisha R.
Harsh P.
Me
Tools
Figma
SVGator
Mixpanel
AUTODOME ECOMMERCE
AUTODOME ECOMMERCE
PROFESSIONAL PROJECT
METADOME
Roles &
Responsibilities
Roles &
Responsibilities
UX Research
User flows
High fidelity screens
Feature roadmap
Project Context
Project Context
Fall 2023
Team: Archisha R.,
Harsh P., Me
Tools
Tools
Figma
SVGATOR
Mixpanel
Tackling the problem - Visualizing Accessories before buying online
Tackling the problem - Visualizing Accessories before buying online
Tackling the problem - Visualizing Accessories before buying online
When designing an developing Autodome, the 3D car configurator that allows users to view and customize cars in photorealistic quality, we realized that this solution does not have to be limited just to potential customers looking to buy a new car.
Turns out, there is a large number of people who want to buy accessories online but are hampered by the user experience and the inability to visualize before they buy.
When designing an developing Autodome, the 3D car configurator that allows users to view and customize cars in photorealistic quality, we realized that this solution does not have to be limited just to potential customers looking to buy a new car.
Turns out, there is a large number of people who want to buy accessories online but are hampered by the user experience and the inability to visualize before they buy.
Confusing catalogues with 1000s of choices that look the same
Confusing catalogues with 1000s of choices that look the same
Confusing catalogues with 1000s of choices that look the same
Every brand has a plethora of accessories listed on their website, making it very confusing and frustrating for the user to navigate and make a decision. Couple that with the fact that there is no proper categorization and the impossibility of visualizing the accessories, it's begging for a drop-off from the website an a lost lead.
Every brand has a plethora of accessories listed on their website, making it very confusing and frustrating for the user to navigate and make a decision. Couple that with the fact that there is no proper categorization and the impossibility of visualizing the accessories, it's begging for a drop-off from the website an a lost lead.
User pain points
User pain points
User pain points
After a survey with 750 car owners and prominent OEMs, we can conclude that:
User Journey
User Journey
User Journey
I created a user journey to map out how Jackson, a car owner, would navigate his current situation, aiming to understand the highs and lows of his emotions while trying to order a spoiler for his car online. This comprehensive visualization provides valuable insights into Jackson’s experience, enabling a targeted redesign to optimize user engagement for brands and satisfaction for users.
Introducing Autodome - Photorealistic 3D car configurator for OEMS
Introducing Autodome - Photorealistic 3D car configurator for OEMS
Introducing Autodome - Photorealistic 3D car configurator for OEMS
Autodome enables brands to offer highly engaging and realistic car buying experiences to their customers. Improve Vehicle Discovery and Sales with Immersive Interactions. Customers can customize their car, select accessories, and place an order from their nearest dealership.
About the project
About the project
About the project
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
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
Challenges addressed
Challenges addressed
1
1
Categorization—We designed a scalable, well-structured accessory list for a seamless user experience.
2
2
Visualization—Users can experiment with accessories, but only one of each type is visualized on the 3D model.
3
3
Logistics & Delivery—We clarified which accessories require professional installation versus self-installation for informed user decisions.
Solving the categorization problem
Solving the categorization problem
Browse Accessories
Different companies had different nomenclatures for the way they categorized products. This was really confusing for users. We came up with a method that would be used across our configurator for each brand.
Browse Accessories and visualize them in 3D
Browse Accessories and visualize them in 3D
Browse Accessories
Choose from a list of categorized accessories. Equip an accessories on the 3D model and view it in real-time. Add an accessory to your cart and check out.
Choose from a list of categorized accessories. Equip an accessories on the 3D model and view it in real-time. Add an accessory to your cart and check out.
Detailed Accessories card
Detailed Accessories card
Detailed Accessories 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. The data points on the card included the thumbnail, name, price, Details CTA, Buy CTA.
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. The data points on the card included the thumbnail, name, price, Details CTA, Buy CTA.
Find all details about the accessory in one place
Find all details about the accessory in one place
Find all details about the accessory in one place
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’.
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’.
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.
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.
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.
Checkout flow - Ordering online was never easier
Checkout flow - Ordering online was never easier
Checkout flow - Ordering online was never easier
Users can add accessories of their choice to the cart and make a purchase with delivery and installation options
Selecting a dealership and/or adding a delivery address
Selecting a dealership and/or adding a delivery address
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, they must choose a dealership:
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
Depending on whether the user has accessories to be delivered and/or picked up at the dealership, they must choose a dealership:
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
Shopping cart
Shopping cart
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.
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.
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.
