Background
When I began the process of building Blue Shield’s new design system, we had several disparate style guides and no single source of truth. The goal in creating this system was to minimize inconsistencies in our UI and make clean, reusable components and styles to cut down on the amount of time designers and developers took to create new pages and screens. We would also significantly decrease the amount of design and development debt across products.
Another issue we faced was giving agencies and other external partners access to our style guide. A first draft of that external style guide (left) and our legacy internal-only style guide (right) is below. Both were hard to maintain and were outside of Sketch and our developer’s code base.
Getting Started
Blue Shield’s design system starts and ends with Sketch. Our entire library was built out here, from foundational elements like typography, colors and iconography to more complex UI elements like components.
Click through the images to the right to see screenshots of some of the Sketch Library.
Once I was able to nail down the foundational elements and starting components (and any updates moving forward), I pushed updates to InVision’s DSM.
Building out the DSM
Once the Sketch elements were uploaded to InVision DSM, I began to craft what the web-facing design system would look like. This included the site’s IA and overall layout. Click through the images below for some screenshots of the DSM.
One of the drawbacks of using InVision as a design system manager is the inability for developers to inspect new components when they need to code them. This could lead to discrepancies between the Sketch library component and the live in production component.
My workaround here was to create a separate tab called Inspect in a components documentation that links to a live prototype of that component where developers can get pixel-perfect specs for development.
Moving forward
Designers are now able to use the DSM on their projects as an embedded Sketch library where they can pull components/styles.
Developers are still working on building out the live components and we’re still adding new styles and components weekly, but we’re off to a great start in reducing design/development debt and creating more consistent experiences across web.
As we continue to move forward, we will begin building out additional design systems in InVision DSM for iOS and Android.
