Stavka by Flatstudio | Social network for sports betting.

— Client

The platform offers a unique learning experience where users can improve their betting skills, make predictions using Stavka's currency and compete in monthly contests with a chance to win real money.

Visit website

Release: November 7, 2022

— Task

As the product became more complex and the number of users increased, the challenge was to update the design and ensure it met new needs.

— Our role

Research, Branding, Strategy, UI/UX, Art direction, Promo, Motion

Overview

When doing research, we don't just rely on our design instincts, we do our homework too! We had access to an in-depth analysis of website analytics and metrics, user feedback, and hypothesis testing results to inform our design approach. Armed with this information, we developed a design that perfectly met the project goals.

Useful information

Make creating content a breeze, by providing more info and tips for users.
Open communication

Put the spotlight on other users and their content to encourage engagement.
Navigation

Hit a home run with navigation by making it easy to use despite containing more levels.

Focus areas

Our team rose to the challenge, crafting a design that was flexible, scalable, and visually stunning while keeping the user experience at the forefront of our approach.

Design system

Good design system is like a well-executed game plan: it's all about the grid, the layout, and the typography. So we tackled the challenge of creating a design that not only looked great and worked perfectly at all sizes, but also was easy for a single dev team to build and maintain, therefore allowing for fast updates such as banners and new features.

01 — grid system

02 ― Colors formation
03 ― Typography

Strarting page

It sets the tone and acts as a show window for main features. It engages users from the first glance with varied content blocks showcasing top Events, news, predictions, and highlights, aiming to make their eyes light up like a touchdown.

01 ― Layout optimization
02 ― Trusted Sportsbooks

03 — Guest view

User feed page

Our goal was not to just design it, but to create an experience that knocks it out of the park! It’s a hub for all actions, including creating new forecasts, placing bets, and staying up-to-date with subscription and contest news.

Functional events pages

We know users want to take their time and really get to know their games, so the layout ensures that a user can conveniently check the status of any match they’re interested in.

Cut the fluff for mobile view.

We focus on the essentials - checking predictions and making them. So we avoid redundancy and users feeling like they were stuck in a game of Tetris.

01 — Mobile structure

Calendar and filters

Quickly find and sort the information you need. Looking for a right match can be a real game of hide and seek, but not with filters and a calendar view we’ve made. It ensures that a user won't be looking for Events that haven't even hatched yet.

02 — events calendar

Extended card event view

When looking at a chosen sport matchup feed, a user can enjoy the convenience of having the top games and leagues highlighted on eye-catching cards. One can swipe through them like a pro on mobile, and never miss a beat on the latest and greatest Events in their favourite sports.

03 — sport category

More sport pages

Provide users with a quick and easy way to find the sports events they are interested.

04 — other Events

No Events found

When McGregor had too much whiskey and Habib is not in the mood for hugging fighters, there might be a case of no fights found. No worries, the filters are right there – just switch to a better sport.

05 — empty states

Open match

It is like a box of chocolates - exciting and full of surprises! But no matter how much information there is, we've organized it all neatly into variable content and easy-to-navigate tabs.

Great for mobile usage

Our users can create predictions even on-the-go. The event page on mobile offers all the features and information as the web version, so the forecast-making flow is a piece of cake.

01 — Mobile offers

Prematch statistic and predictions

A user can explore all the tabs like a pro athlete exploring a new gym: get a good workout on the numbers, flex their predictioning muscles and engage in friendly banter with fellow sports enthusiasts.

02 — Prematch statistic

03 — my prediction

Live match

Looking at the statistics tab for a live match is like having a personal sports analyst. A user gets the game details in the quick-to-digest form, and can use the remaining time to make predictions for the upcoming matches.

04 — LIve statistic

05 — LIve Comments

Finished event

The overview tab is like a sports museum – a user can look back at previous games and scores, see how the predictions played out, and make conclusions for the next ones.

06 — past event

Personalized covers for all sports events

The overview tab is like a sports museum – a user can look back at previous games and scores, see how the predictions played out, and make conclusions for the next ones.

07 — covers

Predictions page

This is where the magic happens – users can see other users' opinions on outcomes and make up their own. And we had a rather ambitious task – creating the most convenient and user-friendly filters tailored for a very specific behaviour.

01 — mobile discussion

Prediction scroll

We wanted users to scroll like a boss, so the design allows them to quickly navigate the vast amount of data.

02 — fixed tabs

Prediction modal

We’ve designed the forecast creation flow that meets both technical and user requirements - no distractions, no fuss, just easy fun.

03 — creating a prediction

Prediction status

The interface motivates users to write well articulated forecasts. This is important business-wise and done with gentle nudges, not a harsh referee.

04 — prediction status

05 — mobile prediction

Open prediction

For the new and improved prediction page, we aimed for a visually appealing and easily readable view for all content sizes, as well as great SEO performance. Integrated blocks from other sections were used to encourage further exploration.

My profile

Essential information, statistics, and an overview of user activity is showcased here. It features a range of useful tools and content, allowing users to monitor their progress and track their performance over time.

01 — mobile profile

Profile prediction tab

Here, like in a time machine, the history of a user's forecasts can be found, from their first steps to their greatest achievements.

0 2 — prediction status

Statistics tab

We've made a versatile view with graphs, tables, filters, and levels that cater to every player's needs, whether they're a risk-taker or a cautious bettor, a pro or a novice.

03 — Statistics tabs

04 — Mobile Statistics tabs

Power of Graphs

Provide users with a quick and easy way to find the sports events they are interested in.

05 — statistic graphs

Other profile tabs

The designs are tailored to meet different users' needs and activity on the site, and some tabs even change their view to be more personalised.

06 — other tabs

Settings page

The treasure trove of personalization! It empowers users to tailor their experience and make the website feel more like their own. The "profile" tab allows users to customise their personal page to create a unique and eye-catching profile, much like in a social media.

Personalized covers

Each featuring a unique design and color palette to provide a visually engaging experience for users.

01 — Topic selection

02 — Security

03 — Sportsbook

04 — mobile usage

Contests page

See upcoming and finished contests in an easy-to-navigate block view, each with their own uniquely designed cover by our team. It provides detailed information about each contest so a user will never miss a beat!

01 — Mobile structure

Contest calendar

Is a sports fan's dream planner: it neatly organizes all the upcoming contests by date and time, enhancing their strategic participation. It's a great way to see which contests are coming up and get hyped for the action ahead.

02 — calendar

03 ― Mobile contests
04 ― scrolled contests

Upcoming contest page

05 — competition

06 — mobile competition

Open contest

While the contest is live, users can monitor their position, competitors, and coveted prizes. A user can easily see who they're up against, where they stand, and what's up for grabs in the prize pool.

07 — competitors

08 — competitive predictions

Other pages

Our team took great care in designing every page of the website and make it look flawless. So if a user is looking for some reading material to spice up their betting.