Design System for Casablanca Market
Establishing a strong online presence by building a scalable design system.
Context and Background
Casablanca Market (CM) is a Moroccan food and home décor brand aiming to establish itself as the go-to online shop for Moroccan goods in the U.S. Currently, the brand is planning to expand, adding products from Algeria and Tunisia, with future aspirations to expand further into Mediterranean product lines, establishing itself as a trendy Mediterranean food and home decor e-commerce brand in the U.S.
I was tasked with redesigning the website to improve the user experience, solidify the brand’s online presence, and make sure the designs are consistent and scalable.
The Challenge
CM's existing website was fragmented, with inconsistent visual language, inefficient use of space, and poor mobile experience. UI patterns varied too much, leading to confusion, and some elements failed accessibility tests. These issues contributed to a less-than-optimal user experience, especially across key pages like the homepage, collection pages, and recipe pages.
It became evident that as CM continues to grow and diversify its offerings, there was a need for a systematic, cohesive, and scalable design system. A well-structured system would not only solve current problems and ensure brand consistency, but also allow the team to efficiently and quickly build new pages and add additional content and products as the brand grows, saving time and resources.
The Approach
To successfully create the design system for CM I needed to:
Take the inventory of all currently existing UI patterns & components
Take the inventory of newly created patterns & components (for the recipe pages, and home page), and evaluate how the old and new coexist
Recreate some old components to match the new visual language & branding, and make them more useful and accessible.
Design library
The Foundation
After conducting the UI audit across the website, and redesigning some of the Casablanca Market website pages (recipe page, homepage) with a mobile-first approach, it became clear that optimizing space on mobile devices was essential to maintain a clean, functional, and visually appealing user experience. The challenge was to balance minimalism with efficiency. The CM website pages had to display a significant amount of content while remaining engaging, user-friendly, and easily shoppable.
This drove the need to formulate essential principles for the whole design system:
Simplicity and Efficiency: Every UI pattern has to be simple, useful and space-efficient, mapped to its use case to create a minimalistic, coherent UI library that users can easily navigate, and to avoid unnecessary variants or inefficient UI patterns.
Accessibility and Empowerment: The UI patterns have to be accessible, clearly visible, easy to quickly scan for necessary information, and intuitive to use to ensure an effortless navigation and shopping experience.
Consistency and Scalability: With plans to expand into more North African and Mediterranean products, the design system needed to be scalable to accommodate new product lines while maintaining clarity, consistency, and ease of use.
Headers & Titles:
Noto Serif Typeface
Body Text:
Lato Typeface
Typography
Originally, the brand typefaces were Futura and IMFell English. However, in order to accommodate the rise in mobile shoppers, I looked at typefaces that were much more legible and accessible on smaller screens.
I wanted to select typefaces that are modern, minimalistic, and highly legible for individuals of all ages. I chose Noto Serif for headers & titles because of its classic, slightly formal, “old newspaper” style that adds a touch of elegance while remaining easy to read.
For subtitles, body text, buttons, and tags I went with Lato, a modern sans-serif typeface that pairs well with Noto Serif and offers great legibility even at smaller screen sizes.
As the majority of our users are the older population, I prioritized accessibility, making sure that the minimum body text size on mobile is 16px, and that it provides comfortable readability across different screen sizes without straining the eyes.
Icons
I selected the majority of the icons for our design system from the Material Design library, as they were similar to the icons previously used on the website, ensuring consistency, familiarity, and ease of use across the interface. I added some food icons from an open source library, selecting the style matching the Material Design.
These icons are integrated into buttons, tabs, and navigation elements to provide visual aids, helping users quickly understand and complete tasks.
For most icons, I opted for the standard 24px size, which aligns with best practices for clear, readable UI elements. However, for critical navigation icons such as "Log In," "Hamburger Menu," "Search," and "Cart," I chose a larger size of 32px. This decision was driven by the needs of our primary user group which is an older population. The increased size enhances visibility and accessibility, ensuring that the most frequently used icons are easily recognizable and clickable for all users on both mobile and desktop screens.
Color Palette
Initially, before the redesign, the website's color palette was muted, featuring mostly beige and grayscale tones. However, user research revealed that users expected a more vibrant color palette from a Moroccan brand. I iterated on different color combinations and ended up with introducing dark shade of red as the main accent color to be used for the CTAs, complemented by green and yellow- secondary and tertiary accent colors.
I selected the red for its proven effectiveness in drawing user attention and driving conversions (according to Hootsuite research). Additionally, red is known to stimulate appetite and increase hunger, making it an ideal choice for a food-related brand like CM. Lastly, dark red is the color of Harissa - the most popular product sold by CM.
Despite its advantages, red can sometimes be associated with error or danger. To avoid misinterpretation or unintended psychological reaction, I chose a muted dark red tone and also tested it for accessibility, ensuring the color was both impactful and user-friendly. I also did a usability test, to make sure the users responded positively to the newly added accent colors and found them useful.
Greyscale Palette
Brand Colors
Accent Palette
Buttons before:
many different colors, sizes, and shapes.
Buttons
To ensure a cohesive user experience, I began by conducting a thorough audit of all the use cases where buttons appeared on the website, focusing on how they helped users achieve their tasks. This audit revealed a multitude of different shapes, hues, and colors, leading to a lack of uniformity across the button design. Recognizing this inconsistency, I iterated on the button design and ultimately settled on round buttons that best aligned with the Casablanca Market brand.
For long-term usability and brand cohesion, I prioritized a minimalistic and uniform set of buttons. I mapped each new button to its specific use case to maintain clarity and function. Dark red buttons were designated as primary buttons, reserved for essential actions like "Add to Cart" or “Shop Now”. Outlined buttons in a light red hue were chosen for secondary tasks such as "Subscribe", "Explore", “Discover”, “Learn More”, ensuring they supported but didn't dominate the user’s focus. Finally, white buttons with a black outline were created as tertiary buttons for additional tasks like altering product quantities, deleting a product from the cart, and navigation. These tertiary buttons were designed to be functional, accessible and visible without overwhelming the user.
Additionally, I designed buttons for various states, including inactive, active, and hover, to optimize interaction both on desktop and mobile web.
Tags
During the website component audit, I identified three types of tags used across the pages. However, several issues surfaced regarding their visibility and accessibility. Through user tests and Hotjar recordings, it became evident that the "Sold Out" tag was often overlooked, leading users to attempt to add out-of-stock products to their cart. Additionally, the "Sale" tag failed accessibility tests, posing usability challenges.
After discussions with stakeholders, we determined the need for additional tags including "Bestseller," "Low in Stock," "New," as well as filter and informational tags.
After several design iterations, I decided to implement brand accent colors in slightly muted tones. This approach ensured the tags were colorful and attention-grabbing, yet subtle enough not to overwhelm users or distract from CTAs. I tested these new designs for accessibility to ensure that they met both usability standards and maintained visual appeal, striking the right balance between function and aesthetics.
Product Tiles
Casablanca leverages many different product tiles across its ecosystem. I took an audit of all the various tiles, and created a unified collection of product tiles that would support Product Detail pages, Recipe pages, mobile experiences.
I kept the image, name of product, price, sold out, sale tags (elements of the previous design) and added additional useful information like user ratings and popularity (bestseller), availability (new, low in stock), and added elements to provide affordance to modify the product amount and add items to the cart directly from the recipe or collection pages.
To address the issue of users accidentally adding sold-out products to their cart, I proposed "greying out" sold-out items to clearly indicate their unavailability.
Cards
Initially, before the redesign, the website's color palette was muted, featuring mostly beige and grayscale tones. However, user research revealed that users expected a more vibrant color palette from a Moroccan brand. I iterated on different color combinations and ended up with introducing dark shade of red as the main accent color to be used for the CTAs, complemented by green and yellow- secondary and tertiary accent colors.
I selected the red for its proven effectiveness in drawing user attention and driving conversions (according to Hootsuite research). Additionally, red is known to stimulate appetite and increase hunger, making it an ideal choice for a food-related brand like CM. Lastly, dark red is the color of Harissa - the most popular product sold by CM.
Despite its advantages, red can sometimes be associated with error or danger. To avoid misinterpretation or unintended psychological reaction, I chose a muted dark red tone and also tested it for accessibility, ensuring the color was both impactful and user-friendly. I also did a usability test, to make sure the users responded positively to the newly added accent colors and found them useful.
Accessibility & Documentation
To ensure accessibility of the CM Design System, I implemented several measures. I conducted contrast checks using WebAIM to confirm that text and UI elements met the minimum contrast ratio of 4.5:1. The majority of the designs complied with the WCAG AAA standards, ensuring legibility for users with visual impairments.
I ran color blindness simulations with Stark to guarantee distinguishable elements, which led me to adjust button placement on darker components. I prioritized readability by maintaining a minimum 16px body text size for mobile users, and made the navigation icons 32 px, to facilitate interaction to older audiences. Lastly, I created accessibility tags for various UI elements, including buttons, cards, and color choices, further enhancing the website's usability and inclusivity.
To ensure ease of access, implementation, and scalability, I created a Centralized Figma Document with various pages to store the CM Design Library. The Library contains all UI elements, detailed component guidelines with usage instructions and accessibility specifications.
Additionally, I established a collaborative process for updating and maintaining the design library for both designers and developers, ensuring it remains current and adaptable as the brand evolves.
Result & Impact
Before the design system, there was no standardized guide, and developers had to make design decisions on the fly. Now, with a structured and documented design system, we’ve ensured that Casablanca Market's website design is user-friendly, consistent, and scalable. This not only improves the user experience but also streamlines the decision making, and the collaboration between designers and developers, saving time and resources.