Designer-developer collaborations

For Whom?

1. UX Designers in agile environments.

2. Software/UI developers in agile environments.

3. Project managers in agile environments.

Impact

Creating a more collaborative experience for design teams internally and externally, where issues
Creating more transparent design workflows that can promote the design lens as a whole and make it more measurable to designers and cross functional teams (in terms of bio-cost).
Empowering design teams to systematically document their efforts through writing and various functions on design software.

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.