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.
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.
The screens
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
Side bar nav
Brand Colors
Drawer Component
Preview Component
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
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).
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.
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.
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.
