UX/UI
InStat
About the product
InSports TV — an OTT (Over-The-Top) platform with live-streaming sporting events, as well as convenient playlists of highlights, goals, or specific players.
After purchasing a subscription, users can watch broadcasts and interact with leagues, teams, players, etc.
About the client
A US-based company called InSports (formerly Instat) — developers of a platform for live sports broadcasts and their recordings.
They already had a working product in the form of a web application, two mobile applications, and an application for Android TV. They decided to contact us to make an application for the operating system of Samsung TVs — Tizen TV.
What we had to do What we had to do What we had to do
What we had to do What we had to do What we had to do
Backend
integration
Since the client already had a pre-existing ecosystem of apps on different platforms, we didn't have to develop the backend from scratch. All we had to do in terms of the backend was learn how everything works and integrate it into the new Tizen app.
Frontend development
- Home page, with a list of broadcasts that users can filter by the date
- Team page, with a list of their matches
- Player page, with matches they played in
- Favorite teams and players
Special features
Player search
Users can search for their favorite players and see all of the matches they played in.
Preferences
Users can customize their preferences by selecting which sports they are interested in. They can also choose which leagues and championships they want to follow.
Special features
Playback options
The main feature of the application is the ability to choose which part of the broadcast the user wants to watch.
This feature saves users' time, making their favorite sports even more accessible. After all, instead of watching a 2-hour broadcast, you just need to press one button, and in 5 minutes, you can see all of the interesting parts of the match.
We needed to turn a list of time segments with interesting moments in the form of (00:15:13-00:16:22), into a short video with chapters. Also, we had to make it easy to use on a TV set, where it is controlled by a remote control.
UI/UX design
The customer already had a finished design project of an application for Tizen for Tizen — which saved a lot of time and money. Nevertheless, some screens were missing, so our designers still added a couple of screens.
We worked in tandem with the client's designer. Despite the fact that we were in different time zones, we worked quickly and well-coordinated.
Tech stack
A mini-dive into technology. We promise it won't be difficult
SmartTV applications (Samsung Tizen, LG WebOS, Hisense Vidaa) work like a web application on your TV.
React.js
React.js
We use the React framework to develop web applications.
Smart TV
Smart TV
Which is enough to implement all the features of Instat.
The difference between
a regular
web app and a
TV app
that on the TV,
navigation
is done with
a remote control.
The user cannot
freely click
on any part of the screen,
as with a mouse
or finger, but has to move
from one
element
to
the next,
one by one.
Navigation needs to be
clear and predictable
to make it easy
to navigate within the app.
To achieve this,
we arranged
all content on a
rectangular grid.
Custom keyboard
Also, the client wanted the app to have a custom keyboard rather than the standard Samsung one. This would make the interface more uniform, and the opening of the keyboard wouldn't blind users in the dark.
We had to make our own keyboard while disabling the use of the native layout.
At the same time,
the application
supports
multiple
languages
Which means each layout would have a different number of characters. That's why we made our own keyboard layout for each keyboard, so that the app would remain accessible to users from different countries.
Quality assurance
We made an application for Samsung TVs. Their distinctive feature is a special UI/UX that is unlike any other. It's always important for us to test applications so that everything works perfectly and without bugs. That's why we bought a Samsung TV, as we only had an LG in our office. Thanks to this, we worked through all possible scenarios, and the app works flawlessly on all Samsung TVs.
What's next? What's next? What's next? What's next? What's next? What's next? What's next?
What's next? What's next? What's next? What's next? What's next? What's next? What's next?
The app is ready!
We have handed it
over to the client,
and it's about to be
released.
Would you like to schedule an online meeting?
Sorry, something went wrong with your request.
Please, try again later.