La Madeleine Online Relaunch
La Madeleine had not refreshed their digital presence in over a decade. With online ordering integrations looming, it was time to rethink the way the brand exists online.
With an eye on the future, the brand sought a visual style that conveyed their french heritage, but introduced new playful and approachable positioning. We took their french heritage to an abstract extreme, and gave the user the ability to “scroll the french flag” as they explore this mobile-first site design.
With this robust and accessible template structure, a minimalist design system, and customizable modules, this CMS gives the brand a bright, modern identity.
The Ask
Design and develop a custom CMS that integrates with the new online ordering system. Create a new digital design system that is accessible, and updates the brand to a more contemporary visual style. The design solution must be flexible enough to be expanded into offline collateral brand materials.
TIMELINE: 10 WEEKS
The Process
Empathize & Define
With technical integrations and constraints in mind, we conducted an audit to determine the best path forward for our page templates and visual design. Engineers and designers closely collaborated to ensure every module and style choice could be easily supported by the backend tech stack.
Activities:
Current-state heuristic and competitive audits
In-store observations
Concept & Design
Mood boards outlining several design styles were constructed and used as a visual stimulus during ideation sessions. The team worked with the existing brand standards to refine the design system to become more digitally supportive and flexible. Once we’d aligned on a design language, we developed a library of modules that could be combined in core page templates.
Activities:
Ideation sessions
Design and develop clickable prototype
Develop & Iterate
Design reviews were interactive. We lead dot voting exercises to refine exactly what visual elements were working well towards our goals, and what could be removed. Once we’d received client feedback and selected a final design system, we iterated on our previous module library and template designs.
Activities:
Prioritization workshop
Concept refinement
Creative direction
Content development
Deploy & Test
Our team held several hand-off sessions with the client to support their ability to edit, and revise the CMS and design templates. We left them with an exhaustive product backlog outlining the remaining features that would need to be accounted for in the experience.
Activities:
Product backlog and roadmap
Design System Training
The Design System
A requirement of the engagement was to produce a design system that could support AA ADA compliance. In order to stay within established brand colors, we created 2 versions of the design system. One that was within the existing brand, and a variation that aligned to AA standards. Our experience included a global toggle that would switch the site into “accessible view”; button sizes increase, fonts are enlarged, and color contrast is elevated.
DEFAULT
ACCESSIBLE
