Indeed “Design System”
Business goal
The goal of this domain was to decrease design & technical debt and to increase velocity product development across Indeed.
The Design System Team responsibility was to create a flexible design system to support all of the product teams across indeed.
The target audiences were:
Primary internal users - Engineers, Design Technologists, Product Designers, and Product Managers
Secondary internal users - Content, PMO, and Marketing
My role & design process
As the UX Manager of Design System, I managed a team of 6 designers ranging from Associate to Senior Product designers who delivered high quality designs supported by research and user need. Processes were created to operationalize the design process as we worked with each other and collaborated with the cross functional team. I partnering with Leads and ensured timely delivery against milestones and OKRs that laddered up to company goals with recurring communications to leadership on progress.
Our design process hinged on a user centric design thinking. Some methodologies: empathize with users, problem framing, work with Brand Design to align on foundations and principles, north star visionary workshops, solution, BETA test, iterate, release ALPHA incrementally to 100%, implement UI kit, code, and documentation site
Empathize
Personas
Developed through surveys and documenting pain points:
“Jason” - Designer
“Dave” - Software Engineer
“Elizabeth” - Design Technologist
“Julia” - Product Manager
Internal Audit
Inconsistencies in these component families (priority order):
Buttons and actions
Inputs
Menus
Feedback
Layout
Chips
Overlay
Progress indicators
Data viz
Usability Lab Study
Issues Severity Table
Design guidance - Severe
Lacking components - Severe
Lack of examples - Severe
Component flexibility - Severe
Define the problem
Problem statement
How might we create a flexible design system that solves challenges across different product teams, domains and platforms with the goal of increasing adoption, visual consistency, product development velocity, and decreasing design and tech debt?
Hypothesis
Provide complete foundations & principles with stronger usage guidelines, deliver the components, guidance & best practices for patterns (both code and design), allowing the teams to construct their experiences as they need with visual unity and consistency. We will find this to be true when we see a 5% increase in adoption in both the UI kit and Component Library.
The Approach
Atomics
Lego blocks were the metaphor used for Atomics with industry standard affordances and strong foundations & principles.
Patterns
Lego assembly instructions were the metaphor for Documentation for design and code usage.
Component
Lego Batmobile is the metaphor for an assembled component using Atomics and Patterns.
Approach diagram by Casey Hunt, Design Technologist
The Result
Design and documentation of the Atomics, Foundations & Principles proved to work 7 of 7 of our BETA testers. The result complete documentation to be implemented into a V2 UI kit, refactor of the component library and documentation site to test ALPHA. The volumes of documentation can be shown via a walkthrough, contact me in “About”.
Foundations & Principles
Example: Styles
Dev Gupta, Principal Designer
Atomics
Example: Chips Family
Esther Lim, Product Designer
Documentation Site
Onsite Training in Global Tech Offices
Designed a Design System Training program for all Tech Offices (Tokyo, Austin, Seattle, and San Francisco). DS Designers were able to take users through the structure of the Design System through lectures and workshops. Designers below: Andrew Fischler, Cadenza Wang, and Esther Lim.
