Overview
Modular is a product that allows its users to modify several exterior and interior parts on their vehecle to get closer to their desired asthetics and performance. It provides thousands of car models to its users and a plethora of individualized car parts based on the model of car that you have selected. It provides 2 main services to its users. The first and primary service is to shop car parts for your car. The second service is the ability to have a professional install the individual car parts for a more premium service.
Problem Statement
People are seeking ways to customize their vehicles and hire a professional to install said customizations as a one stop shop solution and there doesn’t seem to be such a service in the market today.
Potential Solutions
Provide people with a product where they can easily find their existing vehicle and see a wide range of possible modifications that they can have installed by a professional with the click of a button or the option to self install via the IKEA model.
Challenges
Obtaining licensing for authorized use of images and 3d models of different car parts, and brands.
Building a product that satisfies the needs of both car enthusiasts and newbies to the car modification industry.
People who have customized their vehicles do not want to be restricted to having to pay someone to install parts.
People who haven’t customized their vehicle before would be wary/less inclined to take the risk of buying car parts with no knowledge or skill to install those parts themselves.
Personas
Based on my research, users would fall into one of two categories - Enthusiast or Novice. Enthusiasts want a trusted service where they can purchase and install advanced mods themselves, while Novists are looking for reasonably priced auto parts and professionals to help install more advanced mods.
Affinity Map
The most important factor that we discovered through affinity mapping is the different comfort levels each individual has with modifying their vehicle(s). Each individual had a reason for being apprehensive to modify their car.
Wireframes
I created several iterations of the modification screen, each with a different harmony between the interactive components, image previews and the 3D car model.
Initially, I thought of a horizontal scroll but quickly found implementing that as the main way to navigate modifications would cause some usability issues.
I toyed with having category rows that would expand and collapse but this would potentially create a very long webpage if all tabs were opened all at once.
I found the best rendition to be navigating via a horizontal tab structure in a more organized fashion. This would allow the user to quickly locate what modification(s) they want to make to their vehicle while also keeping the website simple, clean, and organized. It would also help to reduce the perceived complexity of modifying different car parts on the user’s vehicle.
Home
The home page of Modular was designed to be a gateway to the entire website. The goal for the homepage was to
Leave a lasting impression on those who visit the website and compel them to explore what this product has to offer.
Provide a good representation of the company and its values to potential customers.
Modifications
The modification pages of Modular were designed to be easily navigable. The goal was to
Provide the most relevant information about each auto part/mod selection to educate users
Make it so the product catalog between vehicles and parts were expansive enough for anyone to build out their existing mod so they could accurately build on top of it.
Allow users to determine if they wanted to self install parts or hire a pro.
Checkout
The goal of the checkout page was to
Grant users the ability to determine how and when they would like their vehicle to be transported to the care of the installation team.
Support a checkout experience that streamlines the need for additional information with a concise summary of user selections.
Take aways
Initially, this project had no “why” behind the “what”. I knew I wanted to create a product that allowed its users to customize and modify their vehicle(s) but the question I didn’t address in the beginning is why would such a product need to exist. Why would someone come to this product in the first place? A product that simply allowed people to customize their vehicle with no followup action would quickly lose its value. Once that was realized, I revisited the experience to improve the product strategy based on initial research which led to me expanding on how to better address the needs for both audiences.
This was my first project where I decided to design an experience in dark mode. Learning how to create the right levels of contrast and harmony between elements was especially challenging when compared to creating the same experience in light mode.