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:

    1. Getting a Car Quote

    2. 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

Email

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.

Erik Moyanmakl

Let’s grab a quick bite and chat - never can go wrong with pizza


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.

Erik Moyanmakl

Let’s grab a quick bite and chat - never can go wrong with pizza


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.

Erik Moyanmakl

Let’s grab a quick bite and chat - never can go wrong with pizza