Work samples

Mattel-American Girl design system

PROJECT SUMMARY

This project aimed to streamline website development across Mattel Inc.'s portfolio by creating a versatile design system for Adobe Experience Manager (AEM). Focusing initially on the American Girl brand, we forged a strategy through close collaboration with AEM developers. Our objective was to develop a comprehensive Design System Management (DSM) that included icons, fonts, symbols, components, and sub-components. This DSM empowered developers to replicate design elements across various brands within Mattel, promoting consistency and efficiency and enhancing customer experience.

PAIN POINTS

MY ROLE

I played a pivotal role in creating a design system for Mattel Inc.'s brand American Girl, streamlining website development with Adobe Experience Manager. Despite tight timelines, our offshore team, including a design manager, three UX designers (including myself), and two visual designers, successfully delivered a scalable system. Collaboration was key, taking requirements from the onsite SME and clients directly, splitting the work, and delivering timely and flawlessly.

PROCESS

Through collaboration with the on-site team, we expedited project progress to meet stringent deadlines. Our streamlined process comprised several key steps-

01 MODULE IDENTIFICATION

We selected three key modules—'Character,' 'Explore,' and 'Retail'—due to their unique elements that could represent the entire platform.

02 STRUCTURE IDENTIFICATION

We meticulously identified templates, components, and sub-components within these modules. This information was organized in an Excel sheet and validated with the clients, also separating common global components.

03 DESIGN

Creating a generic design system applicable across brand guidelines. We crafted wireframes for identified templates for both extra-large (xl) and extra-small (xs) breakpoints. These were developed in the Sketch app using the Craft plugin and integrated into InVision.

04 UX WRITING

We annotated templates and related components, sub-components, and elements. These annotations served as a user manual, catering to our target audience—developers.

OUTCOME

The project's primary outcome is a versatile design system that can be reused, managed, and scaled across various platforms.

What did I learn ?

Before this project, I primarily collaborated with visual designers for visual mockups and had limited confidence in UI design. However, I rapidly acquired proficiency in using the Sketch app during this project, which proved invaluable for future UI work. Additionally, my experience with design systems in this project has equipped me with the skills to create and implement them effectively, a capability I now regularly apply.