UI design of Interact Sports Arena v2.0

This project is stopped in the middle of 2021. The version below is updated on Oct 2020. I played the role of a UX designer.

Introduction

Interact Sports Arena is a lighting control system for big stadiums. As part of the big Interact product family, Interact Sports Arena and Interact Sports Recreational are made up the lighting system for the sports industry.

2 apps are involved in Interact Sports Arena, control app and monitor app. Due to the technical limitations now, the 2 apps have to be separate. The control app is for the users to control the lights in the stadiums on daily basis and whenever there are events. More details are described in the “User roles” section. The mockups are also from the control app. Monitor app is still in concept, exploring the possibilities, understanding the business model, the requirements, brainstorming, and trying to translate them into the UI.

Terminology

Scene: A scene is a single static look using a selection of fixtures. It is a quick and easy way to build up the basic elements. It’s typically used only for a single area. It is defined in Pharos, a 3rd party lighting control app with more complex and sophisticated effects.
Timeline: A timeline is an intuitive way to create a whole sequence of lighting effects dynamically that will run over a defined time period. It is also defined in Pharo.
Show: A show is a scene or a timeline mapped to fixtures that are across multiple areas in an arena. It is not a unique type of lighting behavior. It is defined in Interact Sports Arena.
Trigger: A trigger is a group of actions to be performed in case of a particular event. It’s the combination of conditions (the circumstance) and actions (the consequence).
The dependencies:
1. Scene and timeline can be only performed within a specific area of an arena. Activating a scene or timeline will turn off the active scene or timeline in the same group.
2. Multiple triggers can be active in a group. Triggers will not intervene with scenes or timelines.
3. Cross group behavior: Whether scenes and timelines have a dependency on each other or not depends on the overriding feature is enabled or not in a group.
  - 3: Activating a scene/timeline in Group B/C will also stop the active scene/timeline in Group A.
  - 3-1: Scenes and timelines in Facade don’t affect or get affected by other groups.
4. Controls between groups that the overriding behavior of both is disabled, don’t intervene with each other.

Lighting behavior dependencies

Group: A group is a specific area or a logical group in an arena. Usually, it can be a stand, a facade, or a pitch, depending on the arena types. But it can also be a mix of physical locations, depending on what kinds of lighting effect you want. This is a bit different from the groups in the monitor app. Monitor app is used to check the health status of the lighting system. Therefore, it would be groups based on the physical areas in the monitor app 99% of the time. Because users would like to know the location of the devices when there is an error happened.

User roles for both apps

3 main user roles are involved in both apps. Users also have different needs in the 2 apps.

Club owner is the decision-maker, who buys the system, not the heavy user of using the system himself. His focus is on the benefit of using the system, cost reduction, and the business growth of the arena, like having the ability to host big events, attracting more audience and more TV broadcasted events.

Facility manager is one of the heavy users of the system. He is in charge of the arena facility management.

When there are big events, he would like to have a simple, intuitive, and concise UI to control the lighting effects. And in quite a lot of cases, an arena can be a landmark of an area. He wants it to be beautiful on a daily basis and sports fans are proud of it. (The main scenario in the control app)
He also would like to make sure there are no errors for all the devices involved in the lighting system, especially before the big events. They could also save energy consumption and reduce the cost. (The main scenario in the monitor app)

Maintenance crew is a group of system engineers. They can be local maintenance groups, our value-added partners (VAP), or execution partners (EP). They are responsible for the installation, commissioning, and technical problems solving of the whole lighting system. They typically serve multiple customers, monitor multiple sites, and work remotely. Therefore, the apps help them to discover and evaluate the issues, take action proactively. They could also decide whether they should do an on-site visit or not when issues are raised.

Information architecture – control app

Hi-fi mockups

The control app is simple from a UI perspective. Because the backbone of the application is the Pharos control system, which enables complex and customized lighting behavior configurations. The control app of Interact Sports Arena is just a surface-level interface.

We tried to provide different touchpoints for the users, considering different working scenarios. Users might sit at the office, reading the health report, or work in the field, checking the error details. Pad device is the main focus but desktop with big monitors and mobile phones are also supported.

Basic – breakpoints

Light theme

Basic – top navigation

Basic – side panel

Control – show

The controls are just big buttons in the app. All the concrete button behavior are predefined in Pharos. The area will be highlighted in the illustration when it is selected on the left panel. When show is selected, the whole arena is highlighted as displayed below.

Configuration – general

We heard that users are quite proud of their arena in most cases. They would like to choose their arena type or even have their own customized symbol for their arena. We plan to have it as a premium service in the future.

Configuration – groups

The width of the columns in the table are defined following the same rules described in “Table display improvement in Interact City“.

The reorder button is shown directly on the UI on purpose because our users are usually over 30 or middle-aged. They are not technology sensitive type. So we decide to put it directly on the UI, easy to find.

Configuration – controls

Users can manage all the lighting behaviors like the name of the buttons, the group it assigns to on this page.

Dark theme

We also got a clear requirement that users want both light theme and dark theme in the system.