Designer-developer collaborations

Project Impact

Created a smoother collaborative experience for the design team internally and externally with development teams by creating and tracking tasks together from early on in the course of the project.

Created more transparent design workflows that overall promoted the design perspective and made design responsibilities more measurable for designers and cross functional teams by establishing a framework to estimate design tasks.

Empowered the design team to systematically and more seemlessly document efforts by utilizing project management tools and/or commenting/annotation features on design software in the context of task tracking and design reviews.

For Whom?

1. UX Designers in agile environments.

2. Software/UI developers in agile environments.

3. Project managers in agile environments.

Background

At the Center for Digital Humanities (CDH), design and software development (now known as the research software team) work closely as one team. The team follows the agile product development methodology. The opportunity to work directly with developers in an agile environment at the CDH allowed me to further test the validity of my findings from my graduate thesis project, Weave, and to use my findings to improve designer-developer collaborations.

Contributions

The following are some of the important improvements we made to the design process at the CDH,

Fragmenting the work by site section, UI component, device size, and theme. This strategy makes it easier for the handoff process to become iterative.

Managing design work similar to development work, in two-week iterations, and acknowledging design accomplishments as part of iteration reports.

Making design work more transparent and manageable by planning and tracking it as design issues on github in the beginning of each iteration.
Making tasks measurable by estimating design issues based on their complexity and amount of time needed to complete them.  
Implementing the design review process through a hybrid of github comments and meetings, because reaching explicit agreements on all the work at weekly meetings is often hard and inefficient.
Implementing two layers of design reviews, first with developers (internal team) to resolve any gaps in communication, then with the project team to review the revised designs.
Organizing related design issues on github into groups as epics.
Participating in team conversations on data structure at the beginning of a project to learn about the data landscape, provide input, and inform opportunities for direction of design.
Initiating ad-hoc conversations and whiteboarding with the developers to resolve design implementations.

Organizing designs on Figma based on site pages (such as search results, document details, homepage, etc), as well as UI components, sitemap, color, and type styles.
Implementing UI components and designed pages in Figma’s auto-layout containers to document margins, padding, and vertical spacing which can be inspected by developers.