Minted Component Library

UX, UI
Image 1

As Minted Wedding Websites moved from the legacy Hitched Up app to React, it gave me to opportunity to create a responsive component library from the ground up. This library allowed our team build consistently, launch new features at a faster pace, and reduce internal miscommunication. After demonstrating the effectiveness of this structure and process, I was given the opportunity to architect a design system for the entire online experience at Minted.

The building blocks of this system are broken down into six categories:

Guidelines

Guidelines

Guidelines contains the rules for file structure, symbol organization, and naming conventions.

Foundation

Foundation

Foundation contains the abstract properties such as font definitions, colors, grid structure, and spacing.

Elements

Elements

Elements contain all the individual pieces of the interface, such as icons, buttons, tabs, and form controls. Most elements are built so that the width is controlled by the parent container, and they can not contain any external spacing.

Components

Components

Components are groups of Elements that form distinct sections of the interface, such as the main navigation, modal window, or a sortable content list. They can respond to page breakpoints, and can specify external spacing.

Templates

Templates

Templates consist mostly of Components, but occasionally Elements. They represent the layout and functionality of a specific page type.

Pages

Pages

Pages are instances of Templates, with placeholder content replaced with real content. They are the closest representation of what the user will see, and provide a way to test the integrity of the building blocks.

I've learned so much throughout the process of designing this system, probably the most important is that it's never complete. As new functionally is added to our app, Pages are used to test and improve components. Many times that has uncovered a flaw in an element that required improvements that would cascade throughout the system. Breaking elements down to their simplest form, and using Pages to test integrity are key in ensuring modularity.

Other insights I've learned include: understanding how size variants affect composability, rules for internal and external spacing, component testing using Pages, and a set of guidelines for symbol and layer organization and naming conventions.

Even though maintaining a component library can be a challenge across multiple projects and teams, it has certainly helped to improve our workflows and internal communication. Check out the next project to see it in use.