Punch is an application that generates Punch Lists for construction managers and general contractors in real time on the job site.
Background
Western States is a real estate development & property management company based in South Jordan, Utah, specializing in the construction and asset management of commercial hotels and senior living centers throughout the Nation.
Western States uses Procore, a cloud based construction management platform that handles all communication, documentation, financials and legal workflows for Project Managers and Contractors. It's a comprehensive system to organize all jobsite operations.
The Friction - Western States project managers have frustrations with Procore's job site documentation process, where overly granular workflows turned routine photo and note capture into a multi-day burden instead of a few hours of field work.
Project Overview
Working in conjunction with the development team, design and prototype an intuitive utility mobile app, documenting and processing punch lists for individual and commercial use.
- Client: Western States - wslm.biz
- Role: Mobile Product Designer
- Scope: Spearhead end to end UX architecture, visual design, interaction design, SwiftUI prototyping and production ready assets for developer handoff.
- Impact: Streamline on site data capture with a frictionless flow to accelerate processing time, while integrating data with third party applications such as Procore and Fieldwire.
Heads Up Display - (HUD)
In the Air Force a pilot needs data such as speed, altitude and target combined with an unobstructed view of the terrain and sky before them. This combination costs neither a glance down at the panel nor a refocus of the eye.
The same principle applies to a mobile device, such as the view through a camera. The shutter, zoom, flash and aspect ratio are all layered on top of the camera's viewfinder, where the subject matter remains the focus, not the UI.
The goal of the heads up display is to optimize the functionality and usability for busy job site documentation that often requires a single hand and thumb only interaction.
Heads Up Display - Punch
As a Project Manager or Contractor tours the job site, their attention is on identifying, documenting and conveying corrections to the subcontractor or vendor.
The best way to accomplish that is allow for as little screen interaction as possible. The less tap gestures and processing required of the user will have giant gains in value throughout site walkthrough, turning hours into minutes.
Punch's Heads Up Display consists of two main features in the document process, add photo and assign a note.
Here it is in action. The goal is to keep the user moving, snap a photo + add a note and move on. Here in the camera view once a photo has been taken, immediately the user can add a note to it and add it to the current list. This cycle repeats itself until the user decides to complete the session by saving the list from the top left corner.
In the rare case of requiring multiple photos, the user simply lowers the action panel with a single downward swipe to re-engage the camera. A swipe up on the panel returns them to the note, as seen below.
Any instance requiring annotation to a photo would be challenging to keep directly in the HUD. Our next best option is display and dismiss that View as quickly and seamlessly as possible.
Here, the annotation view is activated when the photos in the panel are selected, and it animates in and out from the bottom of the screen.
Select the photo, annotate the photo, save / return to HUD.
Feedback from project managers flight testing the beta version of the HUD has been positive, with meaningful time savings during job site walkthroughs compared to Procore.
File Management
In contrast with Procore's complex and robust architecture the Punch app adopts a simple, straightforward file structure.
Creating folders and managing files isn't complex, but it doesn't have to be boring either. With some realistic imagery and a timeline grid, a standard folder structure can feel custom and unique.
One detail I've appreciated is SwiftUI's .matchedGeometryEffect, shown below.
Observe the tan folder and name minimize itself into the nav bar, also the file adopting the scale and positioning within a new view of the punch list.
These small details, when executed right, bring polish and delight to the experience. They also aid in context and comprehension of where you are in the project.
The end goal of Punch is to enable users to simply generate punch lists in an easy to use way that directly integrates with the Procore and Fieldwire API. The best way to achieve that is to automate tedious tasks and redundancies.
For example as a user creates a punch list it will categorize each punch according to the vendor or subcontractor, removing manual work and increasing speed to value.
In conclusion the Punch App is currently in beta and looking forward to completion and submission to the app store in late 2026. I'm grateful for stakeholders allowing me to share my prototypes with you as I look forward to adding more features to this project in the near future. Thanks for reading.