Facility Builder

Category

UI/UX Design, Prototyping

client

MSuite

year

2025

🔍 The Overview

Redesigned a complex facility management tool with clearer hierarchy, drag-and-drop interactions, and better visual structure.

đź§  Understanding the Problem

New administrators setting up healthcare or senior facilities couldn’t easily understand how buildings, rooms, and beds connected. Important actions were hidden, and the interface didn’t show the big picture. This made onboarding new users time-consuming and introduced risks of setup errors in complex facilities.

Original render of the Facility Builder feature. Notice the inconsistency in the "Add" buttons and the lack of clear visual hierarchy.

🎯 The Objective

Build a clear, intuitive tool for administrators managing complex facility structures. Help users see and organize nested levels—from campuses to beds—without confusion. Reduce the time needed to complete setup, especially for first-time users configuring multi-building layouts for healthcare and senior living facilities.

🛠️ The Process

Facility managers needed to build complex structures—like multiple buildings and rooms—but the old system didn’t support that well. I started by exploring common layout patterns (File Explorer from Windows, or Finder from Mac Os) and decided on a vertical flow for better clarity. I added drag-and-drop to let users rearrange rooms quickly and kept modal windows from the previous version to avoid confusion for returning users. Each step was tested to reduce errors and help new users feel confident in what they were building.

Post-research exploration. I applied a familiar UI pattern inspired by Finder/File Explorer to support and display more than two sub-levels effectively.
Early Concept Based on Prior References: This version prioritized content visibility, reordering, and quick editing, using a horizontal navigation structure to simplify user interaction.

âś… The Result

After receiving feedback from the product owner and stakeholders, we learned that the left-side columns—like buildings and floors—would often stay mostly empty, while users would spend more time interacting with the right side of the screen. Based on this, we shifted to a vertical navigation layout, similar to platforms like ProductBoard and ClickUp. This allowed us to design a wider layout that gave more space to the content users actually work with. The updated interface felt easier to use, especially during more complex configurations, and support requests decreased as a result.

Navigation Structure References: A collection of UI patterns showcasing scalable horizontal layouts, including nested sub-levels, accordion menus, and scroll-friendly containers.
Final Figma Prototype (Video Walkthrough): A screen recording of the final design, illustrating the complete user flow and key interactive elements in the refined interface.