CROCS SA

CROCS SA

Improving size selector flow, visual hierarchy, and consistency on Crocs SA responsive web.

Improving size selector flow, visual hierarchy, and consistency on Crocs SA responsive web.

Improving size selector flow, visual hierarchy, and consistency on Crocs SA responsive web.

Client

Crocs SA

Responsibilities

Visual Design

UI & UX Design
Design System

Platform

E-commerce

Date

Nov 2024

  1. Overall Homepage

We first started by looking at the stats and conduct a heuristic evaluation on the homepage and product specific page, I found:

1. Poor Visual Hierarchy

2. Button Inconsistencies

3, High shoe return rate due to size related issues.

  1. UI Kit

Firstly I started off with putting together a simple UI kit which we could expand on as a team, the idea was for all of use to align with the components we will be using so that we keep consistency.

  1. Product Specific Page

To kick things off, I focused on the product specific page, this is where users had the most pain point when it comes to selecting a shoe size, for error handling I:

1. Designed a shoe guide table, ensuring users are informed about their shoe sizes, before they purchase.

  1. Added clear CTA

  2. Adding Clear Visual heirachy, ensuring that users eyes are guided to important information they need to see to make a purchase

  1. Product Card

One the biggest pain points, was the product card, by quickly glassing at it, you can tell its not very user friendly, visually its hard to track the tap area, inconsistencies in spacing, and overall very hard to read. the updated product card was cleaner and has a clean minimal look, but maintaining the same information.

  1. Conclusions

After making the changes above, we presented the updates to respective stakeholders and they approved, with some small tweaks, currently the web update it being designed and is scheduled to go live in March 2025.