>
Area Calculation System
Area Calculation System
An automation platform that extracts data from architectural files to generate regulation-compliant area calculation reports for building permits
Role: UX Lead (The Planning Administration) & Lead Product Designer
Areas of Expertise: Redesign, Workflow Automation, Information Architecture, UI Specifications, Enterprise Systems.
Context
Architects and urban planners undergoing the statutory licensing process are required to submit a meticulous breakdown of all planned areas within their architectural blueprints. This validation and approval form a critical threshold; without it, building permits cannot be issued, halting the transition to the actual construction phase.
The Area Calculation System was designed to streamline this process. Users upload their professional workspace files (CAD or Revit), and the system interfaces with an automated automation engine (RPA) that extracts data from the file layers. It then generates an authenticated, regulation-compliant area report, a workflow that saves significant time, eliminates human error, and accelerates the review process within local authorities.
The Core UX Challenge
The legacy system was fundamentally unusable, suffering from extreme technical friction and severe interface gaps. The core challenge combined the need to restructure the macro workflow architecture with a deep overhaul of poorly designed micro-components:
-
Fragmented & Disconnected Screens (Macro): Every minor step required a dedicated screen. Users had to endure a tedious four-screen journey for a single calculation attempt: two massive screens for manual data and personal detail entry, a separate file upload screen, and a detached fourth screen just to view reports and outputs.
-
Unstructured Iterations (Macro): All calculation attempts and runs were dumped into a single, cluttered data table. The lack of hierarchical nesting or project grouping caused users to lose track of past versions and modifications.
-
Component-Level Complexity (Micro): At the component level, the entry point was highly ambiguous, utilizing a generic "Add" button that failed to communicate its function as a gateway to creating a new calculation request. Furthermore, the upload component forced users to comply with rigid "black box" rules, lacking status transparency or clear error handling.
Target Audience & Research
To unpack this complexity, comprehensive user research was conducted in the field.
This included contextual inquiries and observations of architects preparing blueprint files in their native environments (Revit / CAD), alongside routine work sessions with a professional architect serving as a chief consultant to the Planning Administration. Two core user groups driving the ecosystem were identified:
Architects & Planners (The Submitters):
Highly skilled professionals operating under strict deadlines, facing heavy bureaucratic loads and a lack of standardization. They require an efficient, focused workspace that avoids over-engineering. They look for absolute transparency and validation from the automation engine, as they bear the ultimate legal and structural responsibility for the submitted data.
Plan Reviewers / Local Authorities (The Reviewers): Government professionals at local planning and building committees working under rigid performance targets. Historically, manual verification of areas consumed vast amounts of their time. Reviewers need to receive reliable, pre-verified, and uniform data to execute validations quickly, efficiently, and with zero risk.
The Solution
& Restructured Architecture
into
The strategic transition of the platform into an internal module within the master 'Rishuy Zamin' (Available Licensing) ecosystem was identified as a prime opportunity for a holistic UX overhaul. While the integration eliminated redundant identification fields, the true breakthrough was achieved by proactively stripping away unnecessary inputs and utilizing progressive disclosure. This design approach ensured the workspace remained simple, clean, and minimal in its default state, surfacing advanced capabilities only when contextually required
The structural architecture was condensed into two primary screens:
01
The Dashboard: Project Management & Data States
The landing dashboard was redesigned to transform an overwhelming database ledger into a quiet, focused control center that drives immediate action while fully mapping out dynamic system behaviors:
Before
-
Clear Call to Action (CTA): The ambiguous legacy "Add" button was replaced with a prominent, unambiguous primary CTA at the top of the page: + Create New Project.
-
Smart Live Filtering: Recognizing that architects primarily manage their most recent workloads and do not handle dozens of active projects concurrently, the complex filter matrices of the past were hidden. The data table defaults to a chronological sorting order (by creation time). Filtering parameters were tucked away into a clean, collapsible component. Furthermore, select inputs were mapped to trigger asynchronously, selections filter the table automatically on-change, eliminating the need for a secondary "Apply Filter" click and reducing friction.
-
Comprehensive Data States: The interface was systematically mapped to handle all real-world data scenarios seamlessly:
-
Empty State: A dedicated view guiding users when no projects have been created yet.
-
Minimal Data View: Optimized table spacing when fewer than three items exist.
-
Pagination: Structured page divisions when active project counts exceed 10.
-
No Results State: Clear, contextual feedback when search queries or filters yield no matches.
-
02
The Calculation Workspace: 4 Screens Condensed into 1
This is the operational heart of the system, where four previously disconnected screens (data entry, uploading, and output viewing) were consolidated into a single-page workspace.
-
System-Guided Upload Workflow: Users select their specific submission type via radio buttons, and the system dynamically generates the exact upload slots required for those specific formats (DWG, DWF, DAT). This completely eliminated the need for users to manually compress complex ZIP archives according to strict, unforgiving nomenclature rules. Error handling is handled inline and contextually; the system highlights only the specific file slot that failed validation, allowing for instant, isolated replacement.
-
Collapsible Version History Accordion: To manage the iterative trial-and-error cycle with the automation engine, a hierarchical version tree was integrated at the bottom of the workspace. When a successful calculation run is processed, a collapsible accordion expands to reveal the verified output documents for direct download, accompanied by a vital shortcut: Attach to Building Permit Request, a critical feature previously missing from the ecosystem.
-
Inline File Validation Pop-up: To prevent page redirection or context switching, a modal component was integrated, allowing architects to inspect the files attached to successful runs directly within the current workspace environment.
-
Minimalism vs. Enterprise Functionality: Utilizing these dynamic components (accordions and modals) transformed the workspace into a flexible, highly capable engine while maintaining a clean, scannable visual baseline that prevents cognitive overload.
High-Fidelity Prototyping
During the specification phase, and to accurately simulate complex back-and-forth feedback loops and progressive disclosure states with the automated parser, a high-fidelity interactive prototype was engineered using Axure. The prototype served as a single source of truth and a synchronization tool across Product and R&D teams, drastically reducing development overhead and eliminating technical debt during the engineering phase.
Visual Style Guide & UI Specifications
Developing an enterprise platform during a period (circa 2019/2020) when automated design system tokens and component libraries were not standardized across public sector architectures demanded a rigorous, highly detailed approach to interface logic.
A comprehensive visual Style Guide and explicit UI Specifications sheet were authored from scratch.
Rather than relying on automated frameworks, the design specifications manually outlined the structural mathematics of the system: a rigid layout grid (Spacing tokens ranging from xs-5px to xl-25px), a dedicated validation color palette (e.g., #952030 for error states and #207030 for success markers), typographic scales (Arial, 13pt to 18pt), and locked button height tiers tailored to component hierarchy (Small Buttons at 30px, Pop-up Controls at 40px, and Primary System Actions at 50px).
This exact blueprint provided engineering teams with unequivocal rendering guidelines, ensuring flawless layout fidelity and system-wide visual alignment.
Validation & Impact
-
Usability Testing: The high-fidelity Axure prototype was deployed in the field for rigorous usability tests with active architects, identifying friction points early and refining user flows well before a single line of production code was written.
-
Operational Impact: Post-launch telemetry and usability evaluations validated that transitioning to an integrated, automation-driven workspace generated immediate, systemic improvements across the national licensing pipeline:
-
Accelerated Licensing Timelines: Drastically shortened waiting and review bottlenecks, paving a faster path to building permit approvals.
-
Zero-Error Data Fidelity: Virtually eliminated human calculation errors, maximizing the accuracy of structural data submitted to municipalities.
-
Ecosystem Standardization: Established a clear, uniform, and mutually understood professional language bridging private sector architects and regulatory bodies.
-
Resource Optimization: Saved thousands of operational hours for both submitting designers and public plan reviewers.
-
National Scale Integration: Provided a high-velocity digital tool helping regulatory committees accelerate housing approvals nationwide.
-
The Bottom Line:
The redesign successfully condensed a fragmented, multi-step journey into a unified, single-page workspace. By introducing transparent automated feedback and removing administrative duplication, the system minimized bureaucratic friction, saved critical operational hours, and measurably accelerated building permit issuance times nationwide.
