Admin Panel Design
ABOUT
Trebellar helps Workplace, Facilities Operations, and Real Estate teams make faster, more informed decisions. The easy-to-use platform unifies and analyzes building data, then applies AI and machine learning to make it actionable via insights, alerts, and easily customizable automations.
In order for the Trebellar platform to gather the necessary data from the sensors, it needs to know where each of the sensors is located. To facilitate this, we designed the Admin Panel where users can set up their organization, add all the locations, buildings, and floor plans, add all the sensors across locations, and map the sensors to the floor plans. Customer Success Managers (CSMs) can achieve this either with CSV upload or by manually entering the information into the platform.
Data Visualization, Product design, UI/UX Design, Responsive Web
Created By
Studio Pinto
Client
Trebellar
Year
2023
HMW
How might we facilitate users to setup their organization, locations and sensors for Trebellar to start collecting data?
INFORMATION ARCHITECTURE
USER JOURNEY
SPACE MANAGEMENT
LOCATION DETAILS
Upload CSV
Seamless Data Integration
We divided the CSV upload process into three stages, guiding users through the necessary steps during upload to ensure accurate matching within the system, thus providing a clean flow for users.
Improved User Navigation
We facilitated user access to relevant information by displaying location details in the necessary hierarchy, while also ensuring that editing and adding new locations are easily discoverable.
SENSOR INTEGRATIONS
Connect Sensors
Streamlined Sensor Integration
Sensors can be seamlessly imported into the system using vendor ID numbers, with user-editable capabilities enabled.
SENSOR AND LOCATION MAPPING
1
Teams are directed to the mobile application through QR code, where they receive information about sensors and activities for the day.
2
Entering both location and sensor information into the system is required to map sensors to locations.
3
The team has the option to manually input their location or initiate the selection process by enabling location services.
4
All location details, down to the room level, are selected. Here, the necessary information has been systematically requested from the user.
5
After finding the right location, the user can proceed to select the sensor.
6
The user views the necessary information regarding the location on the page and can proceed by scanning the sensor physically or adding it manually.
7
If the option to scan ID is selected, the code on the sensor is scanned by the team.
8
The ID code on the sensor is scanned to match it with the sensor in the system.
9
If the sensor is being manually located, necessary information is entered to find the correct sensor in the system.
10
Each sensor is grouped under its respective sensor vendor with all associated information.
11
The user can search for the correct sensor by typing relevant keywords.
12
The mapping process is completed after both the location and the sensor within the location are selected.
Location-First Selection
In addition to drag-and-drop functionality, we designed a version where users first locate the position and then select sensors, facilitating mapping from both approaches and covering diverse use cases.
Clear Visual Feedback
By selecting sensors and using the button above, they are effortlessly mapped to the initially chosen location, with clear visual indication provided to the user for both the selected location and sensor.
Undo Mapping
Through the undo option, users can retract their mapping actions, providing them with an avenue to easily revert their decisions.
Enhanced Visibility
We showcase locations and sensors side by side, allowing CSMs to clearly view and edit locations as presented in the CSV file, ensuring effortless edits and additions.
Sensor Detail Access
Clicking on sensors reveal all details, providing users with necessary information in the correct hierarchy, thus facilitating their tasks.
Effortless Mapping
Unmapped sensors are visually indicated with tooltips and informative cues, enabling users to easily identify and map them to their respective locations by drag and drop.
