Problem
The editor experience in our Manufacturing OS was fragmented, creating an inconsistent user experience across the platform. Different item types, such as 3D objects, printable reports, processes, and data objects, each had a unique editing interface and interaction patterns. These were often disconnected from one another and the overall platform UI. This fragmentation led to a steep learning curve, slowed down user workflows, and limited our ability to scale the platform with new concepts like node-based canvases and customized interfaces.
Users struggled with several key issues:
- Inconsistent Interactions: With no consistent design language, users found it difficult to understand how to interact with each interface. Crucial features were often hidden, and basic UX patterns were not followed.
- Difficult Navigation: There was no clear diagram to illustrate the hierarchy or relationships between different items on the platform, making it hard to navigate between related elements. It was also unclear how changes to one item would propagate across different levels of the hierarchy.
- Disjointed Editing: Interacting with each unique editor UI and its specific controls felt disjointed. For example, editing a 3D object and then editing the actions executed on it were two separate and disconnected experiences.
- Complex Structures: Switching between simple items, like a Location, and complex structures, like a Process Model with nested Actions, was cumbersome and unintuitive.
The primary goal was to unify the editor into a robust, modular, and scalable experience that would:
- Work seamlessly across different canvases, including 2D, 3D, and BPMN.
- Support both simple and complex editing flows.
- Integrate smoothly into the main platform UI instead of feeling like a separate tool.
- Provide consistency across all hierarchy levels, from small entities to complex processes.
Approach
I designed this project from concept to completion, with the support of my manager, and later helped other designers build new features within the system I created.
The project began by documenting the core problems and goals, taking into account the specific needs of users based on their job functions and industries. For example, the workflow for a welding planner is entirely different from that of someone reviewing dental parts in bulk. Previously, each had a separate experience, but the goal was to consolidate them. To gain a detailed overview of these varied needs, I collaborated with application engineers and product managers from each vertical. We mapped all existing editor UIs and features in Figma and conducted research on other complex editors, including:
- Professional tools like Figma, Notion, and Miro for their modular and scalable editing.
- BPMN-focused tools for specialized process modeling.
- Enterprise software for hierarchical navigation and multi-editing capabilities.
This research yielded several key insights:
- Consistency trumps variety: Users prefer a single, adaptable mental model over multiple specialized ones. This approach also helps designers scale the product and introduce new features more efficiently.
- Navigation is as critical as editing: Getting lost between related items is a major source of friction, especially in workflows involving edits to a single property across hundreds of items.
- Progressive complexity aids onboarding: The interface should start simple but reveal more powerful features as needed.
Following the research phase, I began exploring the UI design. I focused on creating a structure that aligned with common user workflows and followed established UX patterns. This involved ensuring that the layout of interface elements matched the natural direction of work, pointer travel distances remained small, and common actions were accessible via shortcuts. The design needed to balance the need for quick edits on multiple items with the detailed configuration of a single item, all while prioritizing the speed of creation and navigation.
This exploration resulted in a few clear interface sections:
- Navigator: For quick jumps between items.
- Outliner: For hierarchical overviews of processes, subprocesses, and references.
- Canvas: With interactions for direct manipulation like dragging, connecting, and collapsing or expanding nodes.
- Inspector: To edit the selected item or sub-item.
- Item-Specific Toolbar: Containing the most common actions for that item type.
- General Toolbar: For high-level actions like undo, redo, opening items, and previewing.
To test the scalability of this structure, we mapped the editing problem space from simple to complex scenarios:
- Simple: Editing a Location.
- Medium: Editing a Task with structured inputs and outputs.
- Complex: Editing a Route Model (BPMN) with multiple Actions and dependencies.
This process confirmed that the proposed framework could flexibly support both lightweight edits and highly complex workflows without sacrificing consistency.
Once the structure was validated against the problem space and vertical-specific use cases, I began polishing the visual design. The aesthetic was intended to be subtle and clean, yet versatile enough to work with any content on the canvas. After several reviews with the design team, I collaborated with engineers to plan the rollout, and we decided to implement it first for the upcoming Custom Page Builder feature.
At this point, I handed the project to another designer who would build the tailored page builder features within the new experience. I created a comprehensive guidelines file explaining how the new editor functions and how to build upon it, including important details like hierarchy and spacing within the inspector. Throughout the development of the layout builder, I continued to review her work and provide guidance, sometimes helping to introduce new UI elements that were not part of the initial requirements.
Result
This was the first major design I did that was implemented, and it was incredibly rewarding to see it in production and being used by our customers. The true success of the framework was clear in its scalability, as new features and complex inspectors were integrated seamlessly without compromising the core experience. This project successfully transformed a fragmented and frustrating process into a unified and intuitive experience, significantly improving user workflows and providing a solid foundation for future platform development.
