4WheelParts

ROLE // Visual Designer

ROLE // Visual Designer

PROJECT // UX/UI Redesign

PROJECT // UX/UI Redesign

TEAM // Classic City Consulting

TEAM // Classic City Consulting

Project Overview /
This project was a UI/UX redesign for the e-commerce website of auto-parts retailer, 4WheelParts
The challenges and goals of this project were to

  • Modernize the website to give it a more updated look and feel.

  • Make navigation simpler and easier

  • Guide users to select their vehicle to enhance their shopping experience

  • Shape the user experience around their selected vehicle, leading them to auto-parts that will fit their vehicle.

Project Overview /
This project was a UI/UX redesign for the e-commerce website of auto-parts retailer, 4WheelParts
The challenges and goals of this project were to

  • Modernize the website to give it a more updated look and feel.

  • Make navigation simpler and easier

  • Guide users to select their vehicle to enhance their shopping experience

  • Shape the user experience around their selected vehicle, leading them to auto-parts that will fit their vehicle.

A picture of a desktop computer showing a before and after photo of the 4WheelParts home page redesign.
A picture of a desktop computer showing a before and after photo of the 4WheelParts home page redesign.

The Original

The Original

With the above challenges and goals in mind, we set up to understand where their current website was falling short, and found key areas where the UI/UX could be improved to create an easier, simple, user-centric experience.

A big part of my role in the project was finding visual solutions to draw the right attention to the right places, so that users could have an optimized experience. While 4WP wasn’t doing a full re-branding, we were able to set them up with a new, updated design system for their site using their established fonts and color schemes.

With the help of my team, we identified areas that needed to be reworked and features that could be added to create an easier, simpler, user-centric experience.

A picture of the old 4WheelParts home page
A picture of the old 4WheelParts home page

Original Website

A photo of the old 4WheelParts product list page
A photo of the old 4WheelParts product list page
A photo of the old 4WheelParts Product Page
A photo of the old 4WheelParts Product Page
A photo of the old 4WheelParts Shop By Vehicle page
A photo of the old 4WheelParts Shop By Vehicle page

UI / UX Improvements

UI / UX Improvements

A picture of a figma board showing the high number of frames designed
A picture of a figma board showing the high number of frames designed

A big part of the 4WheelParts experience is selecting your vehicle. We wanted to make selecting your vehicle feel less like a random form to fill out, and something that was more inviting, almost like the obvious action to take on the website, without being ugly and obtrusive.

Since entering your vehicle was such an important part, we thought the landing page for a selected vehicle should be one of the most engaging pages on the website, and that it could definitely use a refresh.

We wanted to increase visibility for what products fit the users’ selected vehicle, as well as inform them on the inventory status of the items they were looking at

A picture of the new 4WheelParts product page (Desktop)
A picture of the new 4WheelParts product page (Desktop)
A picture of the new 4WheelParts product page (mobile)
A picture of the new 4WheelParts product page (mobile)

Product Detail Page

A picture of the new 4WheelParts Shop By Vehicle page (desktop)
A picture of the new 4WheelParts Shop By Vehicle page (desktop)
A picture of the new 4WheelParts Shop By Vehicle page (mobile)
A picture of the new 4WheelParts Shop By Vehicle page (mobile)

Vehicle Landing Page

Results and Reflections

Results and Reflections

A picture of the new 4WheelParts Home page
A picture of the new 4WheelParts Home page

I was really grateful to get to work with a good team of designers (Shout out Santiago Gomez and Scott Cook) as I learned a lot from them. This was also my first experience working within the guidelines of a specific web framework which was a learning experience for me as I sometimes had to “paint by numbers” a bit more than I hoped to.

Additonal Images

Additonal Images

A picture of the new 4WheelParts Nav Menu
A picture of the new 4WheelParts Nav Menu
A picture of the new 4WheelParts product detail page
A picture of the new 4WheelParts product detail page
A picture of part of the new 4WheelParts Home page
A picture of part of the new 4WheelParts Home page
An image of a 4WP Protection Plan pop-up modal
An image of a 4WP Protection Plan pop-up modal
A picture of the new 4WheelParts vehicle page featured parts section (desktop)
A picture of the new 4WheelParts vehicle page featured parts section (desktop)
A picture of the new 4WheelParts vehicle page featured parts section (mobile)
A picture of the new 4WheelParts vehicle page featured parts section (mobile)
A picture of the new 4WheelParts home page CTA section
A picture of the new 4WheelParts home page CTA section

Wanna chat?

Wanna chat?

Feel free to reach out to hello@sethhalldesign.com

Feel free to reach out to hello@sethhalldesign.com

Projects/

Contact/

Your scrollable content goes here