Screenshot of the UX Documentation template

UX Documentation Template

A template to ease the pain of documenting design projects and decisions.

Problem

Design documentation can be a nuisance and is often considered an afterthought. It gets put off for other items deemed as a high priority. It can be difficult to decide on a tool to use for documentation and ease of use prevents many from even trying. The TripIt team didn’t have a clear or consistent way of documenting project information. Design decisions were living in our heads.

How might we ease friction to design documentation?

Process

Design calls for collaboration and inclusivity, while designers tend to facilitate the process. Figma is the design tool at TripIt, used by designers, and counterparts in product and engineering. Everyone knew to look in Figma for designs. I wanted to leverage Figma’s collaboration and ease of use for documentation. It made sense for documentation to live in Figma alongside relevant designs.

This document needed to be for everyone. It needed to be easy to update, read, and customize.

Solution

The UX Design documentation template is used at TripIt now with every design project. It exists as a frame in Figma that can be copied into a project file.

Designers are encouraged to fill in sections at the start of the design process and continuously throughout. It leverages Auto Layout, so it will grow with the content. There are clearly marked sections for user needs, product goals, constraints, key decisions, research, and more.

While meant to store pertinent design info, it helps guide and streamline the design process as well. A teammate said this was “so damn helpful.”
Duplicate in Figma