Equidia
2018

I was part of a team involved in the rebranding and visual refresh of Equidia's live TV and multimedia environment, which was more than 10 years old at the time. The new visual environment and rebranding were launched in 2018 and improved upon in 2019.

Equidia is a French TV broadcaster specializing in horse racing, equestrian sports and the horse world. With 70 reporters on the field covering 10 hours of live races every day throughout the year, it is effectively the biggest sports broadcaster in Europe. Along with the rebranding and a refresh of the line of TV programs, Equidia also introduced web and mobile products to give a new generation of viewers more control over what they see and the information they receive.

My participation revolved around the design of visual elements spanning across the whole network, the creation of graphical elements around the sports talk shows, and the design & hierarchisation of real-time data including motion graphics direction. Good legibility & readability of information were paramount to allow quick comprehension and analysis while having a consistent visual identity across the board. It was my first time working on graphics for television and certainly interesting to learn from (albeit mostly about the constraints vis-a-vis live broadcasting). It was also an opportunity to apply concepts that I had learned from designing for other types of media.

Work

Live TV Environment
Brand Materials
Web & Mobile Materials

Responsibilities

Graphic Design
Iconography
Visual Design

Collaborators

Laurent Estrany
Jérémie Lemarbre
Yann Defaÿ
Robert Laplante
42 DLP

Some Context

France has a major horse racing industry. It is home to the famous Prix de l’Arc de Triomphe held at Longchamp Racecourse, the richest race in Europe and the second richest turf race in the world after the Japan Cup, with a prize of 4 million Euros. Equidia is the first French and European thematic channel dedicated to the world of the horse, delivering horse racing broadcasts, TV news, reports, portraits, magazines devoted to different sports, equestrian shows, documentaries, etc. The content is delivered in France and its overseas territories, as well as Belgium, Switzerland and Monaco. From the people watching at home to others in sports cafes or at the racetracks—and with the web and new mobile offerings—Equidia can be accessed from pretty much anywhere.

Simplifying the Core while Digesting Complexity

Across most of Equidia’s broadcasts, the main onscreen element is the ubiquitous betting odds table, which is found at the bottom of the TV screen and also on the newly offered mobile offerings. It is a detailed table for serious betters and horse racing amateurs alike, presenting the constantly changing betting odds of all riders for the upcoming race up until 3 minutes before it kicks off.

Being one of the most important elements that people rely on makes the betting odds table one of the hardest points to tackle. So we strategically chose to start designing from there and build everything else around it. Despite surveys that confirmed most people wanting it to change, we knew that this table would also be the first object of serious criticism if it was in any way less efficient than what regular viewers are used to.

It needed to be familiar to existing users but also easier to understand for newcomers, for whom the old table was quite hard to grasp. Traditionally, the first row shows the morning odds of each racer while the 3rd row shows the most up-to-date ones. There is a news feed at the bottom and information about betting pools on the right.

New version of the bandeau des cotes
New Design
Old version of the bandeau des cotes
Old Version

The Constraints

  • Layout & structure familiarity

    The order and direction the information is read by experienced users cannot be changed too much in the betting odds table. This is to avoid alienating current users with any new structure unless it would bring noteworthy advantages.

  • Size limitations

    Ideally, it would use the same screen real estate as before. Meaning it would respect the same safety margins from the edges of the screen and be the same height as the old one. This is mainly because all the footage and camera work already have those zones considered as negative space when framing the shots.

  • Information delivery

    We had to re-think the importance of each piece of information delivered while being aware that any change would either impact already existing processes or introduce new ones that could come with their own set of redactional and technical limitations.

  • Technical limitations

    Text rendering for television is not as straightforward or flexible as on web and mobile. For instance, it is not as easy to insert special elements in the middle of a line of text and even the sizing of dynamic lines of text becomes problematic when all sections have a fixed size. That’s why stretching and squeezing is not uncommon on TV, but we wanted to avoid that as much as possible.

    Being broadcast on all kinds of screens, from low-resolution TVs with limited colours to high fidelity 4K displays, we had to constantly remember to test on those and not only on our computer screens. The bigger considerations are the over-sharpening on most televisions’ default settings and the lack of dynamic range leading to loss of contrast in more subtle colour differences.

Our Solution

  • Utilize negative space

    We added more breathing space to create visual separations and improve legibility. This is achieved by widening each cell while also using a typeface that is visually less dense.

  • Improve type legibility

    For the rotating numbers, we chose Averta by Kostas Bartsokas that worked well with the overall branding and had digits that provided more contrast in shape compared to condensed fonts, especially noticeable with the numbers 3, 5, 6, 8 and 9 when small or blurry as illustrated below:
    legibility comparison

  • Use contrast to define a clearer hierarchy

    In the old betting odds table, contrast is used to separate each cell/number. Instead, we used negative space to separate them and use contrast to define the hierarchy of information.

  • Eliminate nonessential clutter

    We removed all visual clutter caused by the grey cell separations and unnecessary gradients. Using negative space to emphasize the separations with lighter grey alternating cells made the table easier to scan.

  • Solutions for extreme cases

    For every section, we used available data to test edge cases and define the corresponding area’s most appropriate size. The more complex edge cases with less frequency have their own alternative display types.

  • Use simple motion to present data

    Notable changes in the odds table are visually emphasized with controlled blinking and motion cues without being excessive. We also had to present new information pertaining to the upcoming race and chose to do it on the first line since the morning odds are not always needed and do not change. The line occasionally swipes out to reveal these different states and information.

New version of the bandeau des cotes
New version of the bandeau des cotes

Additionally, we had variations of the lower third of the screen to show different tables as well as extra announcements that could show up with each variation. They are designed to work in harmony and follow the same visual cues—the examples above show one of these events in a full-sized state and a small-sized accompaniment to the betting odds table. This particular case being an inquiry on one of the horses announced right after a race’s provisional standings.

During a race, the betting odds table, as well as all other graphical elements, are wiped away from the screen to keep distractions off the race, except the information pertinent to the actual race. The example below shows the graphical cues and animation applied—with only the race number, the course and the 3 leading racers on screen:

New version of the bandeau des cotes
New version of the bandeau des cotes

Motion Dynamics

Early on, we knew that to have a consistent feel throughout the visuals and information delivery, we would need to make a reference guide for the motion dynamics. Since future derivatives would be based on it, we didn’t want something too rigid—it would rather be a reference to get the feel that we wanted rather than a list of specific guidelines to follow precisely. We came up with a short video showing basic motion applied to simple shapes—the motion is based on horse physical movements, spurts, accelerations and rhythms. This guide could then be interpreted and applied to elements throughout the network.

Custom Iconography

Iconography can be an inherent part of a company’s visual identity and should go hand-in-hand with the brand’s logo and typography. For this project, I made various series of icons under different categories following cues from the logo designed by Dragon Rouge as well as subtleties of the typefaces that are used. All the icons I made had to work perfectly in small size, on low-resolution displays, and also in some cases in larger formats.

New version of the bandeau des cotes
New version of the bandeau des cotes

The most important set of icons was for the race disciplines. They are divided into two main families; The Trot is a controlled and slower type of racing, similar to racewalking, and within this category, there are Trot and Harnessed Trot. The Gallop family is a faster type and consists of Gallop and Obstacles races.

The most prominent differentiator between the two families is the speed of the horses, and I used this distinction to my advantage. For the Trot family, the legs are more evenly distributed under the horse and occupy the negative space. Whereas for the Gallop family, the legs are fully stretched and spread far apart. That way, even in small sizes or when viewed from afar, the distinction is still clear—denser shapes for the more controlled Trot family and elongated shape to show the Gallop family’s speed. Then within each family, I added details to differentiate the categories; driver on a sulky for the Harnessed Trot, and obstacle and jump for the Obstacles race.

New version of the bandeau des cotes
New version of the bandeau des cotes
New version of the bandeau des cotes
Wellframe app chronology

Equidia is not only a TV channel but also an over-the-top (OTT) provider. This makes available the totality of local and international races as well as a specialized channel, Equidia Pro, to more than 50 countries. The graphical environment is trickled down into a coherent amalgam of screens for these personalized TV channels, websites and mobile offerings.

Equidia also has several new talk shows where guests and experts are invited to discuss races analysis, results, prognostics and anything related to the horse world. We worked on a large number of screens with animations to present the information in a clear and interesting way.

New version of the bandeau des cotes
 
New version of the bandeau des cotes
New version of the bandeau des cotes
 
New version of the bandeau des cotes
New version of the bandeau des cotes
New version of the bandeau des cotes
 
New version of the bandeau des cotes
New version of the bandeau des cotes
 
New version of the bandeau des cotes
New version of the bandeau des cotes
New version of the bandeau des cotes
New version of the bandeau des cotes


Branding & Product Design

Guiker wide2

Guiker

Finding and renting a new apartment as an international student can be daunting. Guiker makes it easier for renters to go through this process by connecting them with landlords and facilitating logistical & communicative interaction.

Coming soon...


Branding & Packaging

Unover

unOver

Branding and packaging design for a revolutionary hangover remedy that dramatically reduces the effects of casual heavy drinking.


Web Design

Canibal

Play it Green. Canibal

Canibal is a consumer-facing machine that can recognize, sort and compress different types of beverage wastes including bottles, cans and cups.


Product Design & Development

Shouldiexchangenow

Should I Exchange Now

I built this handy tool for remote workers, currency watchers and travellers, that helps save or make money when converting foreign currency. It reveals the amount gained or lost over time and gives recommendations on whether to exchange right away or wait longer for a better rate.

shouldiexchangenow.com

Read more


3D Illustration

Nytmag donald trump

The New York Times Magazine

3D renders for illustrations by Alvaro Dominguez in the NYT Mag article “Can the G.O.P. Senate Majority Survive Donald Trump?”

See More · Back to Top