SaaS Web App
MS – Management Solutions
MS – Management Solutions is a modular SaaS web platform created for the AECO industry (Architecture, Engineering, Construction & Operations).
The system is designed to support owners, designers, contractors, and consultants in managing complex construction projects, bringing together project management, BIM models, and information/document management in a single environment.
Project Type:
UX/UI mobile app concept
Focus:
Padel court booking experience
Context:
Personal project based on a real user pain point
Goal:
Simplify the booking flow and improve usability for regular players
Problem
In many AECO contexts, day-to-day work still relies on a fragmented combination of Excel files, emails, file-sharing systems, and multiple BIM tools, which makes it difficult to:
- Maintain a consolidated view of the project
- Connect responsibilities and tasks to BIM models and formal documentation
- Ensure consistency across different information management standards, such as ISO 19650 or internal organizational standards
MS was conceived to respond to this reality with a modular approach, better aligned with the scale and complexity of the construction and operation of built assets.
High-level solution
The solution was conceived as a modular system of integrated applications, rather than a single application.
- MScope – an operational and strategic management module at the project-unit level, focused on visibility over progress, phases, stakeholders, and a task system that connects concrete work to the broader project context.
- MSight – a module dedicated to openBIM model visualization and exploration, directly in the browser.
- MSource – an information and document management (CDE) module, designed to support ISO 19650 and other standards, where information is organized, classified, and searchable according to the standard selected by each client.
- MCore – a conceptual entry and orchestration layer for the system, intended as a unified access point to the other modules, but not implemented during the phase in which I was involved.
Together, these modules form a project management system for the AECO industry, connecting processes, teams, BIM models, and documentation within a single digital environment.
My role as Product/UX/UI Designer
When I joined the project, there was already a version 1 of MS in development, which mainly served as a conceptual and functional starting point.
However, the work I developed ultimately resulted in a new version designed from scratch in terms of UX and UI, with a new experience logic, rethought modules, and a new design system prepared to scale.
Using the existing V1 as a reference, I redesigned the system from the ground up in terms of UX and UI, clarifying navigation, mental models, information hierarchy, and visual patterns across all modules.
The goal was to transform an initial functional base into a clearer, more consistent, and more scalable product, both from the user experience side and from the implementation side.
I was responsible for redesigning the MSight module from scratch, both in terms of UX and UI.
This involved rethinking:
- The entry mental model and user context when opening the viewer
- The organization of navigation and panels
- The priority and placement of tools, in order to support everyday BIM workflows without overloading the interface
The result was a model-viewing experience that was clearer, more focused, and more consistent with the rest of the system.
I also redesigned the MSource module from scratch, focused on information and document management.
The work focused on:
- Making information easier to organize, filter, and find
- Supporting different information management standards (for example, ISO 19650) without limiting the system to a single framework
- Integrating the module visually with the rest of the system, so it would not feel like a separate tool
MScope was the most functionally advanced module when I joined the project. Even so, I worked on improving its high-level user experience, refining:
- How context is presented
- The prioritization of information, including how the task system is framed within the project unit
- Listing and panel patterns, aligning the module more closely with expectations for enterprise work management products
Atomic design system
Rather than treating each page as an isolated screen, I approached MS as a component system.
- The design system was organized into different levels:
- Atoms – colors, typography, spacing, icons, buttons, and states
- Molecules – small reusable combinations such as labeled fields, status chips, or informational cards
- Organisms – more complex blocks such as tables, panels, navigation bars, and information layouts
- Templates – reusable page structures shared across modules
This atomic structure was designed not only to ensure visual consistency, but also to remain compatible with the framework chosen by the developers, Vuetify, allowing design work to be translated into implementation more predictably.
- This approach made it possible to:
- Scale the system without losing consistency
- Maintain coherent interaction patterns across modules
- Improve handoff, thanks to a more direct relationship between design components and Vuetify-implementable components
Impact
Without disclosing internal metrics or confidential details, the impact of the UX/UI work can be summarized in three main areas:
A clearer mental model for a modular system
Clarifying MS as a system composed of modules helped align teams around a clearer product vision.
A new version designed from scratch
Although V1 existed as a starting point, the work developed resulted in a new UX/UI version conceived from scratch, one that was more coherent, clearer, and better prepared to evolve.
A solid foundation for growth
The atomic design system, aligned with Vuetify, gave the team a consistent base to continue evolving the system with new modules, new features, and new client contexts.
Personal reflection
This project was an opportunity to work in a highly technical AECO context, where the main challenge was not simply designing interfaces, but giving shape to a complex system that connects project management, BIM, and information at scale. Starting from an existing version 1 as a conceptual base, and then redesigning the system from scratch — improving the overall experience, redefining key modules such as MSight and MSource, and creating an atomic design system aligned with Vuetify — was essential in turning UX/UI work into a real design infrastructure prepared for the future of the product.