Celebrating a Summer of Sports

Four unique online games created as part of Sky Sports "Summer of Sports" brand campaign. The goal; to generate renewed excitement and interest amongst Sky's 30,000+ employees across the UK, Italy, and Germany.

Client
Sky Sports
Services
UX/UI, Graphic Design, Illustration
Project year
2021

Summary

Sky needed to promote its new exclusive sports offering to all its employees. However, previous engagement efforts did little to increase interest beyond core niche audiences already with interest in sports. With a renewed public interest in sports programming, we saw an opportunity to extend the awareness beyond existing fans and build engagement from the ground up. To achieve this, we aimed to tap into employees' natural sense of competition rather than requiring them to have a pre-existing level of knowledge or interest in sports.

Outcome

Within just the first week, we'd managed to eclipse the success of any previous Sky Sports activation with overwhelming position engagement.

X3

More interaction than any previous digital activation

120%+

Exceeded overall engagement target in first 4 days

14

Weeks, start-to-finish

No items found.
Above: Quick thumbnail sketches produced during a brainstorming session.
Above: Mock-up designs for employee activation experience. An immersive wall-to-wall digital cube visitors could interact with and experience the 'Pixel perfect resolution'.

Creative team

As the sole designer on a small team consisting of two engineers and a product manager, I was responsible for;

  • Game ideation, user flows, and lo-fi wireframes
  • In-game illustrations and artwork
  • Hi-fidelity prototypes and design handoff

Additionally, I was responsible for delivering supporting design assets and digital ads across Sky sites.

Given the tight timelines and demanding deadlines, an agile process would be a key to establishing momentum. In doing so, we'd remain mindful of each other's capabilities with reasonable expectations of what could be delivered.

No items found.
Above: User personas derived from employee interviews and onsite observations.
Above: Userflow diagram for Rolls-Royce web app.
Top: The original @work Intranet interface design.
Above: Design charette from user workshop illustrating desired product feature.
Above: Brand creative reconfigured for large-format installation at Sky's Osterley HQ.

Challenge and Process

Having a long-standing relationship with Sky meant we'd have access to measurements from previous campaigns. What was clear was that sports promotions performed poorly against other non-sports activities, with engagement mostly coming from a core set of sports enthusiasts. Client workshops would add further insight, revealing a sense of fatigue from previous attempts at gamified learning as well as a sense, from some, that sports were simply "boring".

We planned to promote four sports events, including F1, British Lions Rugby, Women's Super League, and The Hundred (cricket), with the latter two being new to Sky Sports. To ensure success and avoid the pitfalls of previous attempts at gamified learning, our goal was to make each experience unique and accessible to all. To achieve this, we established four guiding principles. Each game would:

  1. Require minimal (if any) previous knowledge of the sport
  2. Allow users to compete against their peers
  3. have a significantly different playing experience
  4. Include a level of customization to make the experience unique


With our guiding principle set, the question standing between us and our solution was...

"...how might we create exciting shared experiences amongst Sky employees, with sports as a central theme?"

No items found.
Above: Framework diagram for content page templates.
Above: Examples of desktop and mobile wireframes produced during development.
Above: (Top) User flow developed to maintain consistency framework across each game. (Bottom) Our in-house Sky Sports design system
Above: User flow diagram detailing the content requirements for the overall application. Below: Task flow based on an activity requirement for a user persona.
Above: Examples of early creative routes pitched to the client.
Above: Sky HQ entranceway dressed and experiential pop-ups installed, ready for launch day.

Unifying our approach

We knew that time would be a significant factor in delivering each game. To manage this, we took a strategic approach to development by creating a basic framework for each of our userflows. This template provided both design and engineering teams with agreed-upon steps and constraints to streamline the development process and move quickly to testing.

In addition to this, we focused on rapid prototyping and iteration. We moved quickly from sign-off on lo-fi wireframes to hi-fi mockups using our in-house design system. This allowed us to iterate effectively with our clients and brand partners for each game and ensure that we were meeting their expectations.

No items found.
Above: Prior to launch large crowds gathered in front of our countdown timer (left), teaser graphic on reception tower digital screens (right).
Top: Wireframes using the page framework to test its flexibility for multiple use cases.
Bottom: Comparison between the existing project page template and the new design using our page framework.
Above: (Top) Game screens for Formula 1® interface. (Bottom) Track illustrations for each European Grand Prix.
Above: Early set of creative ideas using messaging discovered during my research.
Above: The services page served as the homepage. Users could browse service options and sort by engine types, before selecting to learn more.

Need for Speed

After overcoming early gameplay testing issues, our Formula 1® experience tested well with our client test group. So much so that late on we received the opportunity to collaborate with the full on-air broadcast team to add video and commentary as part of the experience.

Racing to include an on-air broadcast element, we successfully delivered a single-trigger race experience with employees competing across three international Grand Prix (one for each Sky territory). Through testing, we developed a matching system that kept the game competitive by establishing an average performance and matching users with similar-performing opponents. The more users played, the smarter the match opponents became, ensuring a challenging and engaging experience for all skill levels.

No items found.
Above: Two employees pose for a photo opportunity inside the 'Pixel Perfect' cube installation (left), employees enter the launch experience through the digital doors (right)
Above: Selection of user interface and game screens for The Hundred.
Above: Draft iterations for a homepage developed in consultation with the client.
Top: Example of how Hi-Vis green text directed messaging inward, and how participation could help reduce workloads.
Bottom: Digital assets for screensavers and billboards across the Met Police estates.
Above: Set of poster designs for the initial campaign launch.

It's a Hit!

'The Hundred' looked to modernize cricket for a younger market. A new short-form, action-packed game accompanied by live music and entertainment, it shares more similarities to a music festival than traditional cricket. Our 'The Hundred' experience sort to match that energy while utilizing brand components that make 'The Hundred' unique.

Placing players at bat, users competed against their colleagues in a 'Fruit Ninja' style setting, using the swipe motion to interact with all the elements that make new competition unique (without having to tell them). Players would face-off against LPs, exploding watermelons, and splattering ice creams, all whilst attempting to hit one hundred balls. What in the moment could feel like chaos, captured the fast-paced and spontaneous excitement of 'The Hundred'. We even included a rubber duck easter egg for cricket fans to reset their score to zero, ensuring no one felt left out!

No items found.
Above: Interface designs taken from the mobile version of the innovation center.
Above: Sky's Intranet digital takeover including home-screen (right) and Infographic (left and top-right).
Above: Character illustration and cut scenes designed for the Lions Tour game.
Top: Final desktop homepage, (below) comparison between old and new site.
Bottom: Onboarding pop-up overlay introducing users to new features available on @work.

Nice try

For our Rugby Lions Tour, we put our players at the heart of the action. Users were tasked with scoring the all-important final points to secure a series win for their team. To add depth to the game's story, we incorporated simple yet effective animated scenes to bookend the playable elements.

The game's simplicity is what made it so engaging. Players only needed to swing a guide from left to right to aim their kick. Then, once they made their selection, the game would cut to the next scene to reveal the outcome of their kick. By keeping the interaction simple, players could fully immerse themselves in the game's world and enjoy the thrill of making the final kick to win it all.


Wide of the mark

Designed to introduce star names to a new audience, "Super Squads," a fantasy-sports style game for the Women's Super League (WSL), tasked players with building their own team over the first month of the new season. Unfortunately, executing this concept was more complex than first envisioned. These games rely heavily on player data, and for the WSL - as we'd soon discover, there was little. Additionally, the top teams tend to dominate, thus creating no value for users to interact with lesser-performing teams.

In an attempt to overcome these issues and still provide a rewarding experience, through testing and game simulations, we sort we to narrow our pool of player profiles to a fraction of the league's athletes. Our theory; by reducing player options, we'd increase the chances of producing high-performing teams with enough variance to keep the games compelling.

This, however, would be one of many issues; last-minute complications with API integration caused reliability issues meaning data needed to be manually populated. This unforeseen issue caused significant stress to an already stretched resource.

Above: Evolution of the original @work logo to a newer refined version.
No items found.
Above: CMS interface for authors, editors, and innovation managers to review and collate data.
Above: (top) Super Squads game interface. (Below) Email signatures with designs inspired by retro uniforms for each WSL club.
Above: Hi-definition wire flow for administration function to monitor and extract user content.
Above: Process flow for generating employee specific content for future campaign messaging.
Above: Giveaway items to promote the relaunch of @work.

Reflection

Changing direction mid-course can be a real challenge when working with a tight schedule. But in our case, those constraints were a blessing in disguise. We had to think fast and act boldly; our games - The Hundred, Rugby, and Formula 1® - landed incredibly well. Our Formula 1® game a particular success, with over 34 thousand games played and an average of ten races per player - more than three times the previous record!


Of course, not every project can be a winner. Short timelines can make it difficult to iterate and refine work. This was painfully apparent with our WSL concept. Despite our best efforts, we struggled to deliver the engaging user experience we had envisioned. We made some adjustments along the way, but in the end, we had to make some compromises and accept a less-than-perfect solution.

That's just the nature of design - it's always challenging, and sometimes you fall short. The important thing is to keep pushing forward and striving to create truly engaging experiences and, above all, fun.