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
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 only UX/UI designer, I led the project from research to delivery—making sure every decision supported user needs, business goals, and tech limits.
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.
My Role
Sole UX/UI Designer (intern), working with 2 developers
Tools
Figma, Photoshop, Maze
Client
Early-stage startup
Timeline
2 month
Overview
Redesigning a Critical Engineer Tool: A Streamlined SKU Experience
Turbo is a startup building a tool that helps users compare used car prices from platforms like Kelley Blue Book, Edmunds, and CarGurus—all in one place. This VIN quote comparison tool was designed during my internship at Bell Automations, where I collaborated with developers and led UX from research to UI design.
I joined the project after the lead designer stepped away, taking full ownership of the redesign. The original experience was cluttered, difficult to navigate, and lacked basic UI standards—damaging both usability and user trust. 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:
57% faster quote comparisons – Usability testing showed task time dropped from 7 to 3 minutes
18% more efficient user flows – Improved layout and navigation reduced confusion
92% user satisfaction – Most testers found the experience quick, clear, and easy to use
Complete product rebrand – Delivered a modern UI system that builds trust and supports scale
Scalable design system – Created components to streamline dev work and future growth
Before
After
Challenge
The Problem: No Trust, No Quotes
Used car buyers often bounce between platforms like Kelley Blue Book, CarGurus, and Edmunds—all showing inconsistent price ranges. This creates confusion, slows decision-making, and erodes trust.
Our client set out to centralize the experience with a tool that scrapes car data and delivers one trusted price range. But the MVP fell short:
Cluttered and inconsistent designs
Poor accessibility and user control/freedom
Missing pages, unclear flow, and overwhelming input fields.
Problem Statement:
Car buyers struggle to trust outdated quote tools that are hard to use, cluttered, and inconsistent—leading to user drop-off and lost conversions.
We needed to rebuild the experience from scratch, keeping trust, clarity, and usability at the center.
Only One Input Option
Users could only “Enter a VIN” — no alternative for make/model, unlike standard platforms.
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.
Poor Readability & Layout
Input fields faded into the background and were randomly grouped, making the UI feel untrustworthy.
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 we started this project, the lead designer left which meant I would be taking over entire design and research process. I learned, asked questions, made mistakes—and iterated quickly to deliver a better product.
As the only UX/UI designer, I led the project from research to delivery—making sure every decision supported user needs, business goals, and technical limits.
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’s the goal of this webiste?
Today’s car buyers waste time bouncing between tabs and platforms—KBB, Edmunds, CarGurus—just to get a reliable quote. We needed to solve that with a centralized, confident experience.
Overview:
To kick off the project, I led a discovery session with stakeholders, our PM, and developers to align on:
Business goals
User expectations
Technical constraints
My UX process and deliverables
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
The client originally thought users just wanted a cleaner UI. The real problem was lack of cross-platform trust and poor UI.
Visual trust, fast decisions, and UX clarity were core to their value prop.
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
Identify where the experience broke down & set clear direction for our redesign.
Use a standardized framework to prioritize issues based on severity, not assumption
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
Why It Mattered
These usability breakdowns directly impacted trust, efficiency, and task completion—three essentials for a quote comparison platform handling complex user inputs.
Let’s look at these issues in detail…
Where am I?
Users landed on a site with no visual cues, no branding, and no clarity—creating immediate distrust.
"Is this site legit? Why should I trust these quotes?"
Confusing Interface
Form fields were unordered, visually cluttered, and lacked logical grouping—causing confusion and task abandonment.
"What am I supposed to enter and why is everything out of order?"
No Feedback
There was zero error messaging, no progress indicators, and no help prompts—leaving users stuck.
"Nothing’s happening… did it even work? What do I do now?"
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
I translated research insights into a clean, intuitive car quote platform through user personas, clarified task flows, and low-fidelity wireframes.
How Research Drove Design Decisions
🔎 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 understanding missing screens and flows, understanding how components would be placed.
Goals for the Lo-Fi Phase:
Simplify the Entry Flow
Restructure the input process (VIN, model, etc.) to feel intuitive and less overwhelming.Clarify Turbo’s Value Early
Introduce what the tool does and why it’s trustworthy—establish credibility upfront.Design for Reusability & Scale
Create modular components like quote cards and car info blocks that could scale across screens.Build in User Guidance
Ensure each step had inline help or system feedback to prevent errors and reduce 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 tester's comment
In usability testing with 5 participants, average quote task time dropped from 7 minutes to just 3 minutes — a 57% reduction. 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.
From testing, we found areas of improvement. There were still gaps in clairty - that suprised me, but also proved how valuable testing was to our final designs.
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. This allowed us to show who we are and build that trust.
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 & Flow Efficiency by 18%:
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.
I collaborated closely with two developers to ensure my designs were translated accurately using a shared UI component library and handoff guidelines. I also advocated for responsive design—expanding scope to include mobile screens, which weren’t originally prioritized by the team
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
57% faster task completion – Reduced quote comparison time from 7 to 3 minutes in usability tests
18% increase in flow efficiency – Improved navigation and clarity across key flows
Simplified complex inputs – Broke down overwhelming forms into digestible, user-friendly steps
92% user satisfaction – Most testers rated the experience 8/10 or higher for usability and ease
Business Outcome
Built user trust – Introduced visual trust signals like deal badges and verified logos
Launched new brand identity – Rebranded the full product with consistent UI and messaging
Improved dev handoff – Delivered a scalable component library for faster implementation
Clarified product value – Redesigned landing page to clearly communicate Turbo’s purpose
Conclusion
The Turbo redesign transformed a vague idea into a user-friendly, trustworthy platform. This was my first real project and with many highs and lows, I took it as an opportunity to learn more, lean on others, understand how communicate with others - developers, product managers & stakeholders. We were able to redesign this for our client, who loved the new designs, providng a fitting end to my first project.
What I learned
Stakeholder Buy-In
I learned how to advocate for users by pushing back with mockups, I helped shift perception and gain stakeholder support — a valuable lesson in balancing user needs with business timing.
Building Systems.
Building a scalable component system saved time and ensured consistency. I learned how to think beyond screens and design for systems. This saved alot of time and efficiency.
Ownership.
When my senior stepped away, I took full ownership—leading research, UX decisions, and UI design with developers. It boosted my confidence handling real-world constraints.
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.
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.
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.
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
Full Site Rebrand: We redesigned entire site, adding in a trustful brand and component UI kit to support future additions.
Complex Flows: Working with huge amounts on inputs, we broke content down and provided users with control.
Fixed Poor User Navigation: Added appropriate screens that were missing in the flow.
Business Outcome:
Improved Flow Efficiency by 18%: Through testing, we found that ease ofuse and output improved significantly.
A Brand Identity: Ths business had no core to it - no why, idea of what they wanted - which is what i provided to gain user trust.
Finding Gaps in Design: With certain vital screens missing, such as clear comparison chart - the essence of this app was missing causing user drop off.
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.
