Multisource Vehicle Pricing Tool to simplify car buying
Streamlining Car Shopping: Compare and Analyze Car Price Quotes Across Multiple Platforms
Explore the Final Designs & Impact

Overview
Redesigning a Critical Engineer Tool: A Streamlined SKU Experience
My Role
Sole UX/UI Designer (intern), working with 2 developers
Tools
Figma, Photoshop, Maze
Client
Early-stage startup
Timeline
2 month
I took over the redesign of Turbo, a car quote comparison site, after the senior designer left early in the project. The original product had minimal UI, broken flows, and major usability issues.
I led the redesign by creating a clear landing page, streamlined navigation, and stronger error handling. The final design delivered a cleaner, more accessible experience that set the platform up for a smoother launch.
Results: Built a clean, responsive car quote comparison tool with component library and improved trust in pricing.


Challenge
The Problem: No Trust, No Quotes
Most online car buyers check multiple platforms—Kelley Blue Book, CarGurus, Edmunds—each showing different price ranges. This makes the process confusing, time-consuming, and hard to trust.
Our client aimed to solve this by centralizing quotes in a single tool that scraped data and surfaced a reliable pricing range. But the initial MVP had critical issues:
Cluttered and inconsistent designs
Poor accessibility and user control/freedom
Missing pages, unclear flow, and overwhelming input fields.
Problem Statement:
Used car buyers struggle to trust outdated quote tools that are cluttered, inconsistent, and hard to compare. This leads to user frustration, drop-off, and missed opportunities for platforms to convert leads. We needed to design a clear, trustworthy, and efficient experience that helps users find accurate quotes fast—driving both user confidence and business growth.
We needed to redesign the experience from scratch, keeping trust and usability at the center.

Only options is to "Enter a VIN"
No other options as to what to do, and most sites have option to enter VIN or car model.
Little to no branding or trust established
This is the landing page and the user has no idea who the company is, and what they do. Clear branding issues.

Accessibility and Ease of Use Issues
Entries fade in with the background and are hard to see, and certain entries were grouped randomnly. There is no cohesion.
No Error Feedback & User Freedom
All these had no error feedback and also user have no idea of what the required sections to fill out.
These issues affected other screens too, so we redesigned from the ground up with a focus on trust and usability. Without trust, users won’t feel safe sharing details and trusting listed quotes.
Research Foundation: Turning a Vague Idea Into a Confident, Comparison-Driven Product
Constraints
As I suddenly became the main designer on this project, I took it as an opportunity to grow, reach out to others, know I would make mistakes, own up to them, and iterate rapidly to overcome them.
As the sole UX/UI designer, I led the entire direction—from initial research to final delivery—aligning every decision with user needs, business goals, and technical feasibility.
Goal: Design a seamless experience for comparing used car prices across platforms and getting accurate quotes quickly.
Challenge: Build a clear, functional system from a vague concept—no existing UX, UI, or brand direction.
Approach: I kicked off with a research plan to clarify the vision, define user needs, and evaluate competitors. Through workshops, audits, and analysis, I laid the foundation for a scalable, user-centered platform focused on clarity, trust, and accessibility.
Discovery Kickoff: Aligning on Goals and Expectations

What would this app solve?
Users currently jump between tabs to find the best deal across different websites — a time-consuming and unclear process.
Overview:
To kick off the project, I led a 1-hour discovery call with two stakeholders, our PM, and developers to align on goals, process, and expectations.
Client Goals: Create a modern, trustworthy car pricing site with strong visual hierarchy and clear UX.
My Role: Shared my end-to-end UX process, asked targeted questions about brand tone, business needs, and user flows.
Dev Needs: Requested a clear UI kit, structured deliverables, and a design-to-dev timeline.
Team Rhythm: Established weekly check-ins and a smooth handoff plan.
Key Insights
Clients aimed to differentiate with a clean, easy-to-use car pricing site.
Visual trust, fast decisions, and UX clarity were core to their value prop.
Developers needed structured deliverables and consistent updates.
With goals clarified, I audited the existing site through a heuristic evaluation to identify usability issues and uncover design gaps in existing design.
Uncovering Key UX Flaws in the Existing Design

Why I Did This
Pinpoint where the user experience was most broken & prioritize issues based on severity.
Set the foundation for a focused redesign strategy by design decisions with UX standards early on.
Key Findings
Error Prevention: No safeguards during quote entry, increasing risk of user mistakes
Recognition Over Recall: Poor visual hierarchy forced users to remember steps and content
Visibility of System Status: No feedback during form submissions or quote retrieval
Aesthetics & Minimalstic Design: Outdated UI reduced user trust and overall clarity
These directly impacted user trust, accuracy, and ease of completing quotes — essential for a comparison platform handling lots of user-inputted data.
Let’s look at these issues in detail…

Where am I?
As the user arrives on the site, they have no idea where they are? There is not trust or credibility built, which is essential for a car quotes website.
How will I believe the quote will be accurate?

Confusing Interface
No clear input fields and a long list of input fields that have no groups to them and are randomnly placed together.
This confuses users and have increased drop off rates due to frustration.

No Feedback
On most pages, there is no feedback on where to go if a user runs into an issue?
What do I do when I run into a problem?
With a clearer understanding of the platform’s weakest usability areas, I looked at competitors to understand what they were doing. I did a feature matrix to see how they amplified their website for these measurables.
Feature Matrix: Competitor Benchmarking Informed a More Intuitive Search Experience
Feature/Brand
Quote Comparison
User Personalization
Price Transparency
Mobile Experience
Visual Design / UI
CarGurus
One-site only
Generic filters
Good deal tags
Mobile-friendly
Modern, clean
Edmunds
Manual site hopping
One-size-fits-all
Est. range only
Clunky, text-heavy
Dense, dated
Kelly Blue Book
Site-specific only
Limited intent input
No calc explanation
Dated, not app-like
Info-heavy, dated
What Turbo Can Do
Cross-platform, side-by-side
Intent-based smart flow
Clear value breakdown
Clear UI,, app-like UXo
Modern, minimalist
Why I Did This
Understand industry standards across top vehicle valuation platforms.
Identify usability opportunities and feature gaps in the car quoting space.
Opportunity: Simplify the interface while maintaining transparency and trust.
What They Lack:
No Cross-Platform Quote Comparison: Users open tabs across sites; no unified view.
Minimal Personalization: No guidance based on user intent (e.g., quick sale vs. high return).
Cluttered or Dated Interfaces: Dense text, weak CTA flows, and poor hierarchy.
These gaps validated our core differentiators — smart personalization, quote transparency, and designing effieicent flows.
Research Summary: Lack of Trust, Cognitive Overload & Market Gaps Created Clear UX Opportunities
Constraints
Our main constraint was the inability to directly interview customers. Instead, we relied on secondary perspectives, which we analyzed cautiously, based on designers' firsthand experiences."
Low Trust & Unclear Value
Users didn’t trust the quotes due to vague pricing logic and outdated UI.
Cognitive Overload
Dense layouts, weak visual hierarchy, and poor UX patterns overwhelmed users.
Missing Market Features
No competitor offered side-by-side quote comparison or guided,
Ideation & Design: Turning Pain Points into a Clear, Trustworthy Quote Comparison Experience
In the ideation and design phase, I used research-backed insights to create a clean, intuitive car quote comparison experience. Starting with user personas and streamlined user flows.
How I Translated Insights into Design
Simplified Information Hierarchy
Organized content to reduce overload and guide users through a quote comparison journey.Trust-Building Visual Language
Used clean UI, consistent components, and language to increase trust.Focused on Actionable Comparisons
Introduced quote cards, side-by-side layouts, and filters to make multi-platform price decisions easier.Designed for a Brand, from Colors to Layout
Built a cohesive visual identity with custom branding, color palette, and a reusable component library to support long-term growth.
To anchor the design in real user needs, I created personas based on key buyer and seller behaviors—not just business assumptions.
Defining the User: Building Personas to Ground Design Decisions

Alex Thompson
About
Age 35, mid-level professional in the suburbs
Owns a car, considering selling or upgrading
Values speed, clarity, and trust
Prefers simple, no-hassle digital experiences
Behaviors
Uses mobile on-the-go, desktop for in-depth research
Prefers transparent, trustworthy platforms
Values accessibility and clear feedback when quoting
Goals
Find accurate quotes fast across site.
Make confident decisions with clear info
Save time through a simple comparison flow
Frustrations
Overwhelmed by cluttered, confusing pricing sites
Distrusts unclear pricing and hidden fees
Struggles with complex flows or buggy tools
Motivations
Quickly find a fair, accurate car price without jumping between sites
Use a trustworthy, easy-to-navigate platform that saves time and reduces hassle
Why This Helped
This let me align with who we're designing for, helping us make decisions based on user goals, behaviors, and pain points—not assumptions
To identify missing pages and ensure a complete, intuitive experience, I created user flows that mapped out the entire website journey.
User Flows – Mapping a Complete Experience
To address missing screens and unclear navigation paths in the original site, I created user flows that clarified the full end-to-end journey.
Where does saved car info live?
How can users edit input for better quotes?
Why are core pages like Login or T&C missing?

What I Did
Created 2 core user flows focused on:
Getting a Car Quote
Saving + Editing a Quote
Designed flows to reflect real user tasks, such as quote comparison, account usage, and adjusting input details.
What I Found
Missing Screens
Critical screens like Sign-Up/Login, Saved Quotes, and Quote Editing were missing or unclear.
How do I change initial quote entries?
Flows revealed that users had no easy way to revisit or edit past inputs—hurting trust and usability.
No visual metric for analysis
No clear confirmation or feedback steps in the process led to confusion about whether tasks were completed.
With a full-picture view of the user journey, I began low-fidelity wireframes to translate key flows into tangible screens. This helped test structure, layout, and new page ideas early — before refining visuals or interactions.
Lo-fi: Rapid Concept Validation & Clear Information Input
Easy, clear inputs, clear messaging & efficient
I sketched out paper low-fidelity wireframes focused on improving information clarity, task flow efficiency, and error prevention.
Goals for the Lo-Fi Phase:
Create a frictionless car input experience for users with minimal confusion.
Introduce users clearly to what Turbo does and how it simplifies quote comparison.
Design reusable UI components (e.g., card layouts) to review and edit saved car info.
Ensure support and guidance were baked into each step to reduce abandonment and user frustration.

After reviewing lo-fi sketches with the team, I moved to mid-fi wireframes to refine the layout and hierarchy. We paused testing to first lock in the UX structure and start shaping the UI before usability testing.
Mid-Fi - Improving access to information.
What We Did:
Built reusable components – Text fields, cards, dropdowns, hover states, and error messages for consistency
Clarified task flows – Broke car input into multi-step progress to reduce overwhelm
Enhanced hierarchy – Improved visual clarity with clear call-to-actions, readable font sizes, and distinct layout sections
Built trust through UI – Landing page communicates “how it works,” emphasizes benefits, and guides users through Turbo’s core value
Improved saved car section – Designed intuitive card layout with edit/delete actions and “Learn More” clarity
Hero section with input field and single CTA (“Search”)
Focused landing entry point. Early users didn’t understand where to start—this hero anchors their journey.
1
4-step “How Turbo Works” section
Addresses one of the biggest usability gaps: lack of context. We learned users didn’t trust the tool or know what would happen next. This section builds confidence and expectation.
2
“Why Us” block with icons and short explanations
Establishes trustworthiness, time-saving, and ease—direct responses to research themes of skepticism and confusion around value.
3
Lo-fi - Improving access to information.

Design Principle: Used trust-building UX writing and visual cues to help users understand, trust, and act.
Form split into two grouped sections: “Basics” and “Conditions & History”
Based on our heuristic review and early feedback, large forms overwhelmed users. We segmented the process into logical, digestible chunks to improve flow and reduce drop-off.
1
Lo-fi - Improving access to information.
TURBO
Log In
Sign Up
Let’s Gather Information
Fill Out and Gain Instant Access!
Basics
ZIP
Mileage
Trim
Exterior Color
Select Value
Black
White
Red
Interior Color
Select Value
Blue
Beige
Black
What's the ownership status of your vehicle?
Owned
Leased
Financed
Conditions & History
Has your vehicle ever been in an accident?
Yes
No
If so, how many times?
0
1
2+
What is the condition of your vehicle?
Excellent
Rough
Fair
How many keys do you have for this vehicle?
0
1
2+
Has the vehicle been smoked in?
Yes
No
What is the car’s interior material?
Interior Material
Select Value
leather
nylon
vinyl
alcantra
polyster
artificial leather
faux leather
What type of title does the vehicle have?
Clean
Savage
Rebuilt
Does the vehicle have any aftermarket parts?
Yes
No
Enter Below
If yes, please list what parts?
Does the vehicles have any mechanical issues?
Yes
No
Enter Below
If yes, please list the issues.
Does the vehicles have any serious conditions that would affect driving?
Yes
No
Enter Below
If yes, please explain
Does the vehicle have exterior damage?
Yes
No
Enter Below
If yes, please explain
Is the windshield damaged?
Yes
No
What is the condition of the tires?
Excellent
Bad
Poor
Get Quotes
Save Vehicle
TURBO
Finding the best cars for you.
Contact : turbo@gmail.com
3
Design Principle: Enhanced cognitive load management to make filling out vehicle details feel achievable.
Dropdowns instead of open fields
Limited user input errors and guided users through the process. This was a direct fix for confusion seen during earlier testing.
2
1
Dropdown filter above cards
Introduced early sorting for scalability. Users mentioned frustration when revisiting quotes and having no way to filter or organize.
“Learn More” CTA on each card
Encourages deeper exploration while keeping the initial view minimal. Reinforces user control—users decide when to dive deeper.
2
Lo-fi - Improving access to information.
TURBO
Saved Cars
Select Value
Newest to Oldest
Oldest to Newest
By Price (Lowest)
By Price (Highest)
By Condition (New to old)
By Condition (Old to New)
Alphabetically

Brand
BMW
Price
$13,600
Condition
New
Learn More

Brand
BMW
Price
$13,600
Condition
New
Learn More

Brand
BMW
Price
$13,600
Condition
New
Learn More
TURBO
Finding the best cars for you.
Contact : turbo@gmail.com
Card-based layout for saved cars
Designed to provide a scannable overview of each vehicle's key info. Our research showed users wanted a simple way to compare and revisit quotes without clutter.
Once mid-fi wireframes were set, we began usability testing to validate key tasks—adding a vehicle, viewing quotes, and understanding Turbo’s value—before investing in high-fidelity design.
Usability Testing - More Branding, Improved Efficiency & Guidance
Would you trust this website and understand what it can provide you?
66%
Of Users said yes to this statement
On a scale of 1-10, How effective & quick was it to input information?
83%
10 Out of 12 Participants
rated this 8 or higher.
On a scale of 1-10, how supportive & easy was it to find best quote for your saved price?
92%
10 Out of 12 Participants
rated this 8 or higher.
"The flows make sense and are easy to navigatre through for the most part, but I want to know more about the brand and be guided through the process"
-A User's comment on current interface
We focused on three key tasks:
Flow 1: Input vehicle details to receive a quote
Flow 2: Save a car and later edit or delete it
Flow 3: Understand what Turbo is and how it works via the landing page
Insights for Hi-Fi's:
Task Flow Simplified:
We split the input into smaller steps to reduce fatigue and show progress toward getting a quote.Landing Page Clarity:
Users understood what Turbo was, but not how it worked—so we improved hierarchy and storytelling.Guided Decision-Making:
The saved cars overlay lacked clarity. We cleaned it up and added guidance to highlight the best deals.
With core flows validated and usability insights gathered, we moved to high-fidelity design—refining visuals, enhancing trust signals, and addressing feedback to prepare for development.
Adjustments

"Why Us" & "This is how we work"
These sections allowed us to clarify who we are and what we do in specifics, followed by a glimpse of what we can offer. FInally we added a CTA at the bottom for users to "Get Started".
Break up inputs & get rid of dropdowns
Removed dropdowns based on user feedback and split long input pages into clearer, sectioned steps for better flow.


Changed notification status
Initially used modal alerts, but switched to toast notifications after feedback—keeping users informed without blocking the interface.
Hi-Fi’s
What We Improved in Hi-Fi & Why It Mattered
Increased Scannability & Focus:
Hi-fi design uses clearer hierarchy, stronger contrast, and simpler content blocks so users can quickly analyze listings.Simplified Complex Data:
Prices and comparisons are now presented with structured cards and familiar visual cues, making info easier to digest.Built Trust with Visual Markers:
Added badges, platform logos, and deal highlights to boost user confidence and reduce frustration.Unified Visual System:
Created reusable components (cards, tables, pricing) for consistency and faster user learning.Clear Information Flow:
Designed the layout to follow user steps—browse, compare, analyze, decide—solving confusion seen in mid-fi.




Mobile Designs
Clear action box

Visual representation

Clear action box

Visual representation

Clear card components


Outcome: Driving Efficiency and Business Growth Through Intuitive Design, Faster Workflows, and Stakeholder-Aligned Solutions
UX Outcome
50% Faster Task Completion: User testing revealed engineers halved the time needed to complete tasks.
Intuitive & Efficient Flow: Engineers and architects said it was quicker to locating drawing files, enhancing daily workflow.
Consistent Branding: The redesign aligned with Zurn’s brand standards, improving trust and cohesion across the digital platform.
Business Outcome:
Stakeholder Buy-In: Positive engineer feedback and design validation led to project approval and launch.
Increased Productivity: Streamlined workflows enable faster project delivery, supporting operational efficiency.
Revenue Growth Potential: Enhanced tool usability drives quicker engineering turnaround, benefiting company revenue and customer satisfaction.
Conclusion
The Turbo redesign transformed a vague idea into a user-friendly, trustworthy platform.
Usability testing drove key changes that built trust, reduced friction, and clarified navigation.
This project sharpened my ability to lead with UX strategy—turning ambiguity into clarity through iterative, user-centered design.
What I learned
Iteration is essential.
Each round of user feedback helped me uncover blind spots and refine the design. Iterating early and often was key to creating intuitive flows
System Thinking is Essential.
Building a scalable component system saved time and ensured consistency. I learned how to think beyond screens and design for systems.
Research Drives Results.
Research insights shaped nearly every design choice—from simplifying the quote flow to writing clearer CTA labels. Listening to users gave the product purpose.
Turbo Car Scraping Website
Streamlining Car Shopping: Compare and Analyze Car Price Quotes Across Multiple Platforms
My role
Designer & Researcher
Tools
Figma, Photoshop, Maze
Timeline
1 month
View Final Work
View Final Work




What is this?
What’s the solution
Poor information architecture was found based on the current data that was given which affected user's experience. This coupled with unclear navigation and poor aesthetics compared to the rest of the site made it seem different compared to the rest of the
Impact on business.
Poor information architecture was found based on the current data that was given which affected user's experience. This coupled with unclear navigation and poor aesthetics compared to the rest of the site made it seem different compared to the rest of the
What’s the solution
Poor information architecture was found based on the current data that was given which affected user's experience. This coupled with unclear navigation and poor aesthetics compared to the rest of the site made it seem different compared to the rest of the
Scope
Streamline engineer and architect work efficiency through improving existing interface while supporting design and brand consistency.
Understand
Explore
Materialize
Understanding the problem - Current pain points
Information Architecture Issues. Current site makes user select by zip code/city first, but what if the zip code/city is not listed?
Discoverability Issues. There is no ability to change the range of the inputted zip code.
Needs Minimalistic Design. Need supporting aesthetics to find and filter information more efficiently = Need for support while avoiding distractions.
Findability Issues. Not all product lines are under all the different zip codes.
Lack of Feedback/Findability Issues. When choosing a different country, it kicks the user back to the main page.
Poor Error Use. A ”no results page” does not exist.
Heuristic Evaluation
Information Architecture Issues. What if the required zip code or city isn’t listed?
Discoverability Issues. There is no ability to change the range of the inputted zip code.
Needs Minimalistic Design. Need support to filter information efficiently without distractions.
Findability Issues. Not all product lines are under all the different zip codes.
Lack of Feedback/Findability Issues. When choosing a different country, it kicks the user back to the main page.
Poor Error Handling. A ”no results page” does not exist.


Let’s delve deeper into this.


Poor IA Structure
Chooses by location and then product line but certain representatives that are close to the zip code/city are not shown. This would confuse users and not provide them the most accurate options based on where they are at. Also certain zip codes are not listed, and there is no feedback on what to do.


Poor IA Structure
Chooses by location and then product line but certain representatives that are close to the zip code/city are not shown. This would confuse users and not provide them the most accurate options based on where they are at. Also certain zip codes are not listed, and there is no feedback on what to do.


Poor IA Structure
Chooses by location and then product line but certain representatives that are close to the zip code/city are not shown. This would confuse users and not provide them the most accurate options based on where they are at. Also certain zip codes are not listed, and there is no feedback on what to do.
User Personas
But we realized from our data that certain representatives do not show up if you choose by location. The representative would not show because they were outside of a certain location even if the were in a certain product line. That representative would not show up or no results would show up at all.
User Personas
-23 years old
-College student - Business major
-Has a innovative mind and wants to start a side hustle in the car industry
-She is considering a side hustle where she finds used cars, buys them, fixes them up, and sells them back in the market.
-Needs a website that compares information of cars efficiently
Sally Johnson


-32 years old
-Family with 3 kids
-Busy with work and his family
-Always on the lookout for used vehicles as his current car is breaking down.
-Wants to find a website that gives information on cars clearly, so he can make a decision quickly.
Derrick Lewis


IA structure flows
But we realized from our data that certain representatives do not show up if you choose by location. The representative would not show because they were outside of a certain location even if the were in a certain product line. That representative would not show up or no results would show up at all.


User Interview Insights
But we realized from our data that certain representatives do not show up if you choose by location. The representative would not show because they were outside of a certain location even if the were in a certain product line. That representative would not show up or no results would show up at all.
Explore the task repetitively.
Lo-fi - Improving access to information.


Used the similarity principle to grouped similar elements and separate the flow.
Ex: User can flip between Find a representative & Finding Distributors in a card component with tabs.
1
Added user control & freedom by adding a map the can view and allowed them to adjust distance/move around within the map.
2
Used aesthetics & minimalist design by adding more visual elements like a map while straying from overwhelming the user.
3
Focused on scannable & clear hierarchy by having results show up in a card component with clear labels that showed user who they can contact.
4
IA structure flows
We came down to two main options and decided A/B testing would allow us to see which ones users would prefer.
Their recommendations were:
-Preferred results being shown below. Users they talk with want said too much information causes confusion.
Add a View All page. Many users want to see all representatives regardless of location at times.
Group the initial portion so all the elements are in one spot & users don't have to find what to input and where it is.


Materialize the final product.
Accessibility
Implementing a design system that would have consistent fonts, colors, and standards.
All designs follow WCAG standards in terms of font, colors, and flexibility.
All designs implemented dark mode & mobile versions.
Alt tags and SEO descriptions included with all necessary content.


Adjustments


Grouping information to be direct
Instead of having a page of options all over the page, we centralized and brought attention to the main actions needed. It guides the user through the actions and arrives to the CTA.


Adding the “View All Page”
An addition through testing, users the ability to see all representatives of a product line. This would let them reach out to representatives in a certain area if contractors need to deliver to a particular customer.


Adding visual hierarchy through contrast for importance.
For each card component, they have a visual importance as to which individual they should reach out too. It also clearly states the location and gives a clear indicator of the different calling options.
Mobile Designs
Clear action box


Visual representation


Clear card components




Conclusion
This project was one of the first projects I worked on during my internship and receiving a project with so much impact on the company overall in terms of revenue, customer interactions, and support. I was able gather research, go through my process, and be able to design solutions that hit the heart of the problem and support users.
What I learned
Data influences design.
Design is limited without data, which helps us see we have to work with, which effects and shapes potential designs.
Progress over perfection.
Collaborating with marketing, digital operations, and HR teams demands quick, iterative designs. Feedback trumps “perfect” designs.
Testing trumps all.
Testing reveals gaps in designs and provide a quick feedback loop of information which provides key improvements.
Turbo Car Scraping Website
Streamlining Car Shopping: Compare and Analyze Car Price Quotes Across Multiple Platforms
View Final Work
View Final Work
My role
Designer & Researcher
Tools
Figma, Photoshop, Maze
Timeline
1 month




What is this?
What’s the solution
Poor information architecture was found based on the current data that was given which affected user's experience. This coupled with unclear navigation and poor aesthetics compared to the rest of the site made it seem different compared to the rest of the
Impact on business.
Poor information architecture was found based on the current data that was given which affected user's experience. This coupled with unclear navigation and poor aesthetics compared to the rest of the site made it seem different compared to the rest of the
What’s the solution
Poor information architecture was found based on the current data that was given which affected user's experience. This coupled with unclear navigation and poor aesthetics compared to the rest of the site made it seem different compared to the rest of the
Scope
Streamline engineer and architect work efficiency through improving existing interface while supporting design and brand consistency.
Understand
Explore
Materialize
Understanding the problem - Current pain points
Information Architecture Issues. Current site makes user select by zip code/city first, but what if the zip code/city is not listed?
Discoverability Issues. There is no ability to change the range of the inputted zip code.
Needs Minimalistic Design. Need supporting aesthetics to find and filter information more efficiently = Need for support while avoiding distractions.
Findability Issues. Not all product lines are under all the different zip codes
Lack of Feedback/Findability Issues. When choosing a different country, it kicks the user back to the main page.
Poor Error Use. A ”no results page” does not exist.
Heuristic Evaluation
Information Architecture Issues. What if the required zip code or city isn’t listed?
Discoverability Issues. There is no ability to change the range of the inputted zip code.
Needs Minimalistic Design. Need support to filter information efficiently without distractions.
Findability Issues. Not all product lines are under all the different zip codes.
Lack of Feedback/Findability Issues. When choosing a different country, it kicks the user back to the main page.
Poor Error Handling. A ”no results page” does not exist.


Let’s delve deeper into this.


Poor IA Structure
Chooses by location and then product line but certain representatives that are close to the zip code/city are not shown. This would confuse users and not provide them the most accurate options based on where they are at. Also certain zip codes are not listed, and there is no feedback on what to do.


Poor IA Structure
Chooses by location and then product line but certain representatives that are close to the zip code/city are not shown. This would confuse users and not provide them the most accurate options based on where they are at. Also certain zip codes are not listed, and there is no feedback on what to do.


Poor IA Structure
Chooses by location and then product line but certain representatives that are close to the zip code/city are not shown. This would confuse users and not provide them the most accurate options based on where they are at. Also certain zip codes are not listed, and there is no feedback on what to do.
User Personas
But we realized from our data that certain representatives do not show up if you choose by location. The representative would not show because they were outside of a certain location even if the were in a certain product line. That representative would not show up or no results would show up at all.
User Personas
-23 years old
-College student - Business major
-Has a innovative mind and wants to start a side hustle in the car industry
-She is considering a side hustle where she finds used cars, buys them, fixes them up, and sells them back in the market.
-Needs a website that compares information of cars efficiently
Sally Johnson


-32 years old
-Family with 3 kids
-Busy with work and his family
-Always on the lookout for used vehicles as his current car is breaking down.
-Wants to find a website that gives information on cars clearly, so he can make a decision quickly.
Derrick Lewis


IA structure flows
But we realized from our data that certain representatives do not show up if you choose by location. The representative would not show because they were outside of a certain location even if the were in a certain product line. That representative would not show up or no results would show up at all.


User Interview Insights
But we realized from our data that certain representatives do not show up if you choose by location. The representative would not show because they were outside of a certain location even if the were in a certain product line. That representative would not show up or no results would show up at all.
Explore the task repetitively.
Lo-fi - Improving access to information.


Used the similarity principle to grouped similar elements and separate the flow.
Ex: User can flip between Find a representative & Finding Distributors in a card component with tabs.
1
Added user control & freedom by adding a map the can view and allowed them to adjust distance/move around within the map.
2
Used aesthetics & minimalist design by adding more visual elements like a map while straying from overwhelming the user.
3
Focused on scannable & clear hierarchy by having results show up in a card component with clear labels that showed user who they can contact.
4
IA structure flows
We came down to two main options and decided A/B testing would allow us to see which ones users would prefer.
Their recommendations were:
Preferred results being shown below. Users they talk with want said too much information causes confusion.
Add a View All page. Many users want to see all representatives regardless of location at times.
Group the initial portion so all the elements are in one spot & users don't have to find what to input and where it is.


Materialize the final product.
Accessibility
Implementing a design system that would have consistent fonts, colors, and standards.
All designs follow WCAG standards in terms of font, colors, and flexibility.
All designs implemented dark mode & mobile versions.
Alt tags and SEO descriptions included with all necessary content.


Adjustments


Grouping information to be direct
Instead of having a page of options all over the page, we centralized and brought attention to the main actions needed. It guides the user through the actions and arrives to the CTA.


Adding the “View All Page”
An addition through testing, users the ability to see all representatives of a product line. This would let them reach out to representatives in a certain area if contractors need to deliver to a particular customer.


Adding visual hierarchy through contrast for importance.
For each card component, they have a visual importance as to which individual they should reach out too. It also clearly states the location and gives a clear indicator of the different calling options.
Mobile Designs
Clear action box


Visual representation


Clear card components




Conclusion
This project was one of the first projects I worked on during my internship and receiving a project with so much impact on the company overall in terms of revenue, customer interactions, and support. I was able gather research, go through my process, and be able to design solutions that hit the heart of the problem and support users.
What I learned
Data influences design.
Design is limited without data, which helps us see we have to work with, which effects and shapes potential designs.
Progress over perfection.
Collaborating with marketing, digital operations, and HR teams demands quick, iterative designs. Feedback trumps “perfect” designs.
Testing trumps all.
Testing reveals gaps in designs and provide a quick feedback loop of information which provides key improvements.
But wait there more....