This project was stopped in the middle of 2021. The version below is completed in October 2020. My role was as a UX designer.

In the beginning, I cooperated with the interaction designer in the Netherlands, then it was fully transferred to the SH office while the development is all the way in India.

Introduction

Interact Sports is part of the Interact products family. Here it is Interact Sports Recreational, doing the light controls for small sports clubs. On the other hand, there are apps for Interact Sports Arena, which is the lighting system for big stadiums.

Terminologies

Facilities/Sites are locations that contain one or more fields that utilize lighting scenes. Usually, a club is called a “facility” in the app. One customer might have one club or clubs in the system.

Fields always belong to a facility/site. Fields have lighting events that are scene-based (lighting scenes). There are multiple types of fields for which they can be identified as, for example, soccer fields, tennis courts, basketball courts, etc.

Lighting scenes are the lighting behavior (the brightness of the lights) that occurs in a field. They are set up by the user when either he/she creates an event or they are done spontaneously in some instances. The following are possible lighting scenes users can enable in their respective fields.

• Match Scene: Lighting behavior that utilizes 100% of lighting capacity. 
• Training Scene: Lighting behavior that uses 40-70% of lighting capacity.
• Comfort Scene: Lighting behavior that uses 10-30% of lighting capacity.
• Half-Field Scene: Lighting behavior that enables either the left or right side of the field lighting.

Events are scheduled lighting scenes for a designated amount of time by the user within the field schedule. An event consists of the date, time, recurring behavior, lighting scene, and location (field name).

Fixed rules are rules within the master schedule that are based along specific time periods, for example, 7:00 – 10:00.

Twilight rules are rules based upon the time of the sunrise and the sunset. The facility manager sets the rule an x-amount of time after sunrise and an x-time before sunset, for example, 5:00 – 30 minutes after sunrise; 15 minutes before sunset – 23:00.

User roles

Facility manager (one site)

A facility manager is a user who oversees/has access to the lighting behavior of the site. This includes, depending on licensed access, the field scheduling of the site, the master schedule of the site, the monitoring of energy consumption and scene usage per field, and controlling the lighting behavior on each field locally or remotely.

Regarding the health of a site, the facility manager resolves alerts that occur on the site by either resolving them themselves or requesting support from the site installer.

Facility manager (multiple sites)

Trainer/Coach

He/She is a user of a site’s field whose access is likely to only be able to schedule events in the field schedule and control the lighting behavior of the fields they have access to.

Site installer

The site installer is responsible for communicating with the site’s facility manager in order to resolve arising and occurring alerts.

Main scenarios & hi-fi mockups

Main user scenarios include scheduling (field schedule and master schedule), monitoring, and light control.

We learned that in most cases users would use the app on iPad or any other pad devices. And the users probably are retired people about 45~65 years old. Therefore, all the hi-fi mockups are based on the size of pad devices and components are for touch hybrid in the Interact library.

Top navigation and basic

The breakpoints in the responsive rules, as well as the top nav pattern, are the same across all the Interact products.

Basic – breakpoints

Basic – top navigation

Facilities

If he/she is a facility manager of multiple sites, he/she can see this page. He/She is able to go to the schedule, control, or monitor page of a facility directly through the shortcuts on the card.

From a visual design perspective, you could find Relative Faux is applied to all the big titles to create some relaxing feeling, a mix of serif and sans-serif fonts, compared to the bold Roboto titles in Interact City. Roboto is the official font for all the Interact products, while Relative Faux is the official font for Signify. But Relative Faux is not a good font for digital products. That’s why it is only applied to the titles or sometimes numbers in Interact branded apps.

Facilities – the entry point for all the facilities

Site dashboard

If he/she is a facility manager of multiple sites, he/she can see this page. He/She can check all the facilities he/she has and overall site health, energy consumption, and field usage. He/She switches between the facilities and monitor on the top navigation.

The color palette for the dashboard is based on the information that the facility manager (multi-sites) usually has 2-3 facilities, but the maximum could reach 10. Therefore, the adjacent color of the 2 facilities shouldn’t be too similar while 10 colors have to be picked from the Interact data visualization color palette.

Site dashboard – energy usage

Users are able to engage with the graph to see more details. All the touch behaviors are documented on Confluence, easy to trace back, and for all the stakeholders to comment in a remote working scenario.

Site dashboard – energy usage – graph details

More rules for the color palette of the site dashboard are specified below. Because the colors are auto-generated, the point is to make sure the sequence of picking up the colors is coded in the system. The responsiveness of the graph is also specified in the image below.

Site dashboard – energy usage – graph spec

Scheduling

The field schedule is where coach/trainers or facility managers schedule events that are either one-time instances or recurring. They have an overview of what events are occurring at which fields by day, week, and month level.

Field schedule – day view

The responsiveness of scheduling is a big challenge. Because it can’t follow the basic responsive rules and it’s not in the grid system. We reorganized all the controls and all the layout for the width from 320 ~ 767px.

Field schedule – week view

Field schedule – week view – event details

Users can see/edit the event details by tapping the event.

Field schedule – month view

Colors play a very important role in the field schedule, compare to normal calendars. This is because usually users only have an event at a time in their calendar, which means all the events won’t overlap with each other quite often. But the event of different fields in the field schedule overlaps with each other most of the time. Users usually have 4-6 fields per facility. Therefore, it’s hard to see the event is for which fields by text. They are breaking because of the overlapping. Colors allow users to see what event is for what fields clear at a glance.

Color rules are also well defined for the field schedule. Again, all the colors are from the data visualization color palette. The sequence of picking up the colors is essential to style control. The plan is to allow users to pick up the colors themselves in the future.

The style of the dates is specified in the image as well. The selected state of the date is particular for the mobile (screen width from 320-767) layout.

Field schedule – event and date style spec

Field schedule – create event

Location (field name), time duration, frequency (recurring), and lighting behavior are specified when users create an event. If the event falls outside of the constraints of the master schedule, lighting for that event will be disabled. More details can be found in the “Conflicts in the field schedule” section.

Field schedule – create event – dialog details

The master schedule can be only seen and set by the facility manager. Rules in the master schedule dictate whether or not lighting can be scheduled at the site.

When time restriction is toggled off, lighting can be scheduled at all points of the day. When time restriction is toggled on, lighting can only be scheduled within the specified time periods by creating rules.

Master schedule – week view – time restriction toggled off

Master schedule – week view – time restriction toggled on

Lighting can be scheduled from 9:00 – 16:00 every day in the example below, which means the events that user creates in the field schedule work from 9:00 – 16:00.

When user scrolls down the scheduling page on mobile devices, the title is auto-resized and the dates info is fixed on the top. Once user scrolls up, all the controls (time restriction toggle button, view switch) show up. The behavior is similar to the browser controls on mobile devices.

Master schedule – month view

Master schedule – create rule

Rules in the master schedule are corresponding to the events in the field schedule. There are 2 differences between rules and events.

• Users can choose he/she wants a fixed rule or a twilight rule.
• Once a rule is created, it applies to the whole site. No fields are designated.

Master schedule – create rule – dialog details

Conflicts and status

Conflicts might happen when the facility manager makes changes in the master schedule. The events worked before in the field schedule may not work anymore because of the change. And the coach/trainer who can only see the field schedule might be confused with the sudden impact. This is more severe when it is a recurring rule or event.

Therefore, we inform users of the impact in different ways and steps in the field schedule.

Conflict – flow

Conflict – field schedule – day view

The number of conflicts shows up on the left side of the create button.

Conflict – conflict details

Users can see the conflict details by clicking the number of conflicts.

Conflict – event details

Users can see a warning icon and the error message in event details. When they edit the event/series, they can see problematic time. Available options are provided in the dropdown list.

Event status spec

• When conflict happens, the events with problems change to a distinctly different style. And a warning icon shows up in front of the time.
• The background always indicates the available time period in the master schedule.
• Today’s events are disabled when time passed. For example, it is Feb 2, 2018 today and the current time is 12:15 pm. Then the events that happened before 12:15 pm are displayed in a disabled state. But they will be back to the default states as shown after today becomes yesterday.

Control

Control gives a chance for the users to temporarily manually override the current lighting behavior. It will take effect immediately after users trigger the lighting scenes.

Users can only access the lighting scenes of the fields they have access to. This can be done both locally on-site and remotely. Users can also turn off all lighting scenes that are active on the site with a master switch.

Control – field lighting control

Control – field lighting control – button spec

Monitor within a site

Alerts (Monitor the health status of the lights) is where the facility manager is notified of what alerts are occurring where and when on their site.

The facility manager resolves the alert himself/herself with the alert action. He/She requests support from the facility installer. Once an alert is selected, he/she could see the action bar at the top of the table. No matter he/she marks it as resolved or request support, the status will be updated in the table.

Monitor within a site – alerts

Monitor within a site – alerts – table spec

All the width of the columns is defined in the image below, following the rules created in the “table display improvement in Interact City“.

Energy usage is the same as energy usage in the site dashboard, except that here is the energy usage within a site. The facility manager can compare the energy consumption of the fields across specific time periods.

Monitor within a site – energy usage

It is also the same as energy usage in the site dashboard in interaction design-wise and visual design-wise, keeping consistency. Instead of the site summary in the site dashboard, users can see and interact with the fields below the graph.

Usage is where the facility manager has an overview of the total number of hours that each scene type is utilized across the site across a designiated time period.

This overview of scene usage is filtered upon three levels, per scene, per field, and per usage source.

Monitor within a site – usage per scene and field

Other topics

Icons for field types

Below are the icons for the 9 types of fields in the app. They are also widely used in the Interact Sports Recreational 3rd party apps. All the icons follow the rules in the Interact icon system, sticking to the grid, 2px wide borders, etc.

In the begging, I tried to use the layout of the types of fields directly in the icon. But it’s hard to recognize what the type is. This is because common people are more sensitive at the key symbol in a certain sport, not the field layout, especially when you just know the sports but never try yourself. And it is hard to keep all the details in the field layout so that all the icons look very similar to each other in the limited icon sizes. We discussed, iterated, and came to this idea that we put the key symbol in the frame, easy for recognizing the types, and at the same time, the frame itself makes it feel like a field.

The initial discussions on the colors in the field schedule

Main concerns are the initial wireframes are recorded as below.

• There is no field information written on the calendar.
  • The colors might not enough for the color blind people.
  • It would be too abstract when the field filter panel is collapsed.
• How are we going to pick up the colors for the fields?
  • we should not use colors that are somewhat the same as signal colors in the Interact library. Therefore, no red, green, or orange should be picked as colors for the fields. Within the colors in the data visualization color palette, we would pick the 20, 100, and 150 variants, considering the biggest contrast differences within the same color.
• Why are the colors necessary in the field schedule?
  • We should apply colors when it is helpful and necessary.
  • If you look at apps that are using complex agenda systems (multiple agenda’s), you’ll see that they all go with a multicolored solution.
• Will the colors create confusion across sites?
  • If the user switches a lot between sites it could be confusing that the same color is used for different fields. Therefore, the questions like how many users have multiple sites, and what is the average amount of sites a user has, how often a user switches between sites, become important.
  • Dependent on the answer to these questions we should also test it with users. Maybe it is clear that the same color is used for different fields because the user initiated the switch in sites in the first place.
  • Another option could be to allow users to choose the colors for the fields themselves.
  • The answer to the questions above:
    • 10-15% of sites have users who need multi-site access.
    • The average changes with the time being. At this moment, typically we see 2-3 sites per multi-site user. It will definitely grow.
    • Not sure about the answer. But so far with the understanding of the users, we don’t expect a frequent switch among coaches, but might be more often for municipality facility managers (multiple sites).