Modular Components and Atomic Design

How to optimize design and engineer time

Smart Patterns

With efficiency in mind, all elements should be designed in the most replicable way possible - in other words, we should avoid minor variations that don't really justify breaking the pattern. This is valid for elements' width, paddings, font sizes and color arrangements. Patterns are good for user experience and also make better use of design and development time.

Atomic Design

This same logic applies to our design flow, which always goes from the smallest part to the entire component. This means that no component will ever be formed with an icon that wasn't first added to our icon library, or that no icon will ever be colored with a shade that doesn't belong to our color palette. This logic helps us make patterns stronger, and avoid the existence of individual elements that require dedicated development and maintenance, as they don't belong to a larger existing group.

Side note: breaking patterns

Although this structure helps us with an efficient development, it's important to identify whenever a pattern needs to be broken and create a unique solution for a specific situation. In our case, the tracking screen, for example, doesn't share much elements with any other screen in the app, and that is not an issue, give it's importance and unique role it plays in our product. The same logic doesn't apply to most of our Settings screens, which are secondary and should just usa a replicable presentation.

Figma File for Specification

Related Content

Overall Concepts and Guidelines

Information Architecture

Hierarchy and Wayfinding