Background
The R&D design team consistently faced resource limitations, often with less than one interaction designer per product. Each release prioritized only the most critical work, resulting in a compartmentalized design approach focused solely on immediate needs. As a consequence, design recommendations were often trimmed to align with the “minimum viable product” during implementation. Remaining UX considerations rarely made it into a backlog due to their perceived low priority.
While this approach is somewhat feasible for individual products, it posed a significant challenge for the overarching design system. Without comprehensive design integrated within it, a design system loses its core functionality and purpose. A design system lacking robust design insights and solutions cannot fulfill its intended role of ensuring consistency, efficiency, and usability across products.
As part of my role in the design system, I developed ways in which a single interaction designer (IxD) can enhance their process to meet the needs of the team without compromising the integrity of the system.
Challenges
Ixd work is often unmanaged and untracked
When clients need a component that isn’t included in the design system, the expectation is that they will either wait for development to build it or build it themselves. However, when clients need design that isn’t included in the design system, the expectation often leans towards immediate support. This lack of management oversight leads to ongoing follow-up and support, impeding effective task prioritization and design due diligence.
Ixd is sometimes left out of the equation
While XD and Figma components include both visual and interaction design, that doesn’t mean the interactions have actually been designed. This approach to working may be agile, but it’s not sustainable. Visual designers and developers don’t know what they don’t know. Interaction details can fall through the cracks and not be identified until implementation is done—if they are noticed at all—compromising quality and usability.
Ixd deliverables easily become out of date
New questions and considerations requiring changes to documented design decisions often come up during implementation—which may be weeks or months after design production. Developers often ask for information and incorporate it into implementation as they work, and updating published design specifications accordingly is labor-intensive. However, the absence of accurate documentation hinders the goal of consistency.
Ideation
How might we establish a process for managing and tracking Ixd tasks?
How might we optimize Ixd knowledge sharing to match the velocity of development?
How might we develop a system for maintaining accurate Ixd documentation?
The company had spent a lot of time, effort, and energy investing in the engineering process. The design process had received comparatively less attention. Recognizing this imbalance, we asked ourselves one crucial question:
Can we leverage what the team is already doing to establish a design process that is effective and efficient for both designers and engineers?
Managing & tracking interaction design work
Defined roles for creating IxD GitHub issues
- Discussed existing workflow within GitHub to identify gaps or inefficiencies when applied to IxD
- Defined and allocated responsibilities among team members for IxD issues in GitHub
- Ensured alignment with team’s broader workflow and compatibility with developer scrum process
Clarified team workflow expectations
- Identified pain points and bottlenecks within the existing IxD workflow
- Facilitated transparent discussions to set clear and concise expectations
- Collaborated with team members to implement and iterate improvements
Integrated IxD in twice-weekly meetings
- Ensured IxD participated in scrum sprint reviews and retrospectives
- Enabled IxD demos once a week at team meetings
- Focused on actionable takeaways and capturing follow-up steps
Outcomes
Defining clear roles for creating work items facilitated more visible and reliable tracking of interaction design tasks. Team members could easily identify, prioritize, and discuss IxD work within the GitHub environment, leading to better coordination and alignment with overall project goals.
Integrating IxD into regular team meetings enhanced alignment with development cycles. Through active participation in scrum sprint reviews and retrospectives, designers gained valuable insights into development progress, fostering more synchronized and cohesive communication and collaboration.
Overall designer literacy in GitHub was increased, empowering designers with the skills to navigate the platform in various contexts and align their skills with industry-standard practices.
Accelerating interaction design velocity
Created a markdown IxD spec template in GitHub repo
- Developed a structured and standardized Markdown template for reuse
- Identified essential sections such as behavior, interactions, and accessibility
- Ensured template could scale to multiple different documentation use cases
Piloted submitting IxD specs as pull requests
- Acquired necessary knowledge to enable submission of pull requests
- Initiated a trial phase for submitting IxD specs as pull requests
- Gathered feedback and insights to refine the submission process
Refined IxD spec template for ongoing use
- Iteratively refined the template based on pilot experience
- Examined overall impact on IxD workflow and collaboration
- Assessed efficiency of approach over specifications made exclusively in XD or Figma
Outcomes
Streamlining the IxD specification production process by using developing tooling had a profound impact on the team’s workflow. The team experienced a noticeable reduction in the time and effort required for creating design documentation, contributing to a more agile and responsive design system.
Designers were able to swiftly address and resolve challenges, resulting in fewer delays and better collaboration between design and development. Integration of design documentation into a platform that developers used every single day facilitated a shared understanding of design intent and implementation details.
This strengthened the partnership between both disciplines, enhancing the overall consistency and cohesiveness of the design system.
Maintaining interaction design documentation
Submitted early PR drafts for review
- Orchestrated timely submission of early drafts for review
- Engaged developer feedback loop for identifying issues early
- Ensured documentation remained comprehensible and easily revistable
Committed changes and resolved feedback
- Applied a process of continuous improvement based on feedback
- Called in-person collaboration sessions for disagreements
- Ensured IxD decisions were tracked and documented
Maintained published IxD documents
- Ensured ongoing consistency and accuracy of information across specs
- Reviewed and updated published specs to reflect latest requirements
- Added references to related IxD specs as they evolved
Outcomes
Early and regular feedback loops facilitated timely responses and adjustments, fostering a continuous and efficient dialogue between design and development. Open communication channels allowed for quick resolutions of queries or concerns during the beginning stages of documentation.
Committing changes and resolving feedback in GitHub created a transparent and traceable record of design decisions. Continuous improvement based on feedback helped address uncertainties and risks early on, ensuring a more reliable and consistent implementation.
Maintaining published IxD documents ensured that all specifications reflected the latest design decisions and rationale, providing a comprehensive and up-to-date resource for both current and future reference. This systematic approach fostered a shared understanding of design reasoning among team members.
Lessons learned
- Empowering interaction designers enables them to contribute more meaningfully
- Aligning design with development tooling streamlines processes and enhances collaboration
- An emphasis on proactive feedback and iteration in documentation helps both the design and communication of the design
Next steps
- Incorporating documented best practices into Storybook
- Continuous refinement and optimization of interaction design processes
- Ongoing collaboration with developers, leveraging tools like GitHub
Unfortunately, I was not at the company to move forward with any next steps.