Shipwaves Design System

The Challenge

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.

The 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.

The Benefits

• It's a centralized resource for viewing components, patterns, and styles.
• The design system enables the redesign and management of new changes for ongoing projects at scale.
• Design resources can shift their focus from fine-tuning visual details to solving complex problems, ensuring visual and functional consistency across the project.
• Pre-made components and elements allow for quick replication of designs.
• This approach minimizes the need to create designs from scratch and eliminates inconsistencies.
• It also reduces wasted time in design and development due to miscommunications.