SportGate
Organize your
own sports game
in one click

Industry

Sport, Fitness
Recreation

Client

SportGate

Platform

AppStore
MVP

Direction

UX / UI

Tools

Sketch, After Effects, Photoshop

Tools

Sketch
After Effects
Photoshop

Our client’s idea was to provide active leisure lovers with a way to find and book a venue to play their favourite sport. We took this and designed a mobile app that allows you to do so quickly and easily 

Target
Audience.

We began by creating pen portraits of several sports enthusiasts. These gals and pals with cheerful spirits like being social, physical and a bit kidult‑ish, especially after a week of sitting at a desk from nine to five.

All genders 25+ $$$$$

User Flow.

Now, when we investigated user's feelings and multiple layers of their decision-making process, we were able to compile more formal rules. The user flow you see formed the basis of the whole product.

Mobile User
Experience Design

It took us a few days to design the most important screens and connect them to one another in a clickable prototype.

The UX Framework

SportGate's core feature is its extensive search capabilities.
We made them hidden only one click away from the main
catalogue page. SuperSearch allows users to find a sports venue
by specifying multiple filtering options and parameters. Also,
we didn’t forget about users who prefer searching by map.

The main UX/UI challenge was to deliver the most accurate search results in a legible and organized manner to help users identify the result they are looking for 

Time to add a splash of colour
and set in motion a brand's
visual identity.

Watch the video

Onboarding

Onboarding

Main Screen

Card-based design layout is always an option when it comes to balancing UI aesthetics with ease of use. The main navigation menu shrinks when scrolling and saves up screen space. It's also a stylistic choice: animations make it more dynamic, and sports are all about being on the move.

Football

68 fields

Basketball

22 fields

Tennis

35 fields

Volleyball

68 fields

Hockey

12 fields

Rugby

24 fields

SuperSearch.

Multiple filtering and sorting options are one tap away from the main page so those with a specific query can get their search results right away.

We used the same visual identifier for location-based search and results. Multi-purpose sports venues are hidden behind an icon with an “S” 

5
20
9

The section contains all the information a user needs to make a fully-informed decision whether to pick or not to pick this particular sports venue. To help make a quick choice, each sports venue is labelled with various tags that describe it the best.

Basketball

Football

Rugby

Hockey

Tennis

Volleyball

For everything

Picked the place?
Now choose a date and time!

Reserve a time slot.

While designing the time slot booking system, we relied on the power of familiar UX-patterns so that a user can navigate through the interface without thinking.

Stay on a budget.

Booking price can vary depending on the time slot. A user can see the time slot price right away and also choose another date and time if the price is too high.

Booking confirmation.

Inspired by retro sports game tickets, but given a digital era touch with an add to Apple wallet feature.

Add to Apple Wallet

Admin panel. Our goal was to make the admin panel both visually appealing and functionally effective. We transferred the same UI approach to designing it. As for the UX, there is a significant difference since the admin panel is meant for a sports venue manager  

Main dashboard.
A digital control room designed to help a sports venue manager to be quick, proactive, and efficient.

All in one place.

Stores all the bookings. The ones made by users of the app appear on the booking list automatically. All other reservations can be added manually.

Easily managed.

Provides all essential information at a glance and gives access to the main management features in just a few clicks.

Venue card management panel.

We kept the form limited to one-step and as straightforward and easy to fill in as possible. Multiple form fields are split into categories for easy viewing by mobile app users.

Price management panel

A sports venue manager can easily set different prices for different time slots manually or by setting a specific pricing rule for common scenarios.

To help sports venue managers get their job done quickly, we kept the interface simple, yet engageable by emphasizing and highlighting the most important information in colour.


We believe that digging deeper
into the needs of clients and users
makes a great product
hi@eleveneleven.company