top of page

EKO Platform

My Role

Product Designer

Client

Eko

Year

2021-2022

Eko is a SaaS startup company that building a platform that creates and publishes interactive, choice-driven video experiences. The platform lets users publish these experiences on brand websites, online retail stores, and any other consumer-facing medium.

 

Eko launched its MVP platform in March 2022, and I was a part of the design team that designed it. I created the editor and the spaces screens and I built smart components for the design system.

Macbook Pro - Light Background.png

Intro

The Editor

The Challenge

I was in charge of the Editor screens. The editor is the platform's main screen; The user can create all the interactive videos, and each video contains an intro and 2 (at least) features. They all have footage, sounds, and subtitles, making them full of content. Designing an interactive video editor is a challenging task. One challenge is the need to provide a user-friendly interface that allows users to easily navigate and manipulate the video content. Another challenge is the need to support a wide range of interactive features and functionality, such as the ability to add overlays, and other elements to the video. 

The Goal

The goal is to provide users with a user-friendly and intuitive interface that makes it easy to create and customize interactive video content and supports a wide range of video formats and file types providing a range of output options and optimizing the tool for performance and efficiency.

Creating new video- Happy flow

The creating a new video flow contains 3 sections of the video that the user needs to provide content to. It's repetitive so he will automatically know how to continue after filling in the first section. I tried to make it as easy and intuitive as it can for the user, using subtitles, descriptions, and a hierarchy that will make it clear to him.

Frame 1.png

The screens

Group 64.png

UI Design

I created several new components for the Eko design system. These components were designed to be consistent with the overall look and feel of the product and to provide a range of options for designers and developers to use when building screens and interfaces. I paid close attention to usability and accessibility when designing the components.

Typography
typo.png
Side bar nav
Side Bar Nav.png
Brand Colors
colors.png
Drawer Component
Frame 1.png
Preview Component
preview.png
Final Screens

While working on the platform, I designed various screens such as spaces, instances,

focus point, assets, and more.

The Editor

the editor allows users to create interactive videos by uploading and combining different types of media, such as footage, sounds, and subtitles.

focus point.png

Focus Point

This feature allows users to specify a particular point within a video as the "focus point," and to adjust the focus point either manually by clicking and dragging a cursor or automatically (by using machine learning algorithms- tracking the movement of a particular object within the video).

focus point 2.png

Spaces

"Space" is a container for a group of assets and instances, which could include documents, images, audio files, or other types of media. Spaces can be organized into different "teams" or subject areas to help users find and access the assets they need. Users can also create new spaces and invite other users to collaborate with them.

home.jpg

Instances

An "instance" is an occurrence of an interactive video that has been created using the editor. The "instances" screen would be the place where users can view and manage all of the interactive videos that have been created within a particular space. The users can see a list of all of the interactive videos that have been created, with details such as the video title, creator, and date of creation.

instances.png
collapse.png

Assets

The assets screen is the place where the user can view and manage all the media files that he has uploaded to the space. These assets can include video clips, audio tracks, images, and other types of media that he can use in his interactive videos.
To upload new assets, he can click on the "Upload" button. He can view them in a list view, and also preview the assets, rename them, and delete them.

assets.png
bottom of page