.png)
STACK Construction Platform: Cross-Device HMI Architecture & Mobile Optimization
ROLE
Lead UX/UI & Information Architect (IA)
DOMAIN:
Construction Technology (ConTech), Pre-construction, Takeoff & Estimation, Enterprise SaaS
SCOPE:
Desktop-to-Tablet/Mobile UX Adaptation, Touch-Interface HMI Design, Design System Scaling, User Research, Information Architecture Optimization
DEVELOPMENT:
Web Platform, iOS/Android Tablet & Mobile Responsive Ecosystem
Project Overview & HMI Architecture Strategy
STACK Construction Software is a scalable, cloud-based pre-construction ecosystem designed for contractors, subcontractors, and estimators. It integrates blueprint takeoff, estimating, proposal building, and field project management into a single unified workflow.
The core challenge lay in the extreme information density of the legacy desktop platform: estimators and engineers relied on dense CAD-like tools, multi-layered architectural drawings, complex assemblies, and massive data tables.
As the HMI Architect, my primary mandate was to decompose and adapt this heavy desktop experience into an ergonomic, highly responsive, and intuitive interface for field conditions—ensuring seamless operation across tablets and smartphones without compromising system capability or analytical depth.

Research, Analytics & Field Discovery
Adapting complex engineering workflows for touchscreens required a rigorous, evidence-based research framework combining both quantitative and qualitative methods:
-
Quantitative Analytics & Behavioral Mapping:
-
Analyzed user session data and desktop feature utilization heatmaps to identify high-priority mobile/field workflows.
-
Mapped touchpoint frequencies to determine critical capabilities required away from the desk versus features exclusive to multi-monitor desktop setups.
-
-
Qualitative Field Research & User Interviews:
-
Conducted in-depth 1-on-1 interviews and contextual inquiries on active construction sites with General Contractors, Subcontractors, On-site Estimators, and Field Managers.
-
Documented harsh environmental constraints: high-glare sunlight, gloved touch interactions, unstable network connectivity, and single-handed device operation on scaffolding or moving jobsites.
-
-
UX Benchmarking & Ergonomic Touch Studies:
-
Evaluated thumb-zone reachability, touch-target bounding boxes (minimum 48×48px), and ergonomic grip patterns across various tablet form factors (8" to 12.9" iPads and Android field tablets).
-
Benchmarked industrial HMI standards from CAD, GIS, and aviation software to establish touch-based precision interaction patterns.
-
Tablet & Touch Adaptation: Precision Takeoff & Field Estimation
Interacting with complex architectural drawings on touchscreens required reimagining drawing controls, vector selection, and precision measuring tools without relying on a desktop mouse.
-
Touch-First Measurement Engine (HMI Design):
-
Engineered precision touch measurement tools (Area, Linear, and Count) equipped with dynamic loupe/magnifier overlays for exact vertex snapping on floor plans.
-
Adapted multi-touch gesture mechanics (pan, pinch-to-zoom, rotate) while preventing accidental inputs during plan navigation.
-
-
Adaptive UI Density & Dynamic Sheet Navigation:
-
Introduced contextual bottom sheets, collapsible side drawers, and progressive disclosure patterns, reserving up to 90% of screen real estate for blueprint viewing.
-
Implemented adaptive layout grids that automatically adjust UI density between portrait and landscape orientations across diverse tablet aspect ratios.
-
Mobile & Web-Mobile UX: Real-Time Project Coordination & Tracking
On smartphones, the focus shifted from heavy estimation to real-time status visibility, quick record updates, and seamless office-to-field communication.
-
Contextual Activity Feed & Actionable Alerts:
-
Designed a unified real-time event feed notifying field personnel of plan revisions, estimate updates, and scope changes pushed from the desktop platform.
-
Integrated quick-action triggers directly within notifications for rapid review and field approvals.
-
-
Mobile-Optimized Data Entry & Task Management:
-
Transformed multi-column desktop tables into scannable card views prioritized by project status, bid deadlines, and assigned tasks.
-
Streamlined data entry forms with custom touch keypads, simplified dropdowns, and single-thumb navigation for on-the-go logging.
-
Design System Scaling & Enterprise Consistency
To maintain brand coherence and cross-platform synergy, the core STACK design system was scaled across all touch breakpoints:
-
Cross-Platform UI Kit & Accessibility Standards:
-
Built a centralized design token system (color palettes, high-contrast states, spatial units, and typography) adhering to WCAG 2.1 AAA accessibility standards for high-glare outdoor environments.
-
Standardized a robust library of tactile HMI components: touch-friendly sliders, status badges, adaptive tables, floating action buttons (FABs), and gesture-driven modals.
-
-
Design Governance & Developer Handoff:
-
Documented comprehensive touch-interaction guidelines, state transitions, micro-animations, and responsive rules to accelerate development cycles and ensure pixel-perfect deployment across web and mobile platforms.
-

Legacy Desktop Complexity & Cross-Device Adaptation Strategy
The Core Challenge: Deconstructing an Overloaded Enterprise System
The existing STACK desktop platform was built as a multi-functional, feature-dense enterprise SaaS solution. It accumulated a vast array of tools, deep navigational trees, complex granular settings, and overlapping workflows designed to serve diverse user personas—from senior Estimators and Subcontractors to Field Project Managers and Executive Officers.
Comprehensive Desktop Platform Capabilities
To understand the scale of the system, the full desktop platform encapsulates:
-
High-Precision Blueprint Takeoff: Advanced 2D canvas tools allowing users to calculate areas, linear runs, pitch angles, surface cutouts, and point counts over multi-layered architectural drawing files.
-
Granular Estimation & Cost Assemblies: Deep database integration that links physical drawing measurements directly to unit prices, labor costs, equipment rentals, overhead markups, and profit margins.
-
Bid & Proposal Management: Custom document builders for generating professional client bids, managing bid schedules, tracking sub-contractor proposals, and handling RFIs.
-
Project Pipeline & Directory: Enterprise-grade CRM tools to maintain company-wide contact lists, vendor directories, project statuses, and historical bid archives.
-
Administrative & Role Governance: Highly customizable permission structures, user access groups, custom measurement formulas, and workspace settings.
The Strategic Problem & HMI Objectives
The primary challenge was not simply shrinking the desktop view down to fit smaller screens, but completely re-architecting the information design and functional scope for mobility:
-
Persona-Driven Mapping: Determining precisely which subsets of features, data streams, and actions were necessary for specific user personas when away from their multi-monitor desktop environments.
-
Tablet vs. Mobile Architecture Differentiation:
-
Tablets: Utilizing the expanded screen real estate for active field work—focusing on interactive drawing navigation, touch-based plan markup, and on-site estimation checks.
-
Mobile Devices: Designing for extreme compactness, rapid scanning, and single-handed interaction—prioritizing real-time project updates, notification feeds, rapid status approvals, and quick data entry.
-
-
Custom-Tailored Adaptive Interfaces: Creating distinct, role-based UI views so that field technicians receive a clean, focused measurement canvas, while project managers get high-level tracking dashboards and approval queues without visual clutter.



Conceptual Mobile & Tablet Adaptation Strategy:
Redefining ConTech HMI
While the engineering team had not yet initiated production development for tablet and smartphone platforms, I proactively spearheaded the end-to-end UX/HMI conceptualization for STACK's cross-device ecosystem. My objective was to deconstruct a high-density, multi-monitor desktop SaaS product and transform it into a friction-free, adaptive mobile/tablet application—preserving core functional integrity while dramatically elevating site usability.
1. Persona-Driven Architecture & Feature Scoping
Through user research and field discovery, I mapped complex desktop capabilities directly to primary user personas and their operational contexts:
Field Estimators & Quantity Surveyors (Tablet-Optimized)
-
Operational Context: On-site plan verification, active measurement capture, and material assemblies verification under direct sunlight.
-
Adapted Feature Set:
-
Touch-First Takeoff Engine: Precision vector drawing canvas (Area, Linear, Count) with responsive touch-magnifiers (loupe) for exact vertex snapping.
-
Adaptive Item Libraries: Collapsible side sheets providing instant access to Assemblies, Items, and Pricing catalogs without obscuring the drawing canvas.
-
Dynamic Measurement Sheets: Contextual modals for rapid quantity overrides and custom formula inputs.
-
Project Managers & General Contractors (Mobile-Optimized)
-
Operational Context: Rapid decision-making, fast status tracking, team oversight, and field-to-office communication on smartphones.
-
Adapted Feature Set:
-
Project Health Dashboard: High-level status cards (Bidding, In Progress, Submitted) with touch-optimized search and priority filtering.
-
Real-Time Revision Feed: Push notifications and visual badges highlighting critical scope changes, new plan uploads, or urgent bid deadlines.
-
Team & Location Management: Single-tap access to assigned team members, project files, geocoded map locations, and contact directories.
-
-
2. Design Process: Discovery, Iteration & Validation
-
Qualitative & Quantitative Field Discovery: Analyzed usage telemetry to pinpoint high-frequency desktop workflows, paired with contextual interviews of field personnel to understand environmental pain points.
-
Progressive Wireframing & Interactive Prototyping: Developed iterative low-to-high fidelity touch prototypes in Figma, testing navigation models ranging from bottom sheets to floating toolbars.
-
Usability Testing & Concept Refinement: Executed moderated usability testing sessions with real contractors and estimators using interactive mobile and tablet prototypes, measuring task completion times and touch accuracy.
3. Extreme Environment Ergonomics & WCAG Compliance
Designing for construction sites requires solving for harsh physical conditions rather than controlled office spaces:
-
Outdoor Readability & WCAG 2.1 AAA: Implemented high-contrast UI themes and bold typographic hierarchies to prevent wash-out under direct sunlight glare.
-
Gloved-Touch & Rough Environment HMI: Expanded touch targets to a minimum of 48×48px with generous padding, enabling accurate tapping while wearing heavy work gloves or operating in high-vibration environments.
-
Offline-First Data Architecture: Designed seamless offline synchronization. All field measurements, annotations, and project status updates are cached locally when cellular connectivity drops on remote job sites and silently synced once back online.
-
AI Voice-Assisted Input (Concept Integration): Integrated an AI-powered voice interface allowing field workers to query estimates ("What is the total concrete area on Floor 2?") or input measurement logs hands-free without removing safety gear.




AI and Voice Operation
Design System
As a UX Designer, I have been working to create a Design System for STACK Software. The design system I developed consisted of the following key components:
Foundations
Color Palette: A scalable color system that included primary, secondary, and accent colors, along with neutral tones and semantic colors for statuses (e.g., success, warning, error).
Typography: Established a hierarchy using scalable font sizes, weights, and line heights for readability across devices.
Grid System: Designed responsive grid layouts tailored for both desktop and mobile interfaces.
UI Components
Created a library of reusable components, including buttons, forms, modals, tables, and navigation elements. Each component was documented with guidelines for usage, states, and variations.
Patterns and Templates
Developed patterns for common user flows, such as task assignment, document upload, and project tracking.
Designed templates for dashboards, reports, and task management screens to ensure visual and functional consistency.
Iconography and Illustrations
Designed a custom icon set to visually represent construction-specific actions and statuses.
Included illustrations to enhance onboarding and empty state experiences.
Accessibility Guidelines
Conducted contrast ratio tests to ensure text readability.
Included keyboard navigation and screen reader support guidelines for all components.



Pendo and Analyst
Projects List and Project Page
The Projects List and Project Page are key features in STACK Construction Software, where users manage multiple projects simultaneously. To ensure the design was efficient and intuitive, I used Pendo in the following ways:
Data-Driven Design Insights:
Click Tracking: Using Pendo's click tracking feature, I analyzed how users interacted with various filters and sorting options in the Projects List. For example, I found that 35% of users consistently used the "Project Status" filter, while 20% frequently searched for projects by their start date. This data guided me to make the most used filters more prominent on the interface and ensure users had easy access to them.
Heatmaps: By tracking heatmaps, I discovered that users were often clicking on the same sections repeatedly but not completing the action. Specifically, 40% of users clicked the "Edit Project" button without proceeding with the changes. This led me to redesign the button placement and add a confirmation prompt, which resulted in a 25% increase in completion rates.
User Segmentation and Role-Specific Insights:
I segmented users into groups based on roles such as project managers, estimators, and field workers. This helped me understand that 50% of project managers spent more time on the Project Page than any other user group, indicating a need for more detailed project overviews and easier access to high-level data.
User Feedback & Iteration:
I utilized Pendo’s in-app surveys to collect feedback on design changes. For example, after adding new filtering options, 65% of users responded positively in a short survey, confirming the changes improved their ability to manage projects. Based on this feedback, I continued to fine-tune the user interface to align with their preferences.
A/B Testing:
I ran A/B tests on two different layouts of the Project Page to determine which one resulted in better user engagement. The test revealed that users preferred layout A, which offered a more minimalistic design and better categorization, leading to a 30% increase in feature adoption.
Takeoff and Estimates
The Takeoff and Estimates section enables users to generate accurate project cost estimates. To optimize this area, I used Pendo to track user engagement and gather insights on usability:
Tracking Workflow Engagement:
Feature Usage: Pendo’s analytics revealed that 45% of users frequently used the “Auto-Calculate” feature for material takeoff but abandoned the feature before completing the estimate. By tracking this, I identified that users were confused by the estimation results due to lack of clarity in the interface, prompting me to introduce tooltips and clearer instructions. This reduced abandonment by 22% over the next quarter.
Segmented Feedback:
I segmented user feedback to focus on estimators and project managers. I found that 30% of estimators requested more customization options for cost calculation templates, which led me to add customizable fields to the takeoff process. After the feature was implemented, 55% of estimators reported increased satisfaction in subsequent surveys.
Heatmaps and Click Tracking for Usability:
Through heatmaps, I saw that users spent an average of 12 minutes on the takeoff page before submitting estimates, with the highest engagement occurring with the “Material List” section. To streamline this process, I introduced a collapsible menu for material categories, which reduced time spent on the page by 18%.
User Feedback & Iterative Design:
I ran in-app NPS surveys within the Takeoff and Estimates section, which showed that 72% of users were satisfied with the new estimate generation tools. Based on their feedback, I introduced a feature that allowed users to save common assemblies and estimates, leading to a 40% increase in repeat users for this feature.
Items and Assemblies
The Items and Assemblies section allows users to manage construction materials and predefined sets for cost estimation. To ensure usability and efficiency, I employed the following Pendo features:
Tracking Engagement and Item Management:
By analyzing user behavior with Pendo’s analytics, I found that 60% of users were spending more than 8 minutes creating custom items, which suggested inefficiency in the interface. I conducted a usability study, and it turned out that 35% of users were confused by the multi-step process to add custom items. To resolve this, I simplified the workflow, reducing time spent by 20%.
Heatmaps for Interaction and Navigation:
Through heatmaps, I found that users were not interacting with the "Assembly Search" feature as expected, even though it was a critical tool for managing items. I redesigned the search bar to be more prominent and easier to navigate, which resulted in a 50% increase in feature engagement.
Segmented Feedback for Customization Needs:
Feedback from field workers and estimators indicated that the default assembly templates did not align with their specific project needs. Pendo surveys helped me pinpoint that 40% of field workers needed more flexibility in assembly creation. I used this data to introduce a customizable template feature that increased user satisfaction by 33%.
A/B Testing and Feature Adoption:
I used A/B testing to test two different layouts for the "Add Item" screen, comparing the current design with a more streamlined, step-by-step interface. The results showed that layout B increased item additions by 25% while reducing the time users spent on the screen by 15%.
Collecting Data and Identifying Mistakes
Pendo provided a comprehensive view of user behavior across all areas of the platform, helping me collect data and identify mistakes early in the design process:
Identifying Pain Points:
Through click tracking and heatmaps, I identified that users often failed to complete key actions, such as submitting estimates or updating project details. In total, I found that 28% of users abandoned certain workflows mid-process. By making interface adjustments and adding in-app guidance, I reduced abandonment rates by 18%.
Continuous User Feedback:
By gathering feedback through in-app surveys and NPS, I was able to track user satisfaction with new features and identify recurring issues. For instance, 25% of users reported difficulty in finding certain features, which I addressed by improving the navigation and providing better contextual help, leading to a 15% increase in satisfaction.
Design Iteration and Optimization:
Pendo’s A/B testing and user feedback loops allowed me to iterate on designs quickly, ensuring that improvements were based on real-time user data. Over the course of several iterations, I tracked a 22% improvement in user task completion rates across all key areas of the software.

Impact and Results
Through my design efforts, I:
Spearheaded multiple important updates that significantly improved user satisfaction and retention rates.
Played a pivotal role in achieving a 25% increase in overall efficiency for STACK users.
Ensured that all designs aligned with STACK’s mission to empower construction professionals with user-friendly tools.
My time at STACK exemplifies my commitment to understanding user needs, translating them into actionable designs, and delivering intuitive, impactful solutions that drive results. My work demonstrates not only my technical expertise but also my ability to collaborate effectively with teams and stakeholders to achieve shared goals.
















