SUPERVISION is a complex software that enables remote control and management of multimedia systems such as cameras, audio, screens and more through the corporate network .
The original SUPERVISION software, despite its advanced capabilities, was built in a way that made it difficult to use it effectively. As a result, there was a need to redefine and redesign two interconnected complex processes.
The process of creating and linking a new third-party device now adapted to the work of the integrator (technical person)
Add breakpoints to your blank page, then drop sections to have them responsive out of the box.
Daniel Levi
35 | Rehovot
systems engineer at Elbit
Biography:
Daniel has been working with audio-video systems for 8 years. As an integrator, he is responsible for adding new devices to the SUPERVISION system, creating new commands, building the GUI screen and adapting the interface to the end customer's needs.
Frustrations:
Daniel is frustrated by the long time required for training on the system. He finds that the process of adding new devices to the system long, inefficient and requires a large number of steps that are not properly arranged, which causing failures while completing the process.
Motivation and goals:
Daniel is interested in finding ways to work more efficiently with the existing system, and to improve his ability to create more intuitive interfaces in less time for the end users.
Rona Sagi
28 | Tel Aviv
manager at communications company.
Biography:
Rona is responsible for a variety of technological systems, infrastructures and networks. Part of her role includes integration and design of user interfaces in the SUPERVISION system in the organization's meeting rooms.
Frustrations:
Rona faces challenges in the design of the GUI, including functional limitations while building control screens that produces a lack of clear visual hierarchy, cumbersome navigation between the 'control pages', and the lack of the possibility of connecting third-party devices.
Motivation and goals:
to understand how to build a GUI in the most convenient, fast and efficient way and to manage to organize the hierarchy between the discussion rooms in the best way.
Interviews of the Pre-sale and Development teams allowed me to understand the software pain points.
In parallel, I conducted benchmark on competing companies systems to get a broader picture.
Multiple steps
Adding third-party devices involves a lot of steps without a structured and clear order to work
Multiple input fields
Unnecessary input fields that burden the users, extend the input time and harm the operational efficiency
Unintuitive interface
Investing time in the initial training on the system and many questions from users about how it operates
Building the GUI
The amount of functions for building the 'control page' is small and the design of the buttons is outdated
Navigating between Pages
Select 'Control Page' under some rooms is confusing and makes it difficult to navigate between pages
The interface
The interface is visually overloaded, leading to a sense of confusion and lack of control for the user.
After analyzing the users' needs, I restructured the site's information architecture to optimize and simplify the overall user experience
Wireframes
Macro Builder
Linking a third-party device to the system begins by selecting the ‘MACRO BUILDER’ category and choosing to create a new device
Device Addition Process
Following research and mapping of the scope and content of data fields in each category, I created a unified, chronological process guiding users through adding third-party devices
Device Addition Steps
The steps of the process:
- Adding the appropriate port
- Linking the appropriate commands
- Creating variables and triggers based on the user's wishes.
02 . Second solution - Building the GUI screen
Room Builder
The Place where the user can build the graphical user interface (GUI) that will be reflected on the tablet in the meeting room and allow the user to control the devices.
1. Creating a button
2. Designing it
3. Associating it with specific commands
Navigation & Toolbars
Navigation between rooms and sub-pages is done through the building tree on the left side of the screen.
Adding an image, text, shape or element is done from the top toolbar.
Adjusting the size of the tablet to the screen proportions is done from the top toolbar.
Control page templates that make it easy for the user to build the GUI from scratch is done from the top toolbar.
Categories
3 categories for designing and linking commands to the GUI interface.
Icons
Design
Events
Style Guide
Colors Palette
#12202E
#192836
#1D2F40
#243A4E
#2E4193
#6452A0
#C26CE6
#5CC8F2
#EF335E
Typography
Text Styles
Aa
Headlines
Inter
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
Aa
Body
Roboto
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()