Multimedia Control Optimization

software program that enables audio/video control, monitoring and distribution across the ethernet of multimedia projects

My Role

UX/UI Designer

Surfaces

A complex system

Duration

Oct 2023 - June 2024

Team Composition

Pre-sale & Developer teams

My Role

UX/UI Designer

Surfaces

A complex system

Duration

Oct 2023 - June 2024

Team Composition

Pre-sale & Developer teams

Multimedia Control Optimization

software program that enables audio/video control, monitoring and distribution across the ethernet of multimedia projects

My Role

UX/UI Designer

Surfaces

A complex system

Duration

Oct 2023 - June 2024

Team Composition

Pre-sale & Developer teams

My Role

UX/UI Designer

Surfaces

A complex system

Duration

Oct 2023 - June 2024

Team Composition

Pre-sale & Developer teams

Multimedia Control Optimization

software program that enables audio/video control, monitoring and distribution across the ethernet of multimedia projects

My Role

UX/UI Designer

Surfaces

A complex system

Duration

Oct 2023 - June 2024

Team Composition

Pre-sale & Developer teams

My Role

UX/UI Designer

Surfaces

A complex system

Duration

Oct 2023 - June 2024

Team Composition

Pre-sale & Developer teams

Overview

Overview

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 .

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 .

Challenge

Challenge

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 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.

01 . First process

01 . First process

Adding a third-party device to the software

The process of creating and linking a new third-party device now adapted to the work of the integrator (technical person)

The process of creating and linking a new third-party device now adapted to the work of the integrator (technical person)

02 . Second process

02 . Second process

Building the GUI screen (graphical user interface)

Add breakpoints to your blank page, then drop sections to have them responsive out of the box.

Add breakpoints to your blank page, then drop sections to have them responsive out of the box.

Personas

Personas

Personas

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
Operations Manager at Cellcom

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.

Research

Research

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.

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.

Pain Points

Pain Points

01 . First process- Adding a third-party device

01 . First process- Adding a third-party device

Multiple steps

Multiple steps

Multiple steps

Adding third-party devices involves a lot of steps without a structured and clear order to work

Adding third-party devices involves a lot of steps without a structured and clear order to work

Adding third-party devices involves a lot of steps without a structured and clear order to work

Multiple input fields

Multiple input fields

Multiple input fields

Unnecessary input fields that burden the users, extend the input time and harm the operational efficiency

Unnecessary input fields that burden the users, extend the input time and harm the operational efficiency

Unnecessary input fields that burden the users, extend the input time and harm the operational efficiency

Unintuitive interface

Unintuitive interface

Unintuitive interface

Investing time in the initial training on the system and many questions from users about how it operates

Investing time in the initial training on the system and many questions from users about how it operates

Investing time in the initial training on the system and many questions from users about how it operates

02 . Second process - Building the GUI screen

02 . Second process - Building the GUI screen

Building the GUI

Building the GUI

Building the GUI

The amount of functions for building the 'control page' is small and the design of the buttons is outdated

The amount of functions for building the 'control page' is small and the design of the buttons is outdated

The amount of functions for building the 'control page' is small and the design of the buttons is outdated

Navigating between Pages

Navigating between Pages

Navigating between Pages

Select 'Control Page' under some rooms is confusing and makes it difficult to navigate between pages

Select 'Control Page' under some rooms is confusing and makes it difficult to navigate between pages

Select 'Control Page' under some rooms is confusing and makes it difficult to navigate between pages

The interface

The interface

The interface

The interface is visually overloaded, leading to a sense of confusion and lack of control for the user.

The interface is visually overloaded, leading to a sense of confusion and lack of control for the user.

The interface is visually overloaded, leading to a sense of confusion and lack of control for the user.

Archtecture

Archtecture

After analyzing the users' needs, I restructured the site's information architecture to optimize and simplify the overall user experience

After analyzing the users' needs, I restructured the site's information architecture to optimize and simplify the overall user experience

Flow

Flow

After analyzing the users' needs, I restructured the site's information architecture to optimize and simplify the overall user experience

After analyzing the users' needs, I restructured the site's information architecture to optimize and simplify the overall user experience

01 . First process - Adding a third-party device

01 . First process - Adding a third-party device

02 . Second process - Building the GUI screen

02 . Second process - Building the GUI screen

Wireframes

Wireframes

wireframes were created to define the structure, user flow, and key features, ensuring a clear and functional design foundation

wireframes were created to define the structure, user flow, and key features, ensuring a clear and functional design foundation

User Interface

User Interface

01 . First process- Adding a third-party device

01 . First process- Adding a third-party device

Macro Builder

Linking a third-party device to the system begins by selecting the ‘MACRO BUILDER’ category and choosing to create a new device

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 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 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.

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 process - Building the GUI screen

Room Builder

The Site where one may develop the graphical user interface (GUI) to be displayed on the meeting room's tablet, empowering the user to regulate the gadgets.1. Developing a button 2. Styling it 3. Linking it to certain actions

The Site where one may develop the graphical user interface (GUI) to be displayed on the meeting room's tablet, empowering the user to regulate the gadgets.1. Developing a button 2. Styling it 3. Linking it to certain actions

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.

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.

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.

3 categories for designing and linking commands to the GUI interface.

Design

Icons

Events

Design

Icons

Events

Let's work together

I’m passionate about creating design solutions that connect with people and make an impact