Overview
My Role

UI Design

My Team

Max Barbosa
Morgan Hliang
Harry Lin

Duration

12 Weeks

Tools

Figma
Miro
Adobe Illustrator

Problem
  • Crocs’ fun and playful energy not translated into their website Overcrowding and repetitive information information display, making it difficut to navigate the site
  • Overcrowding and repetitive information information display, making it difficult to navigate the site
  • Lack of attention on Crocs’ customizability and large inventory
Solution
  • Incorporate visual language that is more aligned with Crocs’ archetype through color, icons, and motifs
  • Simplify site by removing unnecessary clutter and information overload
  • Emphasize the world of Crocs: implement a “Customize your Crocs” feature
Task Flow
Design Principle
UI Design
HOMEPAGE + HAMBURGER MENU
SEARCH + FILTER
PRODUCT DETAIL PAGE
Using the motifs as holding containers for icons and text maintain the graphic nature of Crocs' flagship product: the Clog
CUSTOMIZE CROCS!
We wanted to leverage the popularity of Crocs' classic shoe by implementing a customizable tab for the Clog
CART
Design System
Outcomes + Next Steps
Outcomes
  • Accentuated brand look and feel so users associate brightness and boldness with the fun brand that Crocs is
  • Reduced amount of clutter to make website more navigable, uncomplicated, and easy to understand
Next Steps
Continuing this project, I would like to implement more animation and micro-interactions. Crocs is such a playful brand and making the site mimic that playfulness would push it to the next level.
Thanks for checking this project out :)
Come see the next one →
Isabelle Kwong
isabellelkwong@gmail.com