Tools
All in One Management Platform
This is a next-generation platform for the construction industry, designed to simplify project closeouts, streamline workflows, and improve operational efficiency. The product integrates with existing toolsets to centralize data, enhance staff effectiveness, and support long-term building maintenance.
As the sole UI engineer on the project, I was responsible for driving the end-to-end design process—from requirement discovery through design system creation, prototyping, and UI implementation. Working within a multidisciplinary team of business analysts, product managers, QA engineers, and developers, I ensured the product’s design was usable, scalable, and visually consistent.
The Challenge
Large construction firms often grapple with managing vast volumes of project documents across multiple products and stakeholders. The key challenges included:
Keeping document management efficient and accessible in real time
Ensuring a consistent experience across desktop and mobile platforms
Delivering a secure, scalable solution as a cloud-hosted SaaS product
Defining functionality when the initial client vision was still vague
Our mission: deliver a user-centric, scalable platform that enables seamless document workflows across devices, even under tight timelines and evolving requirements.
My Role
Discovery & Requirement Definition
Collaborated with the Business Analyst and Project Manager in client workshops and meetings to uncover needs and define the MVP scope.
Early Ideation
Created quick pencil sketches to outline essential screen flows and basic UI structures.
UX/UI Design
Developed high-fidelity mockups, iterated continuously based on internal and client feedback.
Design System Development
Built a comprehensive Figma-based system with 120+ screens (web + mobile), reusable components, and variable-driven styling.
Frontend Integration
Built a comprehensive Figma-based system with 120+ screens (web + mobile), reusable components, and variable-driven styling.
Testing & Refinement
Conducted cross-browser and responsive testing, usability testing (internal and external), and refined UX and visual design based on feedback loops.
Design Process
1. Discovery & MVP Definition
The client’s initial vision was broad and undefined. Through structured online workshops, we collaboratively identified critical user needs and articulated the MVP user flows—enabling fast-tracked delivery without losing strategic alignment.
2. Rapid Sketching & Wireframes
Given tight schedules, I began with pencil sketches to explore layout options quickly. These evolved into wireframes and were iteratively refined into digital mockups using Figma.
3. Scalable Design System
To maintain consistency as the product expanded, I established a robust design system:
120+ screens for both web and mobile applications
A modular component library for onboarding, document review, approvals, and dashboards
Visual consistency ensured through Figma variables controlling colors, typography, spacing, and border radii
A flexible foundation adaptable as new features emerged
4. Visual Design
The visual design prioritized clarity and efficiency:
A minimal, professional palette aligned with the Knocen brand
A clean typographic hierarchy for quick readability across devices
Mobile app layouts that shift from desktop dashboards to mobile review screens
5. Frontend Partnership
I played a hands-on role in translating designs into functioning UI with frontend developers:
Integrated designs using HTML/CSS and MUI components
Built reusable UI elements to speed future feature rollouts
Ensured high fidelity and visual consistency across platforms
6. Testing & Iteration
Quality assurance included:
Extensive cross-browser and device testing
Internal usability sessions with staff mimicking on-site usage
External feedback from beta users in actual project review contexts
Iterative updates to flows and styles based on insights
Core Features
Multi-Tenant Document Management: Securely segregated access for different clients
Cloud-Based SaaS Platform: Easy future deployments and updates
Mobile Access: Review and approve documents on the go
Scalable Design System: Built for future expansion and consistent UI across every phase
User-Friendly Workflows: Intuitive document review, tagging, and approval flows
Outcomes
Delivered a polished MVP across web and mobile under tight timelines
Architected a scalable design system that continues to evolve with product growth
Improved agility in design-to-development handoffs
Enhanced operational efficiency and user satisfaction for construction teams
Reflection
Designing the application reinforced the importance of clear communication, iterative design, and scalability. By working as both the UI designer and UI engineer, I was able to ensure consistency from concept to implementation.
This project also highlighted the value of a strong design system—not just for consistency, but for enabling the product to grow rapidly while maintaining quality. Most importantly, it taught me the importance of designing not just for aesthetics, but for clarity and usability in real-world team workflows.
