Designing a Video Trimmer
Allego is a mobile and web platform for internal sales training where learning happens remotely via shared videos. Video is how most content is created and is central to the application. Due to user feedback, the product team decided to add a tool for trimming a recorded video. I conducted preliminary research on relevant UI patterns, designed a solution for Allego’s interface, and presented my decisions to the engineering team.
The document that I wrote contains an articulation of project goals and guidelines, information on Allego’s current product and competing products, and theoretical approaches to implementation based on those findings.
Since the trimming interface would be installed within larger architecture, careful attention had to be paid to the effects of the its placement. The location of the feature in the user journey was considered along with existing design paradigms from editing modes that already exist in Allego. Other guiding information came from video trimmers made by competitors and related companies. It was important to break down why each company made certain design decisions so that I could compare their goals with Allego’s and strategize accordingly.
The user-facing implications of multiple wireframe compositions were examined before choosing a solution. The final composition places the entrance to the trimming mode in a group of options that the user would expect to contain any sort of video editor if there was one. Once inside the editor, emphasis is placed on the trimming apparatus with predictably located “cancel” and “save” buttons.
The entrance to the feature was placed in the “Advanced” menu of Allego’s post-record screen. I changed the name of this menu to “Edit” to better indicate the types of options that are included in the group. I also changed its icon from an ellipses to a pencil.
When the video trimmer is selected, footage is scaled down within black bars to make it obvious to the user that they are in a different mode now. Elements like the play button and timestamps are kept in the same place for an easier transition. In Allego, the user can add Chapters and Prompts to their video that might get cut out when a it is trimmed. Small markers at the bottom of the screen imitate the look of chapter and prompt markers in other modes and show the user whether or not a trim might be cutting important content.
In transferring designed solutions to a coded product, engineers must be made aware of every detail so that nothing is left to chance. I explained the interface elements and behaviors at every step of the video trimming process. I also included reasoning behind each decision so that developers aren’t left in the dark. A selection of slides from various points in my presentation are shown below.