To corroborate the consistency use of this design system, we used Invision DSM plugins for all designers,
the centralised master files in the cloud make it simple to distribute and maintain a design system.
Design system for
Creating and documenting a product design system
Sharktower is an Edinburgh based project management software startup with the mission to provide transparency and clarity for project delivery.
As a product designer collaborating with the product and engineering teams, I worked on creating better user experiences in product areas across the web app and mobile.
I took ownership of Sharktower's first design system, worked with other design team members and the engineering teams to create and incrementally roll out the system.
The platform uses a slightly different style guide which resulted in a confusing and fragmented experience. In some cases, design patterns were not implemented as well as they could have been. We needed a design system that documented all the UI patterns and guiding principles in a format accessible to the design and engineering teams.
Designed with Sketch, system in Invision, documentation in Google Docs.
We started out experimenting with the existing platform — discovering, establishing and stress testing a style(s) and library of components and patterns.
Simple, clear and inclusive
The platform is data-heavy and complex. Simplicity, legibility and load time are all paramount, furthermore, we want to make sure the components will be as accessible as possible. Our goal here is not to create the prettiest system, it’s to design a system that best meets our needs and the business needs (product itself).
It’s important to use colour carefully, it has to convey meaning, as colours in project management tools represent the project status - the red colour is used for risk and alert, yellow represents some issues that needs to be closely monitored and green means the project is on track. We also want to make sure the colours are high contrast enough for accessibility.
Icons and components
Based on our design principle of simple and inclusive, a library of icons was chosen from Fontawesome (it can be integrated easily for developers). The style will be maintained throughout the system with some bespoke icons.
After the initial phase of exploration, reviews and iterations, we arrived at a style we were happy with. The next step was to create a suite of patterns and components with all different states and scenarios - creating a comprehensive UI design system.
Documenting a design system
Creating a design system is not only for the design team but for developers, researchers or anyone who is involved in the product. It is important to be mindful that this design system can be view and share among all team members who don't have access to our design tools.
We decided to document the system in Google Docs for now (until better solutions come along). It is easily accessible by all team members, we can also gather feedback from customer success team or researcher with the comments in the document.
The design components needed a way of tracking the build and integration by developers. After discussion with the front-end developer, we chose to use Github as it can bridge designers and developers with preview, specs and CSS in one place (this is the first time for me to use Github).
One of the goals of this design system is to get everyone to speak the same language related to the components, I work closely with developers to achieve consistent, semantic naming that works for both design and code.
I am glad that the design system has introduced usability improvements and bring consistency to the platform. The process taught me a lot and it is the right decision to document the system in a way that everyone can view and give valuable feedback.
In hindsight, I would have researched on more seamless tools that bridge designers and developers - tools that would update from design master files to storybooks that allow a more efficient process.