Moroccanoil
Moroccanoil — the globally-recognized hair and body care brand — came to us for a refresh. The work that shipped was bigger: a rebuilt pattern library, accessibility-driven redesigns of the homepage, minicart, PDP, and PLP, and a mobile audit that turned a list of "quirks" into measurable UX wins. I led design and shipped the front-end implementation alongside engineering — designing tokens and components I knew would build cleanly the first time.
// Lead Designer & Front-End Developer @ Rightpoint · Magento 2 · Pattern library + accessibility audit + multi-page redesign
I designed Moroccanoil's new pattern library — and then built it. Working on both sides of the handoff meant I could design for what would actually ship, not what looked good in Figma.
I owned design and front-end implementation for the homepage, minicart, base styles, and several core components in the pattern library. The dual role mattered: tokens and component decisions made in design carried straight into code without translation losses, accessibility (AA) was enforced in both layers, and the Moroccanoil team could extend the system without back-and-forth between design and dev. Most of the bugs and inconsistencies I was hired to fix never appeared in the rebuild because I designed past them.
Moroccanoil Project Process
Challenge
Design Refresh
Maintain the brands globally recognizable essence, while giving it a youthful refresh.
Solution
I worked closely with Moroccanoil's marketing team to find the line between "instantly recognizable" and "feels like 2024." The rebuild kept their signature color palette and logo as anchors, but rebuilt typography, spacing, and component states with sharper, more minimalist treatments — and added the patterns (countdown banners, large-imagery layouts, immersive PDP states) the marketing team needed to launch new collections without custom design work each time.
Goal
Address Site Bugs
Mitigate a series of bugs such as page freezes, glitchy layouts, and confusing user flows.
Solution
I treated the bugs as system symptoms, not point fixes. The page freezes and layout glitches were mostly downstream of legacy CSS and inconsistent component patterns; the confusing user flows were downstream of the absence of a pattern library at all. Rebuilding the system from the ground up — with tokens, accessible defaults, and Magento Page Builder components the brand team could extend — fixed the bugs and prevented their next-of-kin.
Design
Pattern Library
A web UI pattern library is a collection of reusable design components that create consistent and coherent user interfaces. These libraries include things like buttons, forms, navigation menus, and other interface elements.
Design & Development
Homepage
The design is based on the pattern library, which was designed and developed to be used with Magento Page Builder for optimal ongoing customization.
Before
Block-uppercase headlines (harder to scan, dyslexic-hostile, AA-failing in some weights)
Pop-up overlays interrupting first scroll (poor mobile experience, no easy dismiss)
Embedded image text (no SEO value, no translation support, can't be CMS-edited)
Body copy below 14px on mobile (AA accessibility violation)
After
Sentence-case headlines with AA-compliant contrast and weight
In-page interactive content replacing modal overlays
Live text everywhere — SEO-indexable, translation-ready, CMS-editable
Minimum 16px body copy with type scale tied to a token system
Design & Development
Minicart
Previously a small dropdown, I updated the minicart to be a slide-in drawer that provides more space for content information and larger imagery.
Design
Product Detail Page
For the custom PDP design, I have included larger product photography, updated product configurations, more focus on photo reviews, and added extra space to feature product information and video content.
Design & Development
Product Landing Page
The product landing page is to promote larger collections such as "hair" and give emphasis to different types of sub-category products.
