Design System

Dockwa, part of The Wanderlust Group, is a marina management platform, focusing on finding efficiencies for marina operators and bettering boaters overall experience on the water.

Team

  • Product: Lead PD (Margo Sultenfuss), 2 Product Designers, 3 Product Managers

  • Engineering: 2 Engineering Managers, 5 Engineers

  • Stakeholders: CEO, VP of Product, VP of Engineering

Problem

Dockwa’s Engineering and Design teams were facing increasing inefficiencies during the design and implementation stages. The Engineering team had implemented several basic components over the years, however they weren’t based on one design style, were lacking in basic usability and were not simple to implement. The Design team didn’t have overarching visual rules or have consistent Figma design components to pull from when designing.

Goals

  • Reduce time in technical implementation: Engineers were doing repetitive work, recreating the same elements across different features as they were not available as React components.

  • Implement Storybook: Implement a visual library for the Engineering team to keep track of live React components and make edits.

  • Reduce time spent in design: Designers were spending many extra hours having to track down or recreate elements in theirs Figma files to create wire frames and prototypes. By making these available, designers can spend more time on problem solving, deep thinking, and iterating.

  • 50% in-product implementation: By end of 2023, have at least 50% of the product using the updated design system and styles.

  • 95% Figma components created: By end of 2023, have at least 95% of necessary and common design components created in Figma.

Process

Working with our VP of Engineering, we were able to add Design System work into each Sprint. 20% of each pods sprint work was to be dedicated to Design Systems work and other non-project work. After hosting a lunch and learn about Figma Components and how design uses components, several engineers raised their hands to be more involved in the Design System and Storybook creation. I worked closely with these engineers as they created updated and new React components and rolled out to production.

Results

As of November 2023:

  • 45% in-product completeness:

  • 90% Figma components created:

  • Reduced time spent in implementation and design: This metric proved to be difficult to directly track, but annecdotely we did see a reduction in points assigned to UI facing engineering issues as the Design System rolled out.

  • Storybook implemented: The visual library for engineers to keep track of live components had been implemented as of August 2023.

Typography

Alerts

Navigation

Tables