Harmonizing Complexity

Problem/Opportunity

The WellCube project at Delos presented an intriguing challenge: we needed to create a complex “System Design” section for both the website and iPhone app, one that allowed users to visualize and interact with a hierarchy of spaces and devices. These spaces could be grouped in a nearly infinite number of ways, with nested sub-spaces and an expanding list of devices within each. The design team had ambitious goals to display all this data cleanly and effectively, but the technical and usability challenges were immense.

The core difficulty was turning this intricate, abstract idea into a user-friendly interface that was both scalable and technically feasible. As the design team pushed for increasingly complex layouts, the potential for confusion and technical pitfalls grew. They envisioned a fully interactive experience where users could expand, collapse, and navigate between multiple layers of spaces and devices, all while viewing detailed information in a persistent right-side panel.

At the same time, I needed to ensure the system would remain comprehensible, responsive, and scalable across various devices, from desktops to mobile screens. We also faced the added complexity of making this design work within the technical limitations of modern browsers, without sacrificing usability.

Organization Profile

WellCube Hero Page

'System Design' Page

Modal Example

Devices Page

Process

My role was to bridge the gap between the design team’s aspirations and the technical realities of implementation. From the outset, I collaborated with the designers, carefully guiding their vision toward solutions that were practical and intuitive for users. It became clear early on that the design would need adjustments—not just for the sake of technical feasibility but also to create a user experience that was fluid and understandable.

The design team’s ambition was to allow users to group devices within spaces, nest spaces within other spaces, and navigate these layers with ease. Each item—whether a space or a device—could be expanded to reveal more details or collapsed to simplify the view. A full-height side panel would display detailed information for whichever space or device was selected, while an anchored action menu provided context-specific options.

As the project evolved, my job became one of balancing this complex vision with the need for performance, scalability, and usability. I helped steer the design team toward layouts that retained their ambitious goals but avoided the chaos of overly cluttered or confusing interfaces. We developed a system that allowed for infinite nesting of spaces within spaces and devices within spaces, but we kept the interface manageable by introducing a series of collapse and expand controls that let users decide how much detail to reveal at any given time.

On the technical side, I built the core components of the system using React and Tailwind. Each space and device was represented by a custom card component that handled its own state, including the ability to collapse or expand when clicked. As the complexity of the page grew—with a top navigation, left-hand list of spaces and devices, right-side information panel, and bottom action menu—I ensured that all elements worked together seamlessly and remained responsive across different devices.

Part of this process also involved helping the design team understand technical limitations and guiding them toward more feasible solutions. For example, an initial design relied on the ‘position anchor’ CSS feature, which had limited browser support. I proposed alternative approaches that maintained the desired functionality while ensuring compatibility across browsers. This ongoing collaboration allowed us to refine the design while staying true to the original vision.

Solution

The final system was a refined blend of the design team’s aspirations and the practical needs of a responsive, scalable web application. We created a visual hierarchy that allowed users to explore nested spaces and devices without becoming overwhelmed by too much information at once. The system’s collapse and expand features provided users with control over the level of detail they saw, ensuring that even the most complex configurations remained navigable.

The right-side information panel became a key element of the design, offering context-sensitive details for selected spaces and devices. Users could view properties and perform actions on individual items without losing their place in the broader hierarchy. The anchored action menu at the bottom of the viewport provided another layer of functionality, giving users access to relevant actions depending on what was selected.

I also ensured that the system would scale smoothly. Whether a user created just a few spaces and devices or an intricate web of nested items, the system’s performance remained consistent. This was achieved through careful optimization of the React components and by avoiding reliance on less-supported CSS features, ensuring that the experience was robust across all browsers and devices.

The entire layout was designed with responsiveness in mind. Whether accessed on a large desktop screen or a mobile device, the system adapted fluidly, ensuring that users could interact with their spaces and devices without any loss of functionality or clarity.

Results and Impact

The impact of the Delos WellCube project was significant. We delivered a solution that not only met the design team’s original vision but also exceeded expectations in terms of usability and scalability. The system allowed users to manage complex configurations of spaces and devices while maintaining a clear, organized interface that worked seamlessly across all devices.

One of the most rewarding aspects was seeing how well the system performed under the strain of complex, nested data. Despite the intricate nature of the design, users could easily navigate the hierarchy without feeling overwhelmed or lost. The right-side information panel provided critical context without disrupting the broader layout, and the anchored action menu made it easy for users to take relevant actions on the items they selected.

Technically, the solution was built to last. By optimizing for performance and avoiding browser-specific features, we ensured the system would remain robust and maintainable as the project evolved. The scalability of the system also meant that future expansions or updates could be implemented with minimal friction.

The client was thrilled with the results, and the feedback from the design and development teams was equally positive. By working together to harmonize ambition with practicality, we were able to deliver a system that felt both innovative and reliable.

Lessons Learned

This project reinforced the importance of collaboration between design and development, especially when dealing with complex systems. By keeping communication open and ensuring that both sides understood the constraints and possibilities, we were able to create a solution that satisfied both creative and technical requirements.

One key takeaway was the importance of early exploration. By diving into the technical feasibility of the design concepts early on, we were able to identify potential issues before they became roadblocks, allowing us to refine the design without compromising the user experience.

This project also underscored the value of flexibility—both in terms of the design itself and in the way it was implemented. By creating a system that allowed users to control the level of detail they wanted to see, we made a complex system feel manageable and user-friendly.

Ultimately, this project highlighted the critical role of a Design Technologist in bridging the gap between design vision and technical reality. By balancing these two elements, we were able to create a solution that not only worked but excelled.

This revised version focuses more on storytelling, avoids list-style formatting, and provides a detailed narrative of your role, the process, and the impact. Let me know if this captures the tone and style you were aiming for!