A design system in 4 months?
As the story usually goes, the organization was looking to develop a single destination for all customers to access available training applications. However, most of these applications were lacking a cohesive identity and design approach, thus allowing for a disjointed experience to our customer. To address this gap we had to create a design system, roll it out to application teams. The wrench was time; as due to prior commitments, my timeline to create a viable solution was only 4 months.
Scope
Design system takes lots of effort to wrangle into being. I have two designers, one developers. I took on the task with only one caveat, that the initial MVP/Version 1 scope will be small, only creating a Sketch toolkit of visual/ui components, with layout ideas that designers can use to help design their solutions. A simple web present with sample codes will be created to showcase the ongoing effort.
Research & Development
Burying the lead here, I did not start from scratch. There was a product in development with designs that key stakeholders wanted to frontline the effort. This is not a bad thing, because there's a starting point, and I didn't need to create from scratch.
However, during my general research phase, I found a big problem. The donor application's design paradigm was very limited to text based contexts, which mean my development checklist became:
-
Deconstruct the visual designs paradigm down to core ideas
-
Build using atomic design principle
-
Address UI gaps and provide common patterns
-
Apply company approved branding package
-
Ideate and generate layout concepts to engage potential adopters
Management
To ensure a smooth development timeline, I leaned on my team members, communicating what needs to be done, and letting them take charge of certain aspects of the projects. For my part, I handled the design development, coordination and meeting with key stakeholders, which team members would handle overflow work, website design and/or working with our dedicated engineer to develope and deploy code samples.
Implementation
By the end of the 4 months, we delivered what we planned
-
Version 1.0 release had a Sketch library file, paired with PDF documentation
-
Internal website to demo the UI and accompanying code snippet
-
Bonus – A POC iPad application to showcase the extensibility of ToolKit UI components an iPad.
Outcome
Design ToolKit had multiple buy-ins.
-
Showing how the components look inside various conceptual layouts helped application teams see potential for common visual alignment, and reinforce a consistent look across different products
-
Continuous collaboration with other designers help expand the scope of the Design ToolKit, and create a productive feedback loop to grow the patterns that more teams can utilize.
