ITIS 4390 - Interaction Design Project
RockAuto Redesign
See More
-
See More -
Project Overview
My Role: Information Architect
For the RockAuto redesign capstone project, my team and I transitioned from a cluttered early 2000s interface into a logical and scalable site tailored for automotive enthusiasts. I restructured the website hierarchy to streamline the massive parts inventory into an intuitive navigation experience through smarter filtering and personalized vehicle profiles. My architectural work focused on reducing cognitive load and increasing user trust by ensuring every technical detail was easy to find and compare.
Low Fidelity vs High Fidelity
Homepage Transformation
With over 70% of survey participants rating the original site design negatively, our team prioritized a complete structural overhaul to restore user trust. I evolved the initial low fidelity wireframes into a high fidelity interface that replaces cluttered text lists with a clean search-first entry point and organized category cards to dramatically reduce cognitive load.
Rebuilding Checkout Trustworthiness
Because our research identified a lack of visual security as a major deterrent for users purchasing expensive imported parts, I focused the high fidelity transition on professionalizing the checkout architecture. We replaced the outdated and cluttered list format with a clean modular design that clearly validates shipping costs and payment security. By implementing interactive feedback loops and a transparent order summary, we addressed the trust concerns of eighty percent of our users and ensured a reliable path to purchase.
Ideate, Prototype, & Test
Empathize & Define
Understanding the Car Enthusiast
The goal of this redesign was to transform the part ordering process into a more trustworthy and efficient experience for mechanics and car owners with repair/modification needs. Through a targeted survey of our primary demographic, we discovered that while users valued the vast inventory of the original site, they found the appearance outdated and the transaction process visually untrustworthy. Our research highlighted that users working on imported project cars needed to feel secure when entering payment information for parts shipping from across the globe. By placing these user stories at the center of our process, we identified that the product must display a modern and secure look while fostering strong design practice.
Identifying the Structural Friction
Our analysis of the survey data confirmed that the core user base consists almost exclusively of individuals facing urgent car troubles or those managing long term builds. We realized that for these users, a lack of visual hierarchy and confusing iconography led to significant cognitive load during a time of high stress and annoyance. We needed to architect a system that validates the user's expertise while providing a professional look that feels as reliable as the parts being ordered.
Iterating With Users In Mind
During the ideation and prototyping phases, I led the rapid translation of user insights into a functional framework by prioritizing high impact features like the smart search algorithm and the saved vehicle garage. Our initial brainstorming involved a collaborative sketching process where the team selected the most effective structural elements to move into low fidelity wireframes in Figma. These early wireframes focused specifically on solving the two most critical pain points identified in our research: the poor search accuracy and the frustrating inability to save vehicle profiles for repeat customers. We conducted usability studies on these low fidelity prototypes to evaluate the navigational flow and structural feel, ensuring the information architecture was sound before committing to visual details. Following several rounds of group user studies, these structural and visual systems allowed me to iterate into a high fidelity interactive mockup that achieved a 95% task completion rate. Our final validation testing proved the success of this architecture with average task difficulty ratings staying remarkably low between 1.4 and 2.17 on a 5 point scale. This data driven approach confirmed that our redesigned system provided the clarity and trust that users found lacking in the original platform.
Original & Current RockAuto Homepage:
Our research confirmed that the original homepage layout creates immediate friction due to its outdated nested accordion and sheer amount of text. Users reported that the lack of a useful search feature and the requirement to scroll through thousands of irrelevant vehicle years and models led to significant cognitive fatigue. The original and current homepage is cluttered, lacks useful iconography, has a pop up that causes further unnecessary friction, and a ‘quick cart’ that doesn’t do much to ease a nervous mind.
Rewarding Repeat Customers
One of the most glaring missing core features is a method of saving vehicles for easier repeat use. Our research reflected that forcing repeat customers to navigate a redundant search process for every order is extremely tedious. By implementing a persistent vehicle profile system in our high-fidelity redesign, we eliminated these repetitive steps and provided the streamlined efficiency car owners need to manage their projects with ease.
This project was my first deep dive into the true power of using Figma AI for Auto Layouts. I moved away from just drawing mockups to creating a responsive UI engine. By leveraging Figma AI, I was able to rapidly generate and test multiple layout variations, allowing me to focus on the creative problem-solving while the AI handled the repetitive grunt work of layer organization. This combination of technical precision and AI-assisted speed allowed us to manage the site’s massive information architecture without ever losing our visual consistency.
Note: During the 2025 semester, this redesign was hosted live on a custom domain and served as a functional proof-of-concept. While the live site has since been archived, the full interaction model remains available in the Figma prototype below.”
Figma Prototype RockAuto_Redesign
Final Thoughts
Original & Current RockAuto Cart:
The original cart architecture fails in similar ways to the homepage while somehow gaining an even more noticeable lack of visual hierarchy that makes the checkout process feel confusing and untrustworthy. The clump of input fields, poor visual hierarchy of the items in your cart, confusing buttons littered throughout the page, and a remember me option that does not even work caused pain points for users. This lack of modern design standards creates a major trust barrier for customers attempting to verify shipping costs or make expensive part orders.