Platform Migration

Featured image for American Girl Shopify project

Migrated and enhanced American Girl’s design system from AEM to the Shopify platform

Objectives

Updated and transitioned the existing design system to a new platform. Delivered documentation and built reusable library components. Authored and published new creative to the live site.

My role

UI Designer, Visual Designer, CMS Author

ag product description page finished screen

The process

Design system enhancements

Colors, icons, and some buttons were legacy items from the old design system. With the migration, we were able to add additional text classes and CTA options that we were lacking on the old platform implementation.

american girl design system typography styles

american girl design system buttons and links

american girl design system illustrations

Global components

Persistent elements like navigation, menus, search, and footer were designed as a family to ensure visual consistency on every page. The information was organized based on keyword searches and analytics.

american girl navigation and mega menu for desktop

american girl navigation menu for mobile

american girl search dropdown for desktop

Reusable components

Content management components were a pain point with AEM, so I created wireframes of everything our team agreed we needed and validated each with proofs of concept for both desktop and mobile viewports.

Page Templates

Many of the patterns that were established in AEM were added to Shopify. One reason for the switch to Shopify was their handling of sku bundles. American Girl had the added complexity of having blog and store location templates as well.

american girl plp base template for desktop

american girl plp base template for mobile

Conclusion

The Shopify migration was a huge improvement over the implementation of AEM that was being used. Authors were able to stop inline code hacks since all of the styling appeared as expected. Marketing teams had more flexibility with product offerings and tracking of data. The design team had a new set of reusable components for future projects.

Property of Mattel, Inc.