Brand Differentiation through Visual Identity

Visual identity is all the parts of the brand that you see. It’s purpose is:

  • To create an initial positive impression on viewers.

  • To unify the many different aspects of a business through consistent visuals.

  • To inform viewers about the nature of the brand and services/products offered.

  • To inspire confidence in the brand.

Where we have come from

In the past our challenge was to sell the idea of sports betting online. Canadians needed to be assured by a brand they could trust. We projected this trust and steadiness.

We have used real players, heavily disguised by photo styling. This has worked to convey sports and a mature brand. Not big on energy, excitement or distinction.

Who we are competing with

What the competition are doing

We noticed three strong trends, one of which we had been following ourselves.

Trend 1: The moody sports photo

Trend 2: The famous person with a phone

Trend 3: The BIG phone

What we want to do now

Other brands are spending a lot of money trying to ‘out sports bro’ one another. Moody, darkened sports images and celebrities pointing at phones are everywhere. We have chosen not to do the same. We will disrupt this norm.

Sports betting is quickly becoming a mainstream activity for Canadians. There is less need to sell the idea of sports betting. What we are projecting now is our way of sports betting, our personality…

That personality is bright, energetic and fun.

Creative Brief

Create a distinctive, refreshing graphic design style that stands out from the crowd.

Restrictions and Challenges:

  • No real player images.

  • No team or league logos

  • Do not try to pass stock images as real players

  • Legal lines for ads must be included.

  • Look like a sports product but stand out from other sportsbooks.

  • Present a consistent, confident presentation of the brand but beware that repetition can get boring.

  • Sometimes our banners are tiny.


Building on the brand

Sports Interaction Colours

Brand Orange #F58720

Brand Navy #07153D

Brand Dark Navy #030728

Standing out – Introducing Sports Interaction ‘Brights’

Brights offer us the freedom to inject life and distinction into the core brand palette without changing it fundamentally.

And brights with texture

The geometric texture connects the new style with the old. It is a distinctive Sports Interaction motif.

The S motif

  • The S comes from our Sports Interaction Logo. Now we can use a layered version of it as a background element.

  • The lines come from playing surfaces.

  • The layers of colour and lines imply movement.

  • There is potential to build in interesting CSS animations.

Typographic treatment

  • The background implies a sporty, moving feel.

  • The font is ‘Montserrat’. It is strong, simple and works great at different weights.

  • A/B testing showed us that highlighting the amount of the bonus rather than the percentage worked best.

Typographic treatment in action

Images - The Challenge

Images present the greatest challenge for us. We want to present the business of sports betting, demonstrating the differences between sports but cannot use the likeness of well known players. The challenge is to stand out from the competition by doing something that only we do.

Illustration Style

We created a unique illustration style. It’s based on real world action photos but the level of abstraction allows us to get more expressive with colour and movement.

We will focus on the face, if possible, to show emotion and human connection. The designer can change out facial features for more expressions.

The images are created in parts that can be switched out to make different poses and apply different colours. These parts are saved as vectors to be used at various scales for different applications.

For a stronger effect, we keep the illustration large in relation to the background the bigger, the better.

The pose of the sport image should illustrate energy and movement.

Enhancements

When we want to add extra energy we can use ‘middle-ground’ enhancements – confetti, fireworks, dust paint splashes.

Bringing it all together

Standard execution.

Special execution.

Composition – These rules will make it work

Composition – Responsive

When we can use real faces

In this case we use a semi-illustrated style. It connects these pieces with the illustration style while showing a real version of faces.

How it looks in the world

How it would look on merchandise

How it looks on banner ads

How it moves

How it looks on social media

Variations - Where we’re presenting more than one offer

The basic style will work for sports acquisition. We can use variations of it for retention, win-back and casino.

These visuals are created by deconstructing the 'core logomark', so that the colour blocks and geometric outlines are now more active elements in the composition.

Variations - Examples

Variations - How they work together

Using variations all connected to the core style means that different offers can co-habit harmoniously.

Variations - Teams

We can illustrate teams using blocks of team colours

Product – The Challenge

As a brand we make a promise using our advertising. In the product, we want to deliver on that promise. We will provide a visually connected experience from banner to betting.

How we create a connected experience

Bring in the core graphic design style to the product – start with the background. The product has special features that we want to highlight. We can do this by creating a branch of our visual ID that fits within our core style but that has its own personality within that.

Product – Enhancing Product Features

The design style can be carried through to the product features to deliver on our promise of fun and excitement.

Feature logos in the style

When we want to create a sub-identity for features of our product, we can add to the family of feature logos. These are connected by certain style features but have a personality of their own.

Product – Site background for desktop

Product – Special navigation

When we have big events, we create a special navigation component to easily get around them. Our design style allows us to create a sub-identity for each of these.

Previous
Previous

Switching to Figma & Building a Design System

Next
Next

Logos & Branding examples