Site Redesign
.png)
Background
I have always loved cars and have worked in the auto industry previously. Unfortunately my joy of experiencing cars has been dulled by poor user experiences. So many websites in the auto field lack good design. Mr. Kustom's website, an auto shop Chicago, is one of those sites.. I saw an opportunity to redesign the site into a really exciting product that gave users an amazing experience likened to what they would receive from high end car manufactures like Lexus and Audi.
-
Project - Responsive web application redesign
-
Role - UI designer
-
Duration - 2 months
-
Tool - Figma
Initial site
Inconsistant text
Broken links
Confusing navigation
Outdated poor quality images
The website left a lot to be desired. Using it was frustrating. There were many inconsistencies in style and use. Some buttons and links were no longer working, including the main CTA on the home page.
Visually the website was not appealing. The design themes were outdated and the UI elements added to the cacophony.
There was a lot of room for improvement.
Design process
01.
Discover
Industry analysis
Hypothesis
02.
Define
User persona
User stories and flows
Ideate
Initial wireframes
Mood board
04.
Prototype
Style guide
Final Prototype
Discover
Industry analysis
In this well-established industry, the online presence is notably outdated, lacking in aesthetics and functionality. Despite the maturity of the products, the prevalent issue is the lack of modern web design. My focus in redesigning the shop's website is to elevate it beyond competitors by delivering a superior user experience. Through comprehensive research on similar shops in the area, this redesign project will significantly outpace competitors. The outdated and broken state of the website poses a significant challenge for users, impacting their experience by not being able to navigate clearly through the site.
Proposed solution
The proposed solution involves a user-centric redesign for a more intuitive and modern interface, responsive design for cross-device functionality, technical upgrades to address existing issues, and a content refresh to provide users with up-to-date and engaging information.
Define
User persona
Carl Andrews
Age: 35
Occupation: Nurse practitioner
Residence: Austin Texas
Marital status: Recently divorced
Hobbies and pastimes:
-
Works long hours so doesn’t have much free time.
-
Is passiona4te about work and likes to golf.
-
Is looking to get into cars and recently purchase a new Audi S5.
Goals
Carl wants quality work and a professional experience he can trust to take care of his new car. His goal is to have a very clean and nice car that is fun to drive and looks great for a long time
Frustrations
Due to shady and sloppy work he has seen in the past and a general apprehension of mechanics. He wants a fun car to drive around and doesn’t want any work done to his car that will
make it less reliable.
Motivations
Carl has a new car and really wants it to stand out. He wants it to be fast and turn heads. He wants to be in the car community but doesn’t yet have the technical skills to do the work himself.
“I just don’t want some random mechanic ripping up my new car. I want it modified right.”
User stories and flows
Purchase a product on the website
Carl tries to purchase a light kit for his Jeep. He goes on the site and finds what he wants and purchases the set up to be shipped to his residence.
Set up a service at the shop
Carl wants to get wheels for his new car. He looks around and decides to contact Mr. Kustom to schedule a service.
Build an example of what your car could look like
Carl wants to visualize what possible upgrades could look like on his car. He goes on the site and selects the build my car button.
Ideate
Mood board
Prototype
Style guide
Final prototype
What I learned
-
Grew in visual design skill.
-
Learned stepping away from the design and getting feedback from others can help stay on track with goals.
-
Grew more comfortable with Figma especially in areas of prototyping and plug-ins.
-
Learned importance of image usage and how large of an impact the images chosen can have.
.png)