Shipwaves Design System

As the Shipwaves grew, it became increasingly necessary to maintain a consistent style and visual language across all areas of the product. With nearly over a dozen of modules, it was clear that we needed more systematic ways to guide and leverage our collective efforts.

The initiate outcome was to have a collection of reusable components that can be assembled together to quickly build any number of consistent experiences.

Solution

The primary solution was to come up with a design system that was guided by principles and best practices. Also, to keep with documented at each step to ensure consistency and efficiency of work.

Laying the foundations

This system is based largely on the principles of atomic design. The key idea behind this methodology being small, independent - atomic - parts, can be combined into larger molecular structures.

This foundation loosely defined our typography, colors, icons, spacing, navigation and information architecture and proved essential for guiding our work in a unified direction.

We course-corrected when necessary and started defining our standardised components.

Bringing it all together

While the library was growing, we started organizing individual components into artboards containing similar items. These artboards were then organized by general category. Later we planned on create an internal website to document the system that can be used by both the devs and designers.