Skoda
Automotive Filters and Listing Redesign
UI/UX
Automotive
Client
Role
Industry
Skoda
UI/UX Designer
Automotive
The Škoda filter system and card listing page were meticulously designed to provide users with a seamless and efficient browsing experience. Through extensive research, competitor analysis, and collaboration with stakeholders, I crafted a solution that allows users to refine car options quickly and intuitively.
Results and outcomes
- 30% increase in filter usage rate - After the redesign, we observed a 30% increase in filter usage, indicating improved accessibility and clarity.
- 25% higher interactions with vehicle cards - Users interacted with vehicle cards 25% more often, indicating higher interest in displayed content.
Problem statement
The existing car browsing experience lacked intuitive filters, making it difficult for users to quickly refine options and find vehicles that met their criteria. The challenge was to create a streamlined filtering system and optimize the card design to present key information effectively.
Goals
- Develop a user-friendly filter system that balances simplicity and increase usage of it
- Enhance the card design to provide clear, scannable vehicle information
- Reduce bounce rates further by making key filters instantly visible
Research & Insights
We conducted workshops with stakeholders and designers to uncover key pain points, analyzed raw data to identify the most-used filters, and benchmarked industry leaders like Carvago, Tesla, and Volvo for best practices. Our findings revealed that users prioritized filters like Price, Fuel Type, Transmission, Mileage, and Body Type, preferred a quick filtering experience without excessive scrolling, and struggled with card layouts lacking clear visual prioritization for easy comparison.
Pain Points
As a small design product team we conducted workshops with stakeholders and designers from Design System team to understand key pain points for Filter System and Card Listing.
Analysis rough data
We analyzed rough data from the Škoda's analytic tool to identify the most-used filters and processed them from Excel into understandable pie charts. I also did research via GPT chat about competitors' filters and cards. Then we compared this data with research output from the GPT chat. Based on the discussion with stakeholders and designers we list the most used.
Data processed from Excel into pie charts
Prompts for GPT chat
Research of competitors filters & cards
To create a robust filtering system, I conducted thorough research into competitor filters, user behavior, and industry-leading UX patterns. We identified essential and advanced filters that would cater to diverse user needs while ensuring simplicity in navigation.
Key Findings
Our research revealed that users primarily used filters like Price, Fuel Type, Transmission, Mileage, and Body Type. They preferred a quick filtering experience without excessive scrolling and needed better visual prioritization in card listings for easier comparison. So we decided to divide the search filter into 2 categories: Basic and Advanced.
Design Process
Leveraging insights from the research phase, I developed initial wireframes and prototypes, iteratively refining them through feedback loops with stakeholders. Multiple discussions allowed us to address edge cases, ensuring the filters were comprehensive without overwhelming users. The card design was optimized to present key vehicle information clearly, enhancing scannability and aiding quick comparisons.
Showcase from iteration process
Outcome
The final design streamlined the user journey, enabling quick access to desired car options through intuitive filters. The card layout provided concise yet informative snapshots of each vehicle, enhancing usability. A detailed handover was delivered to developers, ensuring smooth implementation and alignment with the design vision.
Conclusion
By refining Škoda’s filter system and card listing, we significantly enhanced user experience, making car discovery faster and more intuitive. These UX improvements contributed to higher customer satisfaction and conversion rates.
Clickable prototype
The prototype is created in Figma and you can find the link below.