KEMISTRY APP
Sports commentators and shout-casters have long relied on the magic of in-person chemistry when narrating the action on the microphone. Being in the same room as one's commentary partner allows one to read their body language, facial expressions, and hand gestures, all of which have an immense impact on the seamlessness of the commentary that viewers and fans hear on the air.
With the COVID social distancing protocols as well as a rise in e-Sports, however, many commentators are now finding themselves many miles away from their commentary partners. With only their voice to communicate their intent, the rate of interruptions and awkward transitions is on the rise while commentary chemistry suffers.
The Kemistry app serves to bring the chemistry back to commentating by allowing commentators to visually non-verbally request and hand off air time through an interface built to thrive in peripheral vision, allowing commentators to keep their focus on the action on screen.
COMMENTATING IN A DIGITAL AGE
Until one sees a team of commentators in action, it is hard to imagine how much goes on in the commentary booth that is not picked up by the microphones. Hand waving, pointing, gesturing, and even a fellow commentator taking a breath are all indicators that something is going on on the track, field, court, or rink that requires attention or a verbal hand-off to another member of the commentary team. This has been a practice commentators have relied on for generations.
Fast forward to 2020 - e-Sports and virtual competition are sky rocketing exponentially and commentary for traditional sporting events is moving to the digital world to minimize close contact and transmission of COVID-19. In the changing circumstances, fans at home expect the same quality of entertainment, but with many commentary teams fragmented, with each member broadcasting from home or from a separate studio, that critical team chemistry is faltering.
An analysis of a broadcast of the top division of the Alliant Motorsports: Americas racing league revealed some staggering insights:
EVEN ONE OF THE TOP COMMENTARY
TRIOS COMMITTED NEARLY ONE ERROR
EVERY MINUTE
Analysis of the commentary for Alliant Motorsports: Americas Division 1 broadcast on October 24th, 2020. In 47 minutes of commentary, there were 34 interruptions and 6 unintended pauses. Even one of the top commentary trios in the organization made almost one error per minute.
As one could expect, the experience of less experienced and more novice commentary teams was even worse. This shocking lack of chemistry needed a resolution. Commentators needed to bring an element of non-verbal communication back to restore order to their narrative.
PROBLEM STATEMENT
Commentators need a way to coordinate speaker transitions and indicate urgent commentary points in a non-verbal manner because these actions are vital to a consistent flow of narration. We will know this to be true when interruptions and unintended pauses during broadcasts decrease by 50%.
MY ROLE
The concept of the Kemistry app is something I originally conceived while working with Alliant Motorsports on their stream experience strategy. After bringing on the incredible computer science professional Aditya Dantuluri to to act as the developer early on in the process, I performed all end-to-end design on the app. Upon the completion of the design, I continued to supervise Aditya's development efforts and offer input on the impact of various development choices on the experience of the product.
SEEKING A SEAMLESS FLOW
To get an understanding of the best way to seamlessly integrate a solution into the routines of commentators, we interviewed five separate commentators with a variety of backgrounds and experience. Some were highly sought after shout-casters with experience working live at sporting venues, while others were novice co-commentators and analysts that were primarily limited to the world of e-sports and amateur Twitch commentary.
The greatest overlap between all five was the acknowledgement that there is substantial power in being able to speak one thing into a microphone but communicate an entirely different idea with body language. All of the commentators had a strong desire to emulate the mechanics of in-person commentary in the new digital world they found themselves in. A broader spectrum of patterns that emerged from the interviews is represented by the primary persona below.
The needs and pain points of the commentators and the resulting persona, as well as the trends in commentary environment, spawned the user flow found below. In it, the three commentators on the team are all running the Kemistry app on their mobile devices and have access to three buttons:
1. URGENT - used to indicate immediate need to speak.
2. READY - used as a sign that a commentator is ready to talk whenever the current speaker finishes.
3. FINISHING - a commentator holds this when they are about to finish talking and releases as soon as they are done.
When a button is held, it causes the other devices to light up in its corresponding color and the name of the commentator pressing it to be displayed on the screen. They must perform a successful queue of the next speaker with no unintended pause and request hand-off for an urgent narrative without a verbal interruption.
DESIGNING FOR PERIPHERY
While the flow of actions within the app seemed resolved, a critical user pain point still had to be resolved: the commentators need to be able to focus on the action on their screens and cannot be devoting critical time and focus to the app while trying to keep up with the events of the match, game, or race. With their monitors taking up the center of their field of vision, their phones would most likely sit to the side of (or below) the screens, at the very edge of their field of vision. This reality made the primary use case of the Kemistry app rather unlike most digital products:
THE APP HAD TO BE USABLE WITHOUT LOOKING DIRECTLY AT IT.
To make this solution viable and usable, we had to adapt the design to the mechanics of human peripheral vision, which lies outside of the central field of vision. The human eye uses a combination of rods and cones on the retina to pick up visible light. Cones function best in well lit environments and are capable of distinguishing color, while rods excel at low light vision and do not process color. Here is the catch, however: the concentration of cones peaks in the central field of vision and drops off dramatically as soon as one enters the realm of peripheral vision.
Diagrams detailing the distribution and concentration of rods and cones at varying angles of deviation from the visual axis, courtesy of biology.stackexchange.com and researchgate.net.
Critically, cones do not completely disappear once one enters peripheral vision territory - they are simply decreased in number compared to rods. Thus, while color could still be used as an indicator of which button another member of the commentary team is pressing, a number of design considerations would have to be heeded to make the interface truly accessible to peripheral vision.
1. The buttons have to be large enough to easily press without without errors, and the interface has to be ambidextrous to enable commentators to place the phone on either side of their monitors setup. The button that is most frequently used while keeping one's eyes on the computer screen, the "FINISHING" button, would go along the bottom edge of the phone for easier findability. The commentary environment patterns uncovered during the interview process indicate that the phone would most likely be placed below or next to the monitors, leading to the visually critical parts, such as the name of the speaker pressing the button, to be located at the top, as close as possible to the central field of vision that is directed at the screen.
2. The colors used in the interface have to be bright to cater to the high-luminance strength of the cone receptors in the eye. Therefore, since the the alert colors are bright, the interface in its default state has to be dark, both to avoid distracting the commentator from their main screen, and to create a greater contrast between default state and an alert state. This also plays into the agency of the rods that dominate peripheral vision parts of the retina, which are more sensitive to changes in light rather than color. The rods catch that there is a change on the screen and cones confirm the nature of that change.
3. Since the concentration of cones in the peripheral vision territory of the retina is decreased, we need to make up for that by devoting as much real estate to color changes as possible. This means that, ideally, the entire screen will change color. In order to not lose the buttons, however, the changes towards to bottom of the screen can be a bit more subtle, with the bulk of the highlight occurring at the top.
MAKING IT REAL
With the base concept of the app settled, it was time to bring it to life. Working closely with Aditya Dantuluri, the brilliant mind I partnered with to develop the final product, we discussed the possibilities of the net code and how lobbies would actually be hosted. We settled on a system of peer-to-peer hosted lobbies that are accessed through a single alpha-numeric code to simplify the process of joining. A couple of options for secondary and tertiary use cases, such as ON-AIR/OFF-AIR indicator as well as a "critical mute request" button helped turn the Kemistry app into a full fledged broadcast support tool.
Crazy 8's sketch wireframe
Medium fidelity wireframe
High fidelity wireframe
During real usage, however, not everything is as simple as a single color. Just as commentators sometimes interrupt one another or begin to speak simultaneously on the microphone, a similar set of circumstances is likely to happen with the Kemistry app. To eliminate conflicts while keeping the information conveyed by the interface as simple as possible, a hierarchy for notifications was established.
1. Any commentator pressing CRITICAL MUTE REQUEST
2a. Any commentator pressing URGENT
2b. If two commentators press URGENT simultaneously, the higher priority commentator's name is shown (i.e. lead > analyst > third)
2c. If a commentator is holding FINISHING while another presses URGENT, their name is shown in blue while the rest of the screen is red
3a. Any commentator pressing READY
3b. If two commentators press READY simultaneously, the higher priority commentator's name is shown
3c. If a commentator is holding FINISHING while another presses READY, their name is shown in blue while the rest of the screen is yellow
4. Any commentator pressing FINISHING
The default state screen (far left) as well as the three types of alert screens in high fidelity form.
Even though the primary use case of the app does not involve the commentator looking directly at the screen, the buttons still feature a feedback loop where the button itself lights up to give the commentator the extra confidence that their request is being put through to his partners. Below is an animation where the user flow seen above is rendered in real time.
The Kemistry app is now entering the usability testing phase, as well the start of development. Once the design is refined in response to usability testing phase and built in full, Kemistry App will make its way to the Google Play store in Q1 2021 and to the Apple store in Q2 2021.