Ahoy is the design system for the Boatmate application, created to increase efficiency through a structured process (design thinking) since clear Design Systems result in less back-and-forth between designers and developers, reduce friction and make creating products easier by providing guidelines and frameworks for designers and developers to reference.
It was my job to design and direct the creation and documentation of the design system.
Different versions of the product, iterations, and new features were scattered all over various Figma files making it challenging for designers and developers to work on a consistent product.
Designing and documenting a design system for Boatmate aimed to ensure that it can be easily understood by any designer or developer by creating a library of UI components & making it available to the team of designers.
This allowed the team of product designers to quickly construct UIs and flows using consistent pre-made, editable, and flexible components, and UI elements, so they could focus on UX, and not re-designing the product over and over while also securing consistency.
My first order of business was to collect all assets that were used within the application. Different versions of the product, iterations, and new features were scattered all over various Figma files.
I created an inventory of every UI element; every page, every modal, every menu, every button, etc.; in our application comparing the Figma design files with the live state of the application.
Once I felt I had captured every button, icon, and design pattern I grouped them into categories. Viewing them side-by-side revealed exactly why we needed a system. There were dozens of button styles, incorrectly applied font sizes, colors, and single-use icons everywhere.
This was the most time-consuming portion of the project. I had to make decisions regarding naming conventions, categorization, organization, and presentation. I spent a lot of time naming and renaming the Figma layers and organizing icons & components.
I created the components with a structure that paid attention to the alternative use cases of the elements, like default, focused, filled, or error.
For the inputs, the components were created with variables that accommodated the default, focused, filled & error states
I worked on documenting the system while I was working on it since I wasn’t going to be the only designer who will work with it.
I included the documentation of the system in the same Figma file next to each UI element; the specs, showcased example uses, and specified guidelines for all patterns and components. It would act as a quick reference, or a bible to study in detail.
Documentation was placed within the Figma file for easy access & to create a quick reference of use
Design Sytems by nature, need to be live and evolving over time.
To maintain the newly created structure, I have created a system within Figma that allowed the new additions to our product to be included in the design system on a regular basis.
3 project files were established within Boatmate Official Team;
.svg)
