Context & Background

Casablanca Market is a U.S.-based Moroccan food and home décor brand expanding into Mediterranean product lines. As the brand scaled, I was brought in to redesign the website, improve the user experience, and build a scalable design system that reflects its growing identity.

The Challenge

The existing site was inconsistent, visually fragmented, and not mobile-friendly. Key pages—like the homepage, collections, and recipes—lacked cohesion, used inaccessible UI patterns, and failed to reflect the brand’s vibrant personality. As product lines diversified, the need for a cohesive, accessible, and scalable design system became critical.

Buttons frenzie before the redesign:

The Approach

I began by auditing existing UI components and patterns, identifying inconsistencies, and evaluating how new designs (recipe and homepage) could inform the visual language. I rebuilt outdated elements to match the updated branding, improving utility and accessibility.

Visual Language

The original muted palette didn’t align with users’ expectations for a Moroccan brand. I introduced a deep red accent (inspired by CM’s bestselling Harissa) complemented by green and yellow. Red, proven to boost conversions and appetite, became the primary CTA color. I tested all new colors for contrast, accessibility, and user response to avoid negative associations with red.

Accessibility & Documentation

I ensured compliance with WCAG AAA standards, using tools like WebAIM and Stark for contrast checks and color blindness simulations. Navigation icons were increased to 32px for older users, and a 16px minimum body text was set for readability. I documented all components in a centralized Figma Library with usage guidelines, accessibility tags, and a collaborative update process for designers and developers.

Results & Impact

The new design system eliminated guesswork for developers, ensured visual and functional consistency, and streamlined collaboration. Casablanca Market now has a scalable foundation for future growth, offering a more delightful and inclusive user experience.