top of page
Bytebeam Cloud Platform
Bytebeam is a comprehensive platform designed to optimize connectivity and data management for connected vehicles. It offers a range of services for fleet management, vehicle health monitoring, predictive maintenance, battery monitoring, driver monitoring, and over-the-air (OTA) updates. Key features include remote diagnostics, data analytics and visualization, and error analysis for efficient troubleshooting.
Role: UI/UX designer
Understanding requirements from customer feedback, Prototyping and Designing on Fiigma.
Project Duration: Oct 2023 onwards
Project Members: Ravi Teja (CTO), Pranav Kumar (Senior Frontend Engineer), Isac Sam (Graphic Designer), Krupali Jain and members from frontend team
Problem Statement
Features Enhancement
-
Enhanced actions overview
-
Phased roll-out of update
-
Modified New Action Form
-
Improved View options and filter function
UI Overhaul
Due to the absence of a design system, the user interface was redesigned to improve usability and visual appeal.
Complex Information Structure
The cloud application handles large number of devices thus requiring multiple tools to manage efficiently.
Design Process
To create a standard design for Bytebeam’s platform, integrating customer feedback and maintaining the core functionality and design aesthetics, we focussed on key areas like user experience, interface consistency, and ease of use. Here’s how we break it down:
User-Centered Design Approach
Customer Feedback Integration: Started by gathering detailed feedback from existing users to understand pain points, desired features, and usability challenges.
How do you currently manage the devices?
Who is responsible for managing/monitoring the devices?
What are the limitations of the current process?
How many devices do you monitor/manage?
What are the actions required on connected devices?
How often do any Action need to be performed?
What are the errors that could be encountered while performing an action?
What are the parameters to check if the device is healthy and working properly?
What are the device identification parameters?
Are the Actions on all the devices performed simultaneously?
How many actions do you run simultaneously?
User Pain Points
Insufficient Action Overview Information
The information displayed on the Action Overview was insufficient to meet the growing requirements of the clients.
Improvement on Workflow of New Action
There are different stages within a single event, involving numerous stakeholders. Lacking structured approach creates chaos.
Errors and problems in rolling new updates
Different vendors for different tasks are required and thus keeping a track of everyone`s progress is very difficult.
Basic Filter Criteria
The existing filter criteria have limited capability. We noticed that they use the search function and manually note down each device.
Design Changes
The existing users work mainly with the "Actions" tab of the platform. With the growing number of devices being active on the cloud, the actions tab required an upgrade to handle the load, incorporate new features and enhancement of the functionality. Thus, the following design changes were made:
1.Enhanced Action Summary
Old Design
New Design
-
The user was notified solely of the actions that had been executed on the devices, and not informed of their current status or any ongoing operations.
-
The sub-tabs were categorized into 'Live Actions' and 'Action History,' providing a clearer distinction between ongoing and completed activities.
-
A new widget was introduced to draw the user's attention to action failures and their underlying causes.
2.Phased Roll-out Feature : Dynamic Icon Integration
The phased roll-out feature introduced additional information that required segmentation into distinct sections. To enhance clarity and user experience, dynamic icons were implemented to draw attention and provide immediate visual feedback on the current status, thereby making the interface more intuitive and informative.
3.Create New Action Form : Progressive Disclosure
When initiating a new action, users may need to configure multiple parameters to ensure a successful roll-out. The use of progressive disclosure within the form design helps maintain user focus by presenting information in a structured and manageable manner.
The form follows a left-to-right progression, gradually increasing in complexity as additional features—initially hidden—are revealed. While completing the form, users have the option to enable advanced functionalities such as Phased Rollout, Advanced Trigger Function, and Auto-Retry, depending on their requirements.
4.Create New Action Form: Summary screen
The length and complexity of the form may increase the likelihood of user error. To mitigate this risk, a summary section is provided at the end of the form, allowing users to review and confirm their inputs before final submission.
5.Create New Action Form: Minimizing User Errors
We identified that managing and executing actions across a large number of devices often results in overlaps with devices already engaged in other actions, leading to system errors.
To address this, an 'Undone' action state was introduced, allowing users to defer handling of conflicting devices until a later stage.
To support informed decision-making, a button was added to open the details of conflicting actions in a new tab.
Additionally, a close button was provided to offer users a clear and immediate exit from the dialog box, should they wish to return to the previous screen.
6.Filter Function and View Options
Managing a large number of devices can be challenging without appropriate filtering capabilities and view options. Each device is associated with two distinct sets of parameters that aid identification: Metadata and Device Shadow—a virtual representation of the device's state stored in the cloud.
To further streamline device selection, a percentage-based filter has been introduced. This feature enables users to select a subset of devices based on a specified percentage of the total list, simplifying bulk operations.
Filter options are context-sensitive and vary across different sections of the interface. For instance, in the actions listing section, filters are available based on parameters such as 'Type of Action' and 'Status of Action,' allowing users to navigate and manage actions more efficiently.
Steps 1 to 4 illustrate the selection of the required filters.
Step 5 highlights the available view options, which assist users in optimizing screen real estate and improving overall interface manageability.
bottom of page