TripIt
Documentation Template: Making Design Decisions Easy to Access
Streamlining Documentation for a More Transparent Process
A template for designers to keep track of design changes
The Need for Documentation
While working on various projects, the TripIt design team realized that not everything was being documented. Design decisions, insights, and key project information often lived only in team members’ heads, making it challenging to communicate and track design changes across agile teams. Documentation was seen as a “nice-to-have” rather than a necessity, often falling to the bottom of the priority list. On top of that, there was no standardized method or tool for documentation, making it easy for this information to get lost.
- Design decisions were often only shared verbally, resulting in lost information and knowledge gaps.
- The lack of a streamlined documentation process made it difficult for other stakeholders to keep up with design changes.
- Designers needed an easy-to-use template that could be quickly referenced by product and engineering teams.
Creating a Template in Figma
Recognizing that documentation needed to be collaborative, accessible, and easy to update, I decided to create a template directly in Figma. Figma was already the central tool for design at TripIt, and since it’s familiar to designers, product managers, and engineers alike, it made sense for documentation to live alongside the designs themselves.
My goal was to create a template that:
Enabled easy updates and customization to fit the needs of each project.
Leveraged Auto Layout so the document could expand as the content grew.
Included clearly marked sections for everything from user needs and product goals to design constraints, research, and key decisions.
I was able to ensure that documentation was easily accessible to everyone involved.
A Simple Template
The final UX Design Documentation Template is now used across all design projects at TripIt. The template exists as a component in Figma that can be copied into any project file, encouraging designers to fill in sections at the beginning of a project and update them throughout the design process.
Key Features of the Template:
Auto Layout: Expands with content, making it easy to keep information organized and visible.
Dedicated Sections: Includes areas for user needs, product goals, constraints, research, key decisions, and more, so each project’s context is clear.
Integrated with Figma: Ensures documentation is always alongside relevant designs, making it easy for anyone to find and reference.
Not only does the template capture essential design information, but it also helps guide and structure the design process itself. By documenting from the outset, designers have a built-in framework that supports clarity and continuity.
Takeaway
This template has made a meaningful impact on the team’s workflow, giving greater transparency and alignment. One teammate described it as “so damn helpful.”