Electric Scooter Insider

Project Type:
Product Filtering & Comparison

Industry:
Affiliate / Sporting Goods

Duration:
3 weeks (freelance)

Project Overview

Software Used:
XD, Illustrator

What I Did:

  • Web Design
  • Design system
  • Interactive Prototyping
  • Iconography
  • Sketches & Wireframes
  • Research

Target Audience:
Mainly adults interested in (but lack knowledge of) electric scooters

The Client:
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

Step 1

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.

Step 2

Product Comparison

Uses sticky column headers while user scrolls, as well as large spacing and concise text to allow easy comparisons.

Design System & Accessibility

Icons

Designed to complement appearance and weights of brand typography. Minimal to make the icons easily recognisable.

Compare

Filter

Arrow

Feature

Open

Close

Search

Menu

Colour Palette

I altered the current brand colours to enhance accessibility due to the lack of colour contrast for regular, hover and active states.

Green: for primary CTA's i.e. view product

Orange: for referencing comparisons

Black & greys: for text and backgrounds

Typography

Colour contrast

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.

Red-Blind / Protanopia

Green-Blind / Deuteranopia

Blue-Blind / Tritanopia

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.