The Beginning
_


Driven by a passion for cars, I created TuneMetrix, an automotive website where car enthusiasts can personalize their sports or daily driving vehicles. Users can compare the visual impact of various modifications by viewing before-and-after images, ensuring a time- and cost-efficient approach to tuning. TuneMetrix not only streamlines the tuning process but also provides a creative and swift exploration of the tuning world through digital interaction.


The Beginning
_

Driven by a passion for cars, I created TuneMetrix, an automotive website where car enthusiasts can personalize their sports or daily driving vehicles. Users can compare the visual impact of various modifications by viewing before-and-after images, ensuring a time- and cost-efficient approach to tuning. TuneMetrix not only streamlines the tuning process but also provides a creative and swift exploration of the tuning world through digital interaction.


Inspirations • Sketches • Figma Screenshot Process


Inspirations • Sketches • Figma Screenshot Process


The Result
_

When completing the exploration of the homepage, users can go to the customize section to start modifying. 
1. Select the Year, Model, and Make of the Vehicle. 
2. Click on the hotspots (Green), then it will show different Rim Brands to choose from at the option panels. 
3. The car will turn into wireframe sketch and can be customized. 


The Result
_
When completing the exploration of the homepage, users can go to the customize section to start modifying. 
1. Select the Year, Model, and Make of the Vehicle. 
2. Click on the hotspots (Green), then it will show different Rim Brands to choose from at the option panels. 
3. The car will turn into wireframe sketch and can be customized. 


Step 1
Chasis Section

Chassis Feature

users can select a variety of exhaust systems from multiple brands and able to 
visualize the noise level of the muffler.

Chassis Feature

users can select a variety of exhaust systems from multiple brands and able to 
visualize the noise level of the muffler.

_

1. Select the icon on the lower right to view the chassis mode.  
2. Select different muffler brands. 
3. Compare to see how loud the new mufflers are.  

1. Select the icon on the lower right to view the chassis mode.  
2. Select different muffler brands. 
3. Compare to see how loud the new mufflers are.  

Screenshot 2024-02-29 at 11.31.10 PM
Banner

Comparison Feature

Users can make a comparison to the modded vehicle in the state of before and after. This feature makes it easier to exchange parts from the original to the modded state. 

Comparison Feature

Users can make a comparison to the modded vehicle in the state of before and after. This feature makes it easier to exchange parts from the original to the modded state. 

_

_

1. Select the Compare Vehicle on the right. 
2. Showcase the difference between the two vehicles of before and after mods. 
3. Click on one of the parts to swap out the parts and select your option either yes or no. 

1. Select the Compare Vehicle on the right. 
2. Showcase the difference between the two vehicles of before and after mods. 
3. Click on one of the parts to swap out the parts and select your option either yes or no. 

STEP 3

CREDITS 
-

PROJECT DURATION: OCTOBER - NOVEMBER 2023 (2 MONTH)
DESIGN INSPIRATION: YEUNSU CHU - HARLEY DAVIDSON WEBSITE

CREDITS 
-

PROJECT DURATION: OCTOBER - NOVEMBER 2023 (2 MONTH)
DESIGN INSPIRATION: YEUNSU CHU - HARLEY DAVIDSON WEBSITE


MORE PROJECTS