Supporting faster design iteration
Creating and innovating the companies design system to assist the digital team with faster deliverable hand-off and development ease.
Design System Creation
Overview
Researched and created a design system following atomic design principles. The focus of the system was ease of customization and use. After the first iteration I focused on updating the system further to make it quicker to use. At the projects peak it halved project delivery time.
Platform
Sketch, Invision DSM, and Abstract
Timeframe
Each iteration took a season.
Work I Completed
Project planning, product design, colleague coaching,
Research
I researched several large corporate design systems, the atomic design principles and UX principles from the Nielsen Norman Group, the Baymard Institute and more.
-
![Google Doc Book Covers]()
Initial Research
Reviewed several books and documentation on design systems including Atomic Design by Brat Frost, material design documentation, human centered design documentation, and design thinking documentation. I also scoured various design system repositories to compile how people were organizing their design systems and the benefits or problems that came from how they organized it.
-
![Documentation of UX Topics]()
Synthesis
My team had a general consensus to learn atomic design principles so it made sense to follow that methodology for the organization of the design system components. Previous project were for many different brands and operating systems so having components that fit on Apple and Android were favored.
-
![Abstract List of components]()
Outcomes
Focusing on lowering development time I did a major audit of all recently worked on projects to pull components that were commonly reused. Common items that took a lot of time to customize but were generally reused included things like calender pickers, input forms, graphs, tables, modals, and tabs.
Follow up interviews after a year of usage
-
![Sketch Components being detached from symbol]()
User Interview findings - Problems Found
In the first iteration of the design system resizing caused components to break so users would detach and create their own from the original component. The other major issue was team mates would grab components but not understand the best practices on when they should or should not use a certain component.
-
![Invision DSM Documentation and compoents]()
User Interview findings - Solutions Made
To address sizing issues I set up the component symbol in Sketch to re-size correctly. To make sure team mates were utilizing components correctly me and my manager pulled the research documentation to create best practices that display in the team’s new Invision DSM.
Design System - Second Iteration
With Invision DSM and Sketch the digital team experienced quicker design hand-off speeds and less product rework.
Final Design
-
Before
Organization of design system components utilized the Brand Frost atomic design principles. The 1st iteration included all commonly utilized components for ease of use. While the design system improved design speeds, it was still not at it’s peak. The system needed documentation, multiple sizes, and resizing.
-
After
Utilizing Invision DSM and Sketch the updated system was fast and easy to use. It’s usage by the digital team made design hand-off times quick enough for project managers to notice. The design system also proved to be a great training tool. I used the design system to coach team mates transitioning from print to digital design and with project managers as a discussion tool with clients.
