Create and/or refine the design system, including implementation and ongoing maintenance to ensure consistency, efficiency, and accessibility.
My Process
- Audit: Conduct a thorough assessment of existing design elements and standards, comparing and identifying inconsistencies, patterns, and structural opportunities within the system.
- Accessibility Integration: Utilize specialized tools and plugins to evaluate the design system's accessibility against WCAG standards, ensuring inclusivity and compliance.
- Research: Engage in extensive research to gather insights and analyze user needs, aligning the design system with user requirements and industry best practices.
- Ideation: Generate wireframes and mockups, exploring numerous iterations and potential solutions to refine the design system's components and interactions.
- Feedback and Refinement: Gather and incorporate feedback into iterative revisions until achieving the desired balance of usability, scalability, and consistency.
- Collaborative Implementation: Partner closely with engineering teams to translate design system specifications into functional components, facilitating seamless integration and deployment.
- Monitoring: Regularly monitor usage and track performance, identifying areas for optimization and improvement over time.
Research & Analytics
To ensure the effectiveness of each design system, I leveraged a combination of resources and prior research to validate the principles and approach.
- Stakeholder Interviews: Conducted interviews with key internal stakeholders, including product managers, developers, and designers to align on business goals, priorities, and requirements for the design system.
- Industry Research: I stay on top of emerging design trends, best practices, and industry standards to ensure that my design systems remain relevant and innovative in a rapidly evolving landscape.
- Competitive Analysis: Compared design systems and user interfaces of competitors and industry leaders to gain insight and discover opportunities for differentiation.
- Technology Assessment: Evaluated the technological landscape, including front-end frameworks, design tools, and version control systems to determine the most suitable platforms and tools for implementing and maintaining design systems efficiently.
Core Principles
Core principles varied across these projects as they were tailored to product industry, brand identity, and target audience. However, the following core principles are ones that I find universal and use in all of my design system projects:
Accessibility
- Ensuring that the design system is accessible to all users, regardless of their abilities or assistive technologies, promotes inclusivity and usability for diverse audiences.
Consistency
- Maintaining consistency in design elements, patterns, and interactions across all components fosters familiarity, predictability, and a cohesive user experience throughout the product ecosystem.
Extensibility
- Designing the system with extensibility and scalability in mind allows it to incorporate customizations and additions and adapt seamlessly as the product grows, ensuring flexibility and efficiency in accommodating diverse use cases and future enhancements.
Project Execution
Leveraging the research insights and core principles, I began by independently creating and refining the required deliverables such as components, interactions, specifications, and documentation. Next, I collaborated with key stakeholders to gather feedback, make iterative improvements, and ensure that changes and new elements meet all needs and expectations from a design standpoint.
I then worked closely with developers to implement these design systems, ensuring that components adhered to best practices. Before release, I conducted thorough testing to ensure that design system components functioned as intended across different devices, browsers, and screen sizes. This involved identifying and addressing any bugs, inconsistencies, or usability issues to guarantee a seamless user experience.
Throughout this process, I also created comprehensive documentation and training materials to guide designers, developers, and other stakeholders in effectively using and implementing the design system. This includes guidelines, patterns, and best practices for both design and code, and was often provided in multiple formats (written, video, code) in order to reach various internal audiences.
After finalizing all preparations, I worked with product managers and developers to coordinate release and deployment. Following release I periodically checked usage and gathered feedback to identify areas for improvement or optimization. I frequently communicated updates and changes to relevant teams and stakeholders, and I provided ongoing support as needed to answer questions and increase adoption.
Result
- CircleCI: This team started with a patchy design library in Figma. By the end of this project, I created a system of principles and patterns to align on consistency and improve accessibility, designed several new components, and worked with developers to build and release all of the components in code. I also built and maintained all of the documentation from scratch and held regular office hours to education and train others.
- Electronic Arts: This team started without a design system. I created and documented research to help establish their core principles, foundations (color, typography, iconography, imagery, etc.) and I worked with cross-functional stakeholders to gather requirements and gain support for future development and adoption.
- Rapid7: This team started with an inconsistent and inefficient design library in Sketch that was passed around through email and Slack. I audited the system, created patterns and standards for consistency, improved the existing components, wrote guides for the creation of new components, and brought on a new tool to ensure efficient sharing of the design system less prone to human error.
- StayWell: This team started without a design system. I collaborated with another designer to introduce a design system from scratch, complete with custom iconography and photography guidelines to assist others using the brand.
Gallery
