Foundation Software

2024

Streamlining Collaboration by Designing a Document Annotation Tool for Construction Managers

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 led 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 these prototypes during grooming meetings with the team while addressing 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 frequent edits and annotations to important documents and files, making the time saved by building this feature into the app worthwhile.

Project Process

Building this functionality from scratch wasn't realistic, so we integrated external tools

Technical Discovery

The team chose to integrate Foxit into PHQ to handle the core functionalities.

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 various in-depth scenarios, such as 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 level of collaboration among the different teams, such as Development, Business Analysis (BA), Project Management (PM), and myself in 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 information, 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 conducted for 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.