USER EXPERIENCE
VIDEO APP HEIRARCHY
Company:
Lightricks
Product:
Videoleap mobile video editor
Year:
2017
My Roles:
Interaction Design, Information Architecture,
Wireframing, Prototyping
Prototype to illustrate concept for navigation and structure for Video editing mobile app (made with Principle)
The Challenge:
​
Providing an app structure that will be able to support a large and constantly expanding number of tools and features and place them in a way that would be easy to use and navigate. A layout that would prevent confusion and that would allow efficient use of small form factor real-estate while allowing complex tasks to be done.
Target Audience:
​
The aim was to put impressive easy to use tools in the hands of everyday users, but also to support more experienced users that are already versed in professional video editing software and have higher expectations of such an app.
This draft attempted to focus on advanced users, while simplifying the UI as much as possible so that a wider audience could enjoy it.
Process:
​
A general list of planned features for the app was compiled from competitive assessments and usage of existing company technologies. The features were broken down into groups and types by behavior and expected frequency of use. In addition, scenarios and user stories were created.
This helped establish what should be easier to access, which features apply to a single clip or the whole project, and patterns began to emerge that were refined into the information architecture.
In parallel to working on this design, i began approaching and interviewing people who use video editors on mobile devices and in general, in order to get a better understanding of needs and pain points.
Some Thoughts Behind This Prototype:
​
-
The most accessible space, closest to the user is contextual. It features the main actions needed in every state of editing. When no element is selected - it allows adding objects, playback, and universal editing features (that affect the entire video).
-
When an object is selected - Cutting the footage, toggling animation, playback.
-
Video and audio editing are treated as two separate modes. In order to conserve space they can be viewed together, but only one of them can be edited at a time.
-
Dragging a clip reveals management options such as deletion.
Why Only Wireframes?
​
​This was a concept that was not pursued, however, i believe it shows a good, thought-out work process, and emphasis on a scalable & flexible interface that provides solid infrastructure for future development.