Electric Scooter Insider
Product Filtering & Comparison
Affiliate / Sporting Goods
3 weeks (freelance)
What I Did:
- Web Design
- Design system
- Interactive Prototyping
- Sketches & Wireframes
Mainly adults interested in (but lack knowledge of) electric scooters
Undergoes extensive research to give in-depth reviews, buyer guides and comparison articles to help users find a scooter. They participate in affiliate and associate programs.
Brief & Goals:
Design a product filtering + comparison feature to make it easier for users to find a suitable scooter. Also benefits SEO by keeping users on the site for longer as it cab be perceived by Google as delivering a user experience that fulfills user intent.
Designs & Prototypes
Product Filtering & Selecting Products to Compare
First filter is selected by default to demonstrate filtering functionality, whilst being clutter-free. They can tick each scooter (max.4) to compare, which is added to a sticky comparison widget.
Uses sticky column headers while user scrolls, as well as large spacing and concise text to allow easy comparisons.
Design System & Accessibility
Designed to complement appearance and weights of brand typography. Minimal to make the icons easily recognisable.
I altered the current brand colours to enhance accessibility due to the lack of colour contrast for regular, hover and active states.
All colour combinations used meet the standard AA (green is only used for large text).
Most colours even meet the highest AAA standard.
Supporting Colour Blindness
Colour blindness affects approx. 1/12 men (8%) and 1 in 200 women worldwide.
Without relying on colour alone, I used high contrast, clearly-defined links i.e. underlining and icons to allow primary CTA’s and functionality to stand out.
Process & Planning
Researched Best Practices
After researching for best practices for product filtering and comparisons from sources by Nielsen Norman Group, UX Planet and Smashing Magazine, I learned:
- Interactive Filtering:
Recommended instead of batch filtering if no issues with page load speed
- Dealing with change blindness:
Use appropriate visual emphasis, consider animated transitions, prominent visual indicator flashes briefly while the filter is applied:
- Show number of items in each filter to set expectations of filters:
Inform users about how many products each filter contains.
- Make easy to differentiate between applied and non-applied filters:
Also provide a ‘clear all filters’ option.
- Compare max. 5 Items:
may need to reduce the number of items to two for presentation on mobile. Always consider spacing across devices
- Make Content Easy to Scan:
When using text within comparison tables, keep it short.
- Sticky Column Headers:
Especially long lists of attributes that occupy several screenfuls, keep column headers fixed as users scroll. Human short-term memory is limited, and users will easily forget which column is for which product.
User Flow Diagram
Created to demonstrate how a user can use filters and the product comparison tool to help them to find their ideal scooter.