CROCS 
Personality Quiz Microsite

My Roles: Concept, Creative Direction, UI / UX Design
Tools Used: Miro, Figma, Adobe Creative Suite (Illustrator, Photoshop, Premiere Pro, After Effects)

A quirky online quiz designed to engage users, promote personalization through Jibbitz charms, and drive sign-ups for Crocs across Europe.

Created for Crocs in collaboration with OMM (Agency) as part of a digital engagement initiative aimed at boosting Jibbitz sales and enhancing social media presence.



 

   

·  CROCS 'CROCS-ONALITY' MICROSITE  ·  CROCS 'CROCS-ONALITY' MICROSITE  ·  CROCS 'CROCS-ONALITY' MICROSITE  ·  CROCS 'CROCS-ONALITY' MICROSITE  

 

THE PROBLEM / CHALLENGE

Context

  • Crocs wanted to highlight their Jibbitz charms in a playful and interactive way, appealing to users’ individuality while increasing brand engagement, driving sales, and gathering valuable customer insights.

The Challenge

  • How do we make Jibbitz a fun, shareable concept online?
  • How do we effectively engage Crocs’ diverse target audience while ensuring a lighthearted and enjoyable experience?
  • How do we maximize reach and impact across social media platforms?
Illustrations by Inga Ziemele https://www.instagram.com/inguuuna/

 

 

THE APPROACH

Research

  • Studied user behaviour around interactive online experiences, particularly quizzes and gamified elements.
  • Drew inspiration from popular online personality tests and personalisation tools to craft relatable and engaging questions.

Concept Development

  • Ideated the “Crocs-onality” quiz, linking personality traits to Jibbitz recommendations in a witty and playful tone.
  • Developed a scoring system to ensure personalised and accurate results.
  • Designed questions to resonate across generations, maintaining a universally enjoyable experience.

Constraints

  • Ensure a seamless experience on both mobile and desktop.
  • Align with Crocs’ branding guidelines and technical requirements.

 Various UI Personality Result Share Screens



 

THE PROCESS

Design Development

  • Collaborated with designers and developers to create wireframes and prototypes for the quiz.
  • Integrated a colourful, vibrant visual design to reflect Crocs’ quirky brand identity.
  • Included gamified elements to enhance user engagement and encourage social sharing.
  • Crafted custom-generated results tailored to users’ personality traits for a personal touch.

Key Decisions

  • Prioritised personalizsation to make the results feel unique and relevant.
  • Emphasised social sharing with visually appealing result cards optimised for platforms like Instagram.

Collaboration

  • Worked closely with developers to ensure cross-platform functionality and implement data collection mechanisms.
  • Coordinated with Crocs to ensure alignment with their marketing strategy.

 Various Crocs Jibbitz

 Animated Personality Illustrations



 

THE SOLUTION

Final Design

  • An interactive, responsive quiz available on mobile and desktop.
  • Users answer a series of fun, personality-driven questions to receive personalized Jibbitz recommendations.
  • Built-in sharing tools allow users to easily share results on social media, amplifying organic reach.

Features

  • Vibrant, on-brand visual design.
  • Gamified elements to make the experience fun and shareable.
  • Integrated data tracking to monitor sign-ups, user demographics, and engagement metrics.
  

 Various UI Screen Animations



RESULTS & IMPACT

Outcome

  • Achieved a remarkable completion rate of 85.71% for the quiz.
  • France emerged as the leading country for click-throughs and engagement.
  • Generated over 2000+ new customers via Instagram alone.

Insights Gained

  • Provided Crocs with valuable data on their target audience’s personality traits and regional popularity.
  • Highlighted opportunities to expand the campaign to other social channels, such as TikTok and Twitter, for greater impact.

Reflection

  • Successfully balanced fun and functionality, driving measurable outcomes for the brand.
  • Greater clarity on client requirements from the outset could have streamlined the project and maximised results.

 Experience Walkthrough

 Animated Personality Results



 

·  CROCS 'CROCS-ONALITY' MICROSITE  ·  CROCS 'CROCS-ONALITY' MICROSITE  ·  CROCS 'CROCS-ONALITY' MICROSITE  ·  CROCS 'CROCS-ONALITY' MICROSITE