Prototyping drag & drop into Sketch
Leading a Design System Team to improve company wide quality, usability, and scalability
Improve quality, user experience, and scalability of the overall product — while not impacting teams’ workflows — through the creation and delivery of a design system.
Role: Lead Designer - Design & product strategy, Workshop Facilitation, UX/UI design, Team roadmap & goal setting, Documentation, Identify and maintain process, manage designers
2 Teams (Core and a11y) - 4 UX designers (Including me), 6 Devs
A collective approach from the beginning
I organized and facilitated several workshops & 1:1 discussions focused on identifying:
- What could be standardized or made reusable
- Design & technical debt
- Cross-functional needs
- Standards & quality
While my team and I would own the work on the design system, creating buy in and a common language was a necessary step in order to introduce any design system.
Global customers, 43 languages
Teams were using their own typefaces and sizing even on the same page. In order to make sure our system was accessible to all of our users, I worked to create a type ramp that could fit the diversity of needs by
- Considering the existing hierarchy
- Looking at non-english like characters
- Accommodating for right to left languages
From 1,985 different colors to 33
In an effort to capture conversion, teams were using colors to make their feature the loudest on the page.
I worked with my team, along with the inputs from other teams, to simplify the color scheme. I formalised a smaller color pallete focused on:
- Cohesion across pages and platforms
- Uniformity in all UI components
Standards become components
With the key standards in place, I had the team divvy up the identified components to recreate them based on the standards and the quality bar we had set. Each component needed to:
- Be reusable for all users
- Work cross platform
- Meet accessibility standards
- Fit the current tech stack limitations (html/css)
The components shown here were the set that I owned and set the UI and interactions for.
Prototyping a tool
I worked with a developer to design and prototype a tool that would fit into the product development process. We focused on integration with Sketch and included some basic documentation and code snippets to help teams be successful. The goals of these decisions were to:
- Get the design system in use earlier in the process
- Help teams make decisions before scope or code is committed
- Allow design & engineering to have easier hand offs
Iterate after testing
The above prototype was released to a beta group to use as a part of their workflow. Key updates based on that feedback were:
- Better left nav organization
- Split mobile vs desktop views/code
- Build in a11y to help make better decisions
Lead the team by identifying key areas of investment
I created a roadmap by facilitating planning sessions with the team. I wanted to be sure they had an eye towards longer goals while continuing to deliver for the needs of all of our users.
Keeping teams engaged to maintain our success
As a way to keep in touch with all of the ongoing work, I continued to own the documentation and tooling for the design system.
Ultimately, the goal was to empower the business to feel confident in the use of the design system. The tools I created allowed teams to better adopt the system by:
- Using more flexible UI components
- Knowing how to contribute to the system
- Introducing more robust design documentation & interaction guidelines
- Becoming a resource for the changing design culture