Custom Formula Builder

UX / UI Design
Project Overview
This feature was being designed for OnCenter's desktop takeoff application to give construction professionals the ability to create custom material calculations across different trades. While ultimately not released due to [business priorities/product direction changes], the research and design work provided valuable insights into how different construction trades approach calculations differently.I began by researching how construction professionals calculate materials across different trades—drywall, framing, steel structure, concrete. Each requires specialized formulas..
My Contributions
  • Researched construction calculation formulas and industry standards
  • Mapped formula requirements across condition types (linear, area, volume) and documented variable needs
  • Created wireframes for formula editor interface with variable insertion and function library
  • Designed modal interactions for selecting variables and mathematical functions
  • Compiled calculation tables showing which formulas apply to different shape types
  • Analyzed existing construction calculators to understand current tools and approaches
Overview of the different screens in the flow
The wireframes were crafted using Adobe Illustrator. These, along with the research, were compiled into a Word document and converted to a PDF. This format was then shared with the Product Manager to solicit feedback, address any questions, and identify areas for process refinement.
OnCenter
UX / UI Design
Research and Discovery
Adobe Illustrator
MS Word (for the document)
Adobe PDF
I began by researching how construction professionals calculate materials across different trades—drywall, framing, steel structure, concrete. Each requires specialized formulas. I documented existing calculation methods, studied online construction calculators, and organized requirements into tables. I created wireframes in Illustrator and compiled the research and workflow documentation in Word.

The PDF format allowed the Product Manager to leave notes and clarify requirements, helping me better understand the flows. The documentation showed how users could build formulas using variables specific to their condition type, with options to select predefined industry formulas or construct custom ones.
Notes that were part of the documentation for the custom formula builder
The document contained essential data for the wireframes and workflows I was suggesting, enabling the product manager to identify and rectify any misconceptions.
Component Library
UI Design
Migrated and rebuilt Adobe XD components to Figma
Payment Portal
UX / UI Design
Boost user trust, improve clarity, and streamline payment process.
User Login
UX / UI Design
Updated to enhance security, usability, and streamline access
FieldCenter
UX / UI Design
Updated the FieldCenter iPad app for better user alignment.
Powered by Webflow
FacebookTwitterInstagram