Shipwaves Design System

The Challenge

Shipwaves' growth across over twelve modules demanded design consistency, but a unified approach was lacking. Joining as the sole designer with complete design autonomy, I inherited this challenge. The disconnect I observed between my designs and the coded product made it obvious: we urgently needed a robust design system to bridge this gap and standardize our visual language.

A major challenge designing for the Shipwaves platform was the inconsistency between my designs and the live application. Suspecting developers might be using different assets, I conducted a quick site audit. This confirmed my suspicion: assets varied significantly, and I found numerous variations of components like buttons and tables.

Laying the foundations

Initially, organizing components felt overwhelming. While exploring the large public design systems from IBM, Apple and Google offered valuable inspiration, their scale made them difficult to use as a practical guide. The real breakthrough in improving my component structure came from adopting Atomic Design principles.

The challenge was to build a design system that was simple, scalable and clear for both design and development teams. Realizing the developers' perspective was crucial, I took help from a front-end developer. Together, we integrated tokens and CSS classes directly into Figma, which served as an effective way to align our thinking and communication.

As the sole designer, I knew the startup would grow, so I built the design system for scalability. Using atomic design, nested components and component properties helped keep elements manageable for future expansion. Identifying which components are truly reusable versus needed for edge cases is still something I'm learning.

Bringing it all together

The design system is constantly being updated. After introducing new components, I checked in with the development team to understand if these changes actually enhanced the product and to learn from their perspective what was working well and what wasn't.

Our Wins

• Faster Development: Less time spent coding new components.
• Streamlined Handoff: More efficient transfer from design to development with clearer specifications.
• Smoother QA: Reduced feedback loops and quicker validation cycles.
• Enhanced Consistency: Greater uniformity in the implemented user interface.

Looking towards the future

As the design system matures, the plan is to increase the library of standardized, versatile assets. A key focus will be breaking down components further and documenting their behavior specifically within the context of developer frameworks. Simultaneously, as the design team grows, I intend to actively collect feedback from designers on the system's effectiveness for their workflow and onboarding, as well as suggestions for improving documentation and guidelines. Finally, monitoring ongoing design consistency and surveying the team about their daily usage will be crucial to understand the system's real-world impact on speed and productivity.