Foundation Software

2024

Building a Document Annotation Tool for Construction PMs

Challenge

For busy execs and project managers, making important edits to documents could only be done outside of the product, costing precious time and creating a disjointed user experience.

Tasks

Enterprise Product Design
Product Feature
Cross-Functional Collaboration
User Journeys
Rapid Prototyping
Wireframing

Sector

SaaS for Construction

Timeline

2 months

Overview

I lead the design of a feature enabling stakeholders to annotate documents

Being the only designer on this project, I was tasked with creating high-fidelity prototypes in Figma and passing my designs off to developers.

Throughout the project I presented them during grooming meetings with the team, while working around technical constraints.

Business Impact

Time-on-Task

I reduced the time it took users to add annotations or edits to architectural drawings and important files.

Retention Rate

This feature was requested based on feedback from clients, and it's likely to increase our user retention rate for PHQ.

Net Promoter Score

By listening to our clients pain points and building new features to address them, we increase the likelihood of gaining new clients.

problems

By making annotations and edits outside of our app, common tasks were taking too long

Executives, project managers and stakeholders of PHQ often need to make quick, brief edits to important documents like architectural drawings and memos.

These users need to make so many edits and annotations to important documents and files, that the time saved is worth building into the app.

Project Process

Building this functionality from scratch wasn't realistic so we had to work around integrating external tools

Technical Discovery

The team landed on Foxit to integrate into PHQ to perform the meat and potatoes of the operation.

Determining User Needs

Outside of Foxit, users needed the ability for different file versions, annotation layers and comments.

Market Research

To design an interface with layers, comments and versioning, I looked at tools like Figma and Adobe Suite for inspiration.

High-Fidelity Mockups

I designed different in-depth scenarios like commenting and version/layer management in Figma

The work

A collaborative effort and a great introduction to working at Foundation

This was my first project at Foundation Software that included their full product development process.

I was excited by the amount of collaboration between the different camps like development, BA, PM and myself being UX.

The process of designing while navigating technical and business requirements is a much more welcome challenge for me than just design for its own sake.

Design Thinking

Breaking down the different ways that design thinking steps and principles were used on this project.

Empathize

I recognized the pain of having to switch back and forth between programs to complete tasks, especially as a busy stakeholder.

Define

Users needed a clear and quick way to annotate documents, redact sensitive info, manage versions and leave comments on different versions.

Ideate

I specifically looked at apps like Figma and Photoshop for inspiration on the layer management UI.

Prototype

High-fidelity Figma prototypes, illustrating all use cases including edge cases and detailed interactions and animations.

Test

Unfortunately due to a tight schedule, no testing was done on this project.

Implement

Hand-off to external devs, demo for the team, then review UI accuracy against the mockups, or make any changes due to constraints.