top of page
Spiideo-header_bg.png
Spiideo-header_top_2.png
Spiideo-header_top_3.png

Spiideo

Building a cohesive design system for a video recording and analysis tool & platform

Client: Spiideo
Role: Lead UX Designer and Art Director
Timeframe: 2019-2020

​

Spiideo provides powerful and easy to use sports video analysis software for coaches, analysts and players. With powerful video based solutions and camera system installed in arenas, video recording is always available for training sessions as well as matches. The software then enables the user to analyze, draw on, create presentations and collect data about the team and players.


We created a Design System to tie together the main web, platform and all Spiideo tools to create visual continuity and an easy to use UX.

CHALLENGE

Spiideo is one of the world leading video analysis tools for sports. Their strength lies in being simple enough to use for both coaches and players, while still providing advanced features for the expert user.
Their set of tools is ever growing, so the need for a solid design system with reusable components was key for success.

Design system

Scaling and flexibility

COMPONENTS

The whole system is based on a set of components that the designers and developers can tile to build up their view.

Frame 119.png
A FLEXIBLE LAYOUT

The center of the tool is the video window, displaying the recorded game or training session. To be able to keep the video window above the fold and visible at all times we created a flexible tile layout that the user can costumize to their preferens.

Visual design

Look and feel

Frame 127.png
c54150029e891de4ccf875f6860d42ed.png
spiideo-mockup_1-.png
Template_2.gif
Professional
Easy to use
Frame.png
pasted-image 2.png
Mobile_Start new recording.png
Calm
Functional
c572d6e4e71e06648087d735e8bfd4c6.png
Frame 125.png
Mockup-spiideo.gif
Template_1.gif
Structure
62ca8d9b098d1e0e843a7e74777754de 1.png
Live_recording.gif
Frame 124.png
Explorative
Alive motion

Features

Advanced interactions

Timeline.gif
TIMELINE

The timeline is a central part of the video editing tool that contains a lot of advanced functionality, allowing the user to drill down into tags and zooming in different types of timelines.

TAGGING

The tag panel contains both regular one-press tags, duration tags and doubble tags. By using motion we provide the correct feedback to the user.

Tags.gif
bottom of page