Living systematic way to compose application interfaces for an efficient Design Workflow and a great Designer experience based on Atomic Design principles. It automatically gets your designs synced with your defined UI standards and your design team. It also let's designers focus on creating amazing experiences and less on the building blocks that make up those experiences. This ensures consistency, cohesiveness across a product, and faster delivery of Design, Test and Code. Check out my Medium posts to learn more.
Duration: Jan 2017- Present
Started from a conversation me and another fellow coworker were having over lunch. We were essentially brainstorming ways in which designers could craft experiences with the same building blocks and design patterns. At the time, we were having problems with consistency and part of my job as a Design Technologist is making sure we have cohesive unfragmented experiences in our products. I saw that Designers did not have a Source of Truth where they could pull their building blocks from and they were using any tool to get the designs forward. Among other problems the issue I wanted to focus on was this: "Designers were handing over what seemed to be wired-frames to Devs instead of mature designs, and Designers and Devs were not speaking the same language, leaving for enough ambiguity for Devs to design inconsistent iterations."
Working as a developer, I noticed that companies come up with their own Tech Stacks and Devs are supposed to use those technologies without deviating. They also have guidelines they use to build and to stay always in sync with each other - especially if you are working under a Component Architecture. I needed find a way to implement the same engineering principles but for our Design Workflow. My hypothesis was this: “If I could introduce a Design Stack in our company that allowed us to 1) get every designer designing from the same set of tools and building blocks, 2) could provide us with Version Control for designs, 3) could improve Design handouts and communication with Devs, and 4) could give everyone in the company 100% visibility as to the status of those designs, then consistency would be almost ensured and we would design and test 10x faster saving the company time and tons of money.” The first thing I did was to see what other companies were doing, read tons of articles (no joke), and ask questions directly to companies I knew were good in Design. Then I got a tip from the Design Systems slack channel - Brand.ai. I had found my stack and what I now call a Design Ecosystem. 1) Brand.ai to get us in synced with Version Control, 2) Sketch App to get us working in the same tool, and 3) Invision to get us sharing and collaborating.
I am a big believer in selling by showing - it is easier. I designed a small prototype of the ecosystem using all 3 tools. I used a couple of Components that were already built in code at that point and translated them into Sketch Symbols making sure that the Overrides in Sketch matched directly with Component’s attributes. That way Designers and Devs would talk in the same language when dealing with the data that the Component was consuming. Then, I created a small presentation along with a video (below) and a prototype in Invision, and showed to people around the office. Our UI Architect and my manager loved the idea and asked me to pursue this initiative full time.
I then composed the first version of something I called the Master UI Toolbox Kit containing more smart Symbols in Sketch that had a 1-to-1 relationship with coded Components. While doing this exercise, I realized that we needed a framework to define the attributes or characteristics of our UI (Color, Typography, Spacing, Borders, Shadows, Motion, ect). Ideally, this would have been our starting point. Our UI architect, had a really good idea of using Design Tokens. These Tokens are defined within the UI Kit Sketch file and drive all of our UI. I explain what that means in a series of articles coming up soon.
While constructing my Alpha of the Master UI Toolbox Kit file, I asked about 4 designers to be my Alpha testers of the ecosystem. They started designing all of their experiences using the Symbols synced with Brand.ai and presenting prototypes in Invision. I went through tons of changes based on their input and made it easier for us to identify what building block we were missing in the UI Kit and start to prioritize their standardization. This also made us aware that to be able to have a living ecosystem, we needed a process for Designers could contribute to the Master UI Toolbox Kit file. We tested a proposal process where designers would present proposals to Design Leadership and my team to create new Design patterns or to enhance existing ones.
After going through many iterations with the Beta Testers, I launched v0.0.0 of the Master UI Toolbox Kit in Sketch for all the designers to use. They ecosystem had everything you needed to support agile product design and the construction of our Design System: A way to get all of us in sync using a common design and implementation language, improved collaboration, faster Designs and Testing, Version Control for designs, visibility to status of designs, etc.
Based on the feedback I received from the Alpha testers, I did not want our UX Designers to have to make styling decisions so I made the Symbols smart enough to incorporate our standardized styling patterns and only the allowed options for that specific symbol - state changes, hide/show nested elements, etc. When constructing all Symbols I also followed Atomic Design principles. Every symbol is composed of smaller symbols and all of our Symbols have Design Tokens associated with them. Therefore, there is no styling decision that cannot be tied back to a defined standard. Our Source of Truth was born.
I am writing a series of articles about this whole process. It is a process I have learned to love and one that I know everyone should follow. Regardless of how big your company is.