SKA Hockey Club digital ecosystem
Goal
To develop a service which provides fans with detailed and current information about the club and to follow and create new design and content presentation trends. This website has become a reflection of the emotion and show of an arena game.
Concept
With its specific goals and huge audience, the club needed a slick and functional website, so we focused on three elements :
Audience engagement
Fans are the most important part of the club. We focused on the creation of a space where fans could celebrate the last game and build excitement for the next one.
Statistics delivery
The SKA website works with KHL to integrate statistics from both the KHL and the club's editorial staff and get them to fans almost immediately. No other website matches SKA's detail when it comes to statistics.
Content delivery
The SKA editorial board is the best and most complete source of information about the club. We created a site where club editorial staff could focus on content without worrying about website management.
Design
SKA's website is modern, but at the same time clear and accessible for its large and diverse audience. We created a full-cycle project for SKA: from pre-project research (we enjoyed studying the KHL regulations the most) to prototyping and SRS. Here we'll also show you one's which have some pictures (we're presenting our project, after all).
User profiles
First, we profile those users who visit the website the most. Although it is impossible to identify all users, our analytics allow us to identify specific behavioral patterns and create user profiles for both regular and exceptional visitors.
User experience
Our other focus was on what users wanted in a website. After round-table brainstorming sessions with our client, we divided user desires into three categories: ‘must have’, ‘maybe’, and ‘unnecessary’. Our final design fully integrated the ‘must haves’, postponed the implementation of the ‘maybe’ features, and ignored the ‘unnecessary’.
Information architecture
It's brass tacks time. At this point we finalized:
1. The entities within the system and their interaction with one another
2. Website structure
3. Content blocks and their priorities.With these decisions made, we moved on to prototyping
1. The entities within the system and their interaction with one another
2. Website structure
3. Content blocks and their priorities.With these decisions made, we moved on to prototyping
Prototype. Requirements specification
In addition to design and development materials, prototype and requirements specifications are an integral part of the prototyping stage. Prototyping provides both questions and answers to questions that are not immediately apparent working with text alone.
The requirements specification comes immediately after prototyping; new ideas, problem solving, and creative insights found during prototyping are not limited by prematurely established specifications.
Design-concept
Brand colors
SKA colors (and SKA spirit!) are the foundational palette; but that was only the start of our color and graphic concept.
Emotional colors
After seeing a SKA game for the first time, we immediately incorporated colors that reflect the passions of the fans, the players, and the SKA sisters (cheerleaders).
Roboto font
was a perfect match for the Club's style . It displays statistics clearly and legibly. This font screams SPORT.
The Roboto font looks sharp, and is easily legible in both big and small sizes, minimizing the number of fonts used in the website and creating a unified, harmonious design.
Layouts and elements
We created 72 layouts for desktop devices, 28 layouts for tablets , and 36 layouts for mobile phones. Below you can see the details of several layout versions for desktop devices.
Mobile and tablet versions
We developed a website that is accessible on any device, at any place, and at any time: at home, on transit, or at the arena. A fully functional website available on all your devices!
Tablet
Phone
SKA's website is completely custom-made: every element and every pixel was sketched and perfected. To develop the best hockey club website possible, we even focused on details invisible to most users. These details and accents are the difference between a good website and a fantastic one.
Technologies and approaches
As always, in our project we used cutting-edge technologies and methodologies. We started with BEM, which allowed our designers and front-end developers to collaborate efficiently across departments and within each department.
Client
‘When we decided to develop a collaborative website that would make us stand out from other sports organizations, Func. gave us a concept that works for SKA now, and will grow as the Club grows.We ended up with a resource that was a radically new approach to the presentation of hockey.
The company's specialists and managers were always interested in and available for discussion. The collaboration between the teams at SKA and Func. was effective from the get-go. We strongly believe that our work will be welcomed by SKA fans’.
The company's specialists and managers were always interested in and available for discussion. The collaboration between the teams at SKA and Func. was effective from the get-go. We strongly believe that our work will be welcomed by SKA fans’.
Alexander Nalivayko,
PR Manager
PR Manager