New User Interface DEMO

New Application User Interface

Transitioning from the Old UI to the New Unified UI

Introduction

This document provides a comprehensive guide to help users transition from the old interface of the IoT application to the newly redesigned, unified user interface. The new UI combines dashboards and group management into a single, streamlined view, significantly improving usability and reducing the time required to perform tasks.


Key Changes Overview

1. Unified View

Old UI:

  • Separate screens for Dashboard and Group Management.
  • Users had to switch between these screens to view dashboards and manage devices within groups.

New UI:

  • Dashboards and group management are combined into a single screen.
  • Users can:
    • Select a group from the group tree on the left.
    • Instantly view dashboards and manage devices without switching screens.

Benefits:

  • Seamless navigation.
  • Reduced time spent toggling between views.
  • Enhanced focus on real-time device monitoring and management.

2. Group Tree Integration

Old UI:

  • Users had to switch groups manually via a separate group selection window or Group management to view or manage devices in a group.

New UI:

  • The group tree is now always available on the left panel.
  • Users can:
    • Select a group to immediately load its devices and dashboards.
    • Hide the group tree to maximize dashboard space.

Benefits:

  • Instant access to group dashboards.
  • Flexible workspace with the ability to toggle the group tree visibility.
  • Streamlined navigation within large group hierarchies.

3. Simplified Top Menu

Old UI:

  • The top menu displayed the current group selected in group management.
  • Required to manage context between dashboard and group screens.
  • Add device button was right in the top menu but required to set the current group first

New UI:

  • The top menu is now minimal and focused on global actions, such as:
    • Group management: Quick navigation to all devices but also to all group management features under one roof.
    • Cart: Showing the content of the shopping cart with checkout feature.
    • User Profile: Access personal settings and account information.
  • Group context is now managed directly in the unified view.
  • Add new device button is available in Card and Table view of devices, so you can easily add a new device right the the selected group.

Benefits:

  • Clean and distraction-free design.
  • Simplifies navigation and reduces redundancy.
  • Consistent user experience.

4. Enhanced Device Management

Old UI:

  • Device management required navigating to a separate screen.
  • Actions such as moving devices between groups or updating settings were less intuitive.
  • Some actions, such as device settings, were available only in dashboards and not in group management.

New UI:

  • Device cards display real-time data and allow direct management actions:
    • Edit device settings,
    • Show data details,
    • Manage connectivity,
    • Move devices between groups,
    • Delete device
    • Perform bulk actions using checkboxes.
  • The same context menu for device actions is now available in both the Cards View and the Table View, ensuring a unified experience across different interfaces.
  • Tabs (e.g., CardsListMapCustom Map) provide multiple ways to view and manage devices.

Benefits:

  • Direct, actionable insights from the dashboard.
  • Same device context menu available in multiple dashboards

5. New Sub-Menu in group window bar

Old UI:

  • Functions such as DevicesNotifications, and Settings were spread across too many tabs.

New UI:

  • A dropdown menu in the group window bar of the selected group consolidates all related functions, including:
    • Devices: Manage devices within the group.
    • Notifications: Configure alerts and thresholds.
    • Messages: View and analyze communication logs.
    • Settings: Adjust group-level configurations including Tags, Geoplaces, Public Channels, Data forwarding, and Custom map settings.
    • Maintenance: Manage platform access, buy messaging credit, and monitor device health
    • Access: Control user permissions and roles.
    • Billing: Update billing details and see the past orders with an option to print the invoice

Benefits:

  1. Improved Clarity:
    • Keeps the main workspace focused on dashboards and device management by offloading secondary functions to the dropdown.
    • Ensures users always know where to find group-related tools.
  2. Efficient Workflow:
    • Functions that were previously scattered across different tabs or screens are now grouped logically.
    • This makes the new UI faster and more intuitive for experienced and new users alike.

Navigating the New UI

1. Accessing Groups:

  • Group management appears right after signing in the application
  • Use the group tree on the left panel to:
    • Select a group and instantly load its devices and dashboards.
    • Navigate subgroups by expanding or collapsing the tree.

2. Hiding the Group Tree:

  • Click the group tree icon left from group name to collapse the group tree.
  • The dashboard expands to utilize the full screen.
  • Click the icon again to restore the group tree.

3. Managing Devices:

  • Device cards display:
    • Real-time data (e.g., temperature, humidity, CO2 levels).
    • Alerts with color-coded labels (e.g., red for critical, green for normal).
  • Available actions:
    • Click the three-dot menu on a device card to edit settings or view details.
    • Select multiple devices using checkboxes to apply bulk actions (e.g., move devices).
  • Adding a New Device
    • Click the “Add Device” in the dashboard
    • Fill in the required device details (e.g., ID, name, type) and finish device registration.
  • Switch between:
    • Cards: Visual dashboard with device cards.
    • List: Tabular view of devices for quick overview of multiple devices and bulk updates.
    • Map: Geographical representation of device locations.
    • Custom Map: User-defined map layouts for facility management.
  • Filters and Search – use the filter bar to:
    • Narrow down devices by tags, manufacturer, or type.
    • Include or exclude subgroups.
    • Search for specific devices using the search bar.

4. Manage all other aspects of the group

Use new sub-menu to select the block of features you want to manage including Notifications, Messages, Settings, Maintenance, Access, and Billing.


Summary of Improvements

FeatureOld UINew UI
NavigationSeparate screens for dashboard and group management.Unified screen for seamless navigation.
Group ContextDisplayed in the top menu.Managed directly in the group tree.
Device ActionsRequired switching screens.Accessible directly from the dashboard.
UsabilityRedundant elements and complex flows.Simplified, intuitive design.

Conclusion

The new UI provides a streamlined, efficient, and user-friendly experience. By combining dashboards and group management into one unified view, it eliminates unnecessary navigation and improves focus on device monitoring and management. Users transitioning from the old UI will find familiar features presented in a more intuitive and accessible format.

Perform a full-text search to find the group, including all subgroups.

In Group Manager, you can now perform a full-text search to locate groups, including their subgroups, without the need to navigate through the entire tree.

Complete device operations from Group Manager

Tired of switching between Group Manager and Dashboards to manage your devices? From now on, you can access the same device operations directly in Group Manager!

Device deletion confirmation

To enhance safety, you now need to type “delete” to confirm and prevent unintended device removal.

More space in Group Manager

Hide the list of the groups to have more space for other features. Click on the “Groups” icon to hide or show the group list.

Pasted Graphic 1.png

Custom gauge thresholds

You can define custom thresholds on every device, so the gauge shows the colours based on your own settings.

New role – Device tenant

Highly requested feature from our white label partners. The user in Device tenant role will be able to register or extend devices using the coupons only. Such user will not see any price but can perform all device management tasks. This give our white label partners a big flexibility. Device tenants will also receive system notifications about non functioning devices or soon to expire devices. 

With this feature, all users with access right Device = full management will receive system notifications about devices that has not sent any message in last 7 days and all users with access right Connectivity = full management will receive system notifications about devices that are going to expire soon. Until now, these notifications were received only by the owners.

Delay in notifications

The new feature enables to trigger an alert only if conditions are unchanged for specified number of minutes.


For example if you want to have alert in case temp > 30°C but only in case it is > 30°C for more than 60 minutes, you set Delay = 60 minutes. If the temp goes down < 30°C in next 60 minutes, the alert will not be sent. 


You will find it under Delay option:

PastedGraphic-1.png

New features on Notification dashboard

Added new features:

  • Filter by day / month or time range
  • Export to CSV and Excel
  • Possibility to add a comment to every notification