Build and Ship Your Website Faster
Speed up your website build with our ultimate UI kits for Framer. Enjoy high-quality, customizable elements for a seamless, stunning user experience.
↓ Scroll to explore the full case study
Frameblox
Overview
Customers
Products
Projects
Tasks
Settings
Tom White
tom.white@frameblox.com
Dashboard
Last 30 days
Select dates
Filter
Total Revenue
$78,259
10.5% from last month
Customers
+1,567
21% from last month
Total Sales
+2,354
10.5% from last month
Active now
57
10.5%
Overview
23.5% from last year
Recent sales
David Miller
Today, 10:34
$59
Emily Johnson
Today, 8:49
$99
Lisa Thomson
Yesterday, 17:56
$139
Laura Davis
Yesterday, 15:09
$299
Sarah Williams
Yesterday, 12:38
$79
UX CASE STUDY
Construction Management ERP · Enterprise Portfolio
Role
Senior UX/UI Designer
Duration
4 Months (Update as needed)
Platform
Web-Based Enterprise ERP
Industry
Construction Management
Responsibilities
Product Discovery · UX Research · Stakeholder Workshops · Information Architecture · User Flow Design · Interaction Design · Dashboard Design · High-Fidelity UI Design · Design System · Developer Collaboration · Design QA · Developer Handoff
↓ Scroll to explore the full case study
01 — Overview
Overview
Role: Senior UX/UI Designer
Project on Track is a comprehensive Construction Management ERP built to help construction companies manage every stage of a project from planning and budgeting to procurement, workforce management, equipment tracking, billing, and project completion.
The product had been under development for more than ten years. Despite its extensive functionality, it struggled with inconsistent user experiences, unfinished modules, and complex workflows that made it difficult for both users and developers to navigate.
With a major client in Africa expecting an MVP within a strict deadline, I was brought in to redesign the platform, simplify complex workflows, and establish a scalable design system that could support the continued growth of the product.
“With a major client in Africa expecting an MVP within a strict deadline, I was brought in to redesign the platform, simplify complex workflows, and establish a scalable design system.”
02 — Project Scale
The Scale of Complexity
A product of this scale demanded a different approach to design. Every number here represents a real design challenge.
13
Interconnected Modules
1,200+
Screens Designed
90–150
Column Tables
20–50
Field Forms
50+
User Flows
Enterprise Construction ERP
A platform managing every stage of a construction project — from planning and budgeting to procurement, workforce, equipment, billing, and completion.
MVP Delivered
On time, for a major client
03 — The Challenge
The Challenge
Designing an enterprise ERP differs significantly from designing consumer products. The application consisted of more than 13 interconnected modules, over 1,200 screens, complex business logic, massive data tables, and lengthy forms containing between 20 and 50 fields.
The project presented several major challenges:
Poor Documentation
Requirements were documented through Excel sheets, handwritten notes, and rough sketches.
Undocumented Workflows
Business workflows lacked clear documentation, requiring deep discovery sessions to map them.
Complex Hierarchical Data
Large hierarchical datasets were difficult to understand and visualize due to deep nesting.
Massive Data Tables
Tables contained between 90 and 150 columns, making navigation and data discovery extremely difficult.
Junior Development Team
The development team consisted primarily of junior developers with limited enterprise software experience.
Fixed MVP Deadline
A fixed deadline required delivering an MVP without compromising usability. Speed and quality had to coexist.
04 — Product Discovery
Product Discovery
Before designing anything, I needed to understand both the product and the people behind it. I conducted several discovery sessions with stakeholders across different teams to understand the business vision, technical constraints, and existing workflows.
Rather than jumping directly into design, I invested time in understanding how the business actually operated.
Step 01
Multiple Workshops with the CEO
Multiple workshops with the CEO to understand over three decades of construction domain knowledge.
Step 02
QA Sessions
Sessions with the QA team, who acted as subject matter experts and business analysts.
Step 03
Developer & Technical Discussions
Discussions with developers and technical leads to understand implementation challenges.
Step 04
Reviewing Existing Modules & Legacy Workflows
Reviewing existing modules, unfinished screens, Excel documents, and legacy workflows to understand the scope.
Step 05
Business Understanding
Rather than jumping directly into design, I invested time in understanding how the business actually operated. This included competitor analysis and mapping of business goals.
05 — Understanding the Users
Understanding the Users
The ERP served two primary user groups.
PRIMARY USERS
Construction Professionals
Construction professionals responsible for managing complex projects. These users relied heavily on spreadsheets and manual documentation to manage:
Budgets
Project Timelines
Workforce Management
Equipment Tracking
Material Management
Vendor Information
Project Progress
Pain Points
Manual workflows · Fragmented systems · Poor visibility into project data · Difficult reporting · Time-consuming data entry
SECONDARY USERS
The Development Team
Designing for developers became equally important because the application involved highly complex business rules and relationships. The designs needed to communicate functionality clearly to reduce implementation ambiguity.
Junior Front-end Developers
Experienced Backend Developers
QA Engineers
Technical Leads
06 — Key Insights
Key Insights
Research revealed several recurring challenges.
Complex Data Structures
Construction data followed deeply nested relationships consisting of parent-child hierarchies, groups, categories, and subcategories. Presenting this information clearly became one of the biggest UX challenges.
Information Overload
Many forms required users to complete between 20 and 50 fields. Large tables contained as many as 150 columns, making navigation and data discovery difficult.
Developer Constraints
Most developers were working on their first enterprise application. The design needed to reduce confusion while making implementation straightforward.
Business Complexity
Every module contained unique business rules that required close collaboration with stakeholders before making design decisions.
07 — Design Goals
Design Goals
Based on the research, I established five primary goals.
01
Simplify enterprise workflows.
02
Improve data visualization.
03
Reduce cognitive load.
04
Create a scalable design system.
05
Improve collaboration between design and development.
08 — Design Process
Design Process
User Flows Before Screens — Given the complexity of the product, traditional user stories were insufficient. Instead, I created more than 50 detailed user flows covering every module and submodule before touching high-fidelity design.
01
Discovery
CEO workshops, QA sessions, developer meetings
02
Research
User interviews, competitive analysis, documentation review
03
50+ User Flows
User actions, system responses, data inputs, decision points
04
Information Architecture
Navigation structure, module hierarchy, linked records
05
High-Fidelity Design
Quick sketches then directly into high-fidelity in Figma
06
Developer Collaboration
Walkthroughs, feedback loops, design QA
07
Delivery
MVP handoff, documentation, developer handoff package
Information Architecture
One of the most challenging aspects of the project was organizing thousands of pieces of information. I redesigned the information architecture to improve navigation between modules, categories, subcategories, and related records. This helped users understand where they were and how information connected across the system.
Information Architecture Placeholder
09 — UX Solutions
UX Solutions
Table Design
Simplifying Large Tables
To improve readability of tables containing up to 150 columns, I introduced:
Better column grouping
Sticky headers · Expandable rows · Search · Filters · Sorting · Progressive disclosure
This reduced visual clutter while improving discoverability.
Table Design Placeholder
Form Design Placeholder
Form Design
Reducing Form Fatigue
Long forms were redesigned by grouping related fields, creating logical sections, using collapsible panels, introducing multi-step workflows, and improving field hierarchy. This made complex forms significantly easier to complete.
Data Visualization
Data Visualization
To represent large hierarchical datasets, I designed expandable tree structures, nested categories, interactive dashboards, drill-down navigation, and filter-driven reporting. The goal was to make large volumes of construction data easier to understand and manage.
Data Visualization Placeholder
Design System
Design System
Consistency was essential across more than 1,200 screens. I created a scalable design system including typography, color palette, buttons, inputs, tables, forms, navigation, icons, cards, layout principles, and interaction patterns. This improved consistency while accelerating future development.
10 — Developer Collaboration
Collaboration with Developers
Design delivery extended far beyond handing over screens. I worked closely with developers throughout implementation, ensuring that design intent was preserved and complexity was well-communicated.
Design Walkthroughs
Conducting design walkthroughs to align team understanding
Developer Discussions
Explaining user flows and participating in implementation discussions
Iteration Cycles
Reviewing technical feasibility and providing continuous design support
Feedback Sessions
Iterative feedback loops with developers throughout implementation
QA Validation
Performing Design QA to validate implementation quality
Developer Handoff
Complete handoff documentation, component specs, and design tokens
Design QA
This collaborative approach reduced ambiguity and improved implementation quality.
11 — Challenges & Solutions
Challenges & Solutions
Challenge
Solution
Outcome
Complex business workflows with limited documentation.
Collaborated closely with stakeholders and translated business knowledge into clear user flows and interface designs.
Clear interface designs grounded in domain knowledge.
Massive datasets and hierarchical relationships.
Designed scalable information architecture, expandable tables, and drill-down navigation.
Improved data visibility and navigation across complex hierarchies.
Junior development team working on an enterprise application.
Provided detailed prototypes, documentation, and continuous implementation support.
Reduced implementation ambiguity and improved development confidence.
Strict delivery timeline.
Prioritized MVP features, focused on high-impact workflows, and iterated rapidly alongside development.
MVP delivered on time for the major client in Africa.
12 — Outcome
Outcome
The redesigned ERP successfully delivered an MVP for the client within the required timeline. The new experience simplified complex workflows, improved data visibility, reduced cognitive load, and established a scalable foundation for future development.
More importantly, the project strengthened collaboration between design, development, QA, and stakeholders, enabling the team to build the product with greater confidence and consistency.
MVP Delivered
On time for a major client in Africa
Improved Usability
Simplified complex workflows and reduced cognitive load
Developer-Friendly Documentation
Prototypes, specs, and design tokens for the dev team
Construction ERP Redesigned
Scalable foundation for continued product growth
13 — My Contributions
My Contributions
A comprehensive coverage of end-to-end product design — from initial discovery to final handoff.
Product Discovery
UX Research
Stakeholder Workshops
Competitor Analysis
User Journey Mapping
Information Architecture
User Flow Design
Dashboard Design
Data Visualization
Interaction Design
High-Fidelity UI Design
Design System
Prototype
Developer Collaboration
Design QA
Developer Handoff
14 — Reflection
“Designing Project on Track taught me that enterprise UX is less about visual aesthetics and more about simplifying complexity.“
Working with thousands of screens, interconnected business workflows, and multiple stakeholders reinforced the importance of research, structured thinking, and close collaboration.
The experience strengthened my ability to transform complex business requirements into intuitive, scalable, and developer-friendly enterprise products while balancing user needs, technical feasibility, and business goals.
Key Takeaway
Enterprise UX is systems thinking, not pixel craft.
The ability to translate decades of construction domain knowledge into clear, navigable, developer-friendly interfaces is the essence of enterprise UX design.
Senior UX/UI Designer · Project on Track · Construction Management ERP
