Navigation concept for Desigo CC Flex client
CC Flex Client is an advanced Building Management System (BMS) software designed to streamline and optimize building operations. It offers tools to monitor, manage, and control various building systems, including HVAC, lighting, and security.
-
Role: UX/UI Designer
-
Tools Used: Sketch
-
Project Duration: 6 months
The problem
As CC Flex Client, expanded its features, we faced three primary issues:
-
Hard to Access Nodes: Essential features were difficult to navigate, slowing down user interactions.
-
Information Overload: The influx of new features led to an overwhelming interface, hindering user efficiency.
-
Hidden Features: Valuable functionalities were becoming less visible, underutilized by users due to interface complexity.
These issues collectively contributed to a steep learning curve and reduced overall user satisfaction. The goal of the redesign was to simplify the navigation, streamline the information presentation, and make key features more accessible and visible.
User research and analysis
I collaborated with the product manager and the research team to analyze user feedback and conduct direct user interviews, focusing on Desigo's legacy navigation challenges.
These insights informed our redesign strategy, leading to a simplified navigation structure and improved user interface, aligning with user needs and business objectives.
Key takeaways
Streamlining User Interface: We refined the interface by removing a redundant views which previously mixed different types of content, thereby sharpening the distinction between active workspaces and toolsets.
Optimizing Menu Structure: Settings need to be integrated into a central menu, making them more accessible and intuitively separating them from unrelated functional areas.
User-Centric Organization: Rather than using a fixed categorization for applications, we analyzed user engagement data to organize applications in a way that aligns with actual usage patterns, ensuring a more natural and efficient user experience.
AI and explorations
Desigo CC Flex is an advanced, cloud-based software platform that leverages views for visualizing sites or buildings from multiple perspectives.
It interfaces with a less user-friendly, legacy installed version from which it gathers data. To enhance navigation within Desigo CC Flex, we mapped all functionalities to align with the installed version's framework, ensuring seamless integration.
This work was done in collaboration with the team's UX Architect.
Solution
After several iterations, we decided to integrate Vertical navigation and an Application menu, enhancing scalability without necessitating a complete UI redesign.
Vertical navigation, familiar to users from various platforms, including desktop applications and websites, ensures efficient content scanning and seamlessly adapts to mobile devices.
The Application smart filtering features an advanced filtering concept tailored for locating specific applications within the BACnet framework. This design simplifies navigating the tree structure, allowing users to efficiently filter and find applications based on their specific needs.
We also decided to add a Overview page for each node, making easier to find related items.
Vertical navigation
Introducing a vertical navigation menu to Desigo CC Flex might seem basic at first glance, but it was a significant innovation. Moving away from the cumbersome select-based navigation that previously made finding information challenging, this shift not only streamlined the user experience but also set a new standard for accessing and managing features efficiently.
What seemed elementary was, in reality, a pivotal enhancement.
Application smart filtering
In the context of BACnet, an application refers to a specific function or service that facilitates the monitoring, control, and automation of various building systems, such as HVAC and lighting.
To enhance usability, we've transitioned from presenting all applications in a single, overwhelming view to a more organized approach using smart filtering within a tree structure. Now, users can apply filters, like 'Trend,' to the tree. This effectively narrows down the view to only display relevant nodes associated with the selected application, streamlining navigation and making it significantly easier to find and manage specific functions within the vast BACnet ecosystem
Overview
Furthermore, recognizing the challenge of navigating a deep tree structure, we've added an 'Overview' feature. This provides users with a snapshot of recently used applications related to each node, simplifying access to frequently used functions and enhancing the overall navigation experience.
The results
After six months of collaboration involving the project management team, architects, and UX research specialists, coupled with numerous workshops and usability tests, a strategic decision was made to stagger the implementation across three phases, each aligned with a distinct release cycle.
The first phase introduced the vertical navigation, fundamentally altering how users interact with the interface.
Following this, the second phase brought in smart filters, significantly refining the user's ability to navigate through the system's complexities.
The final phase focused on implementing the overview feature, providing users with a streamlined access to their most recently utilized applications and greatly enhancing the navigational efficiency within the application.
To learn more about Desigo ecosystem visit https://www.siemens.com/global/en/products/buildings/automation/desigo/building-management/desigo-cc.html.
Images may not be up-to-date