Invideo: video editing app redesign
Timeline
4 months
Role
Cross-functional team of 3 designers, Product Manager and 4 Developers. Lead designer, leading research, ideation, UX & UI design, prototyping, testing.
Tools
Figma, Principle, After Effects
Challenge
How might we redesign the app, develop new visual language and fill the feature gap versus web platform?
Goal
Redesign existing app to enhance user experience, augment app performance, introduce new visual language and close the feature gap vs web platform.
01
Understand
Context
Invideo is a video editing platform. There are two key Invideo products: web-editor and a mobile app.
The mobile app (Filmr) was an acquired app under different brand and name but for some time was promoted among Invideo web users therefore had a significant user base.
Redesign was long overdue, as it became more and more challenging to maintain the off-brand app with poor UX patterns, sluggish performance and frequent crashes.
Discovery
We started with the old design assessment. There were numerous problems we identified, here a few of them:
• Layering structure leads to excessive back and forth switching between screens
• Navigation at the top – hard to reach, very unusual
• Swipe on the layer to reveal options is not very intuitive
• Super hard to align layers or trim music to video
• Impossible to trim clips with precision
• Export settings are confusing and do not allow to preview the final video
• Often crashes
• Outdated design
Research
To confirm existing problems and get more insights we continued with user research. First, we went through competitor analysis, comparing design, features and metrics with the help of Apptopia tools.
Then we conducted user interviews with 14 participants. We also went through user feedback from our customer support team.
It all helped us make a few important realizations:
Problem Definition
As the result, we confirmed the existing problems & got more valuable insights that allowed us to form a problem statement:
An off-brand app with abundance of poor UX patterns, outdated visuals, complicated basic editing features and feature gap blocking connection to Invideo Web Editor.
Project Goals
Redesign is a big project, so we’ve set clear goals for ourselves not to get lost in the process:
Design Strategy
I defined and communicated design strategy for this project to my team.
02
Ideate
We started ideating with competitor analysis to learn best practices in the market in layout, navigation, in timeline editing and etc.
It helped to understand what patterns we can take, which not to take, which to improve upon.
Then, with the help of How might we technique we addressed the findings from our research to transform user painpoints, desires and our observations into opportunities.
With that, we continued to sketching: exploring different layouts and main navigation ideas.
03
Iterate
From sketches we moved on to digital design and our first design iteration.
Following our design strategy, we started with the foundations that would cover functional and reliable level: layout, main navigation, layer management, playback, media import.
Within first iteration effort we touched a lot of features, most flows of the app.
This case study will focus on main experience, key features and key improvements we made through iteration process, and a couple new features we shipped.
04
Validate
We continued to Validate stage as we wanted to see how our design proposals, assumptions and ideas would work in close to real world environment, on real users.
We prepared design prototypes and conducted 3 User Testing sessions with 10 users.
05
Improvements (Iterate 02)
Insights from User testings allowed us to understand that we are moving in the right direction & iterate further to improve on our designs.
#1: Layout
Moved timestamps from the top to the timeline for easier precision trimming and clip management
Moved settings to Bottom nav, and Undo/Redo to Canvas
Increased all clips height to make them more accessible
#2: Better Clip States
Applied effects indicators on all clips
Improved “at Trimming” state, allowing for precise trimming
Clip intro & outro animation indicators
Precise trimming: snapping to milliseconds based on zoom level & precise time counter for it.
#3: Add Media
Removed “Blank” media concept from the app
Native-like modal view with clear hint to help navigate to other Albums
Visual representation of selected media & option to rearrange it
#4: Templates Library
Simplified layout: more browsing, less categorising
Simple category tabs instead of complicated filters – easier navigation and browsing
More focus to Search and better screen placement
06
Finished Designs
Our finished product seamlessly brought together several important things.
New & improved visual design and layout
Timeline based editing that enables WYSIWYG
New navigation system, with just 2 hierarchy levels which makes any feature within the app just two and less taps away
Streamlined video creation process
Comprehensive Templates library
Add Media, manage clips, Adjust colors, Add Music & more
Comprehensive Templates Library
Browse by category
Search and narrow down with advanced filters
Filters simplified and work as tags
Preview templates in full-screen and check different aspect ratios
Apply to All Interaction
Unique interaction was designed for apply to all functionality.
We conducted the user test on 10 users to see if it is discoverable enough and easy to use.
The tests showed users found it a bit hidden and not obvious but once learned most users performed it multiple times without direct request to use it.
& More
07
Results
We shipped features one by one, changing the product incrementally. It allowed us to see impact of each feature we designed. As the result we saw a great growth in key metrics and customer satisfaction.
