Aive's Storyboard navigation redesign: Improving usability through research and testing
2024
Project Overview
Aive’s Storyboard navigation system, a core feature for managing video montages, faced challenges with usability and scalability. Users expressed difficulty in managing multiple montages efficiently, navigating features, and understanding available actions. Our goal was to redesign the navigation and related functionalities to streamline workflows, reduce user frustration, and improve feature discoverability.This redesign was pivotal to sustaining Aive's promise: enabling video project managers to gain weeks of post-production of their videos, leveraging AI to generate, organize, and export variations efficiently.
My Contribution
As the Product Designer on this project, I orchestrated workshops such as card sorting and user interviews to deeply understand user pain points and needs. Through iterative design, I refined solutions based on user feedback, ensuring the navigation met their expectations. I collaborated closely with the development team to ensure seamless implementation of features, bridging the gap between user needs and technical constraints.
.jpg)
Project goals
1
Enable users to manage multiple montages simultaneously using bulk actions.
2
Improve feature discoverability through clear navigation and visual hierarchy.
3
Ensure seamless integration of bulk export feature, as requested from the marketing team through user feedbacks.
4
Enhance user satisfaction by reducing repetitive tasks and simplifying workflows.
Target users
The primary users of AIVE’s storyboard feature are video editors, project managers, and marketing leads involved in producing large volumes of video content. They need a fast, intuitive way to avoid repetitive tasks like exporting or renaming each montage one by one.
In order to identify the weaknesses of the platform navigation, we conducted user interviews on a sample of 6 users, with a video editing or video management profile. As a result, we identified 3 major problems relative to Aive's storyboard navigation:
83%
of users were not able
to navigate to a specific montage
83%
of users were not able to find
how to export a montage
50%
of the users that were able to export
a montage were not able to download it
Key challenges
1
Inefficient montage navigation with a dropdown-based interface
2
Lack of bulk actions for managing multiple montages
3
Crowded and poorly prioritized header design impacting discoverability
4
Difficulty understanding and using export settings for batch rendering.
Problem Statement
Users frequently manage dozens of montages at once. However, the existing interface lacked the tools to handle bulk actions, organize montages effectively, or access key features intuitively. These limitations resulted in repetitive actions, slower workflows, and a steep learning curve.
Success Metrics
70%
of users perform bulk actions without errors in the first attempt.
60%
report improved efficiency in montage management.
80%
locate and use navigation and export features without external guidance.
Navigation montage benchmark
We analyzed successful UI patterns from tools like Figma, Capcut, and Github to gather inspiration. Figma’s and Github's branching systems helped us rethink montages navigation ans CapCut’s grid-based layout informed our approach to montage selection and bulk actions.
Figma's branching system for clear version control.
Capcut's grid-based library for intuitive montage seleciton.
GitHub's branch navigation system.
Header workshop
To address usability issues in Aive's storyboard, we conducted card-sorting workshops with users to identify the most essential actions for the header. Participants ranked actions based on frequency and importance, revealing clear priorities for montage navigation, profile access, notifications, score display, and export functionality.
We discovered that several existing header elements, such as the "Create New Montage" button, were not considered critical and could be deprioritized or moved elsewhere in the interface.
Additionally, users grouped related actions into intuitive categories. For example, montage-related tasks (rename, duplicate, delete) were clustered together, while sharing and collaboration actions (lock, copy link, access permissions) were grouped under a new "social" category. Based on these insights, we redesigned the header to reduce clutter and emphasize the five core actions.
Key improvements included:
Montage Navigation
A centralized, easily accessible dropdown for switching between montages.
Profile Access
Streamlined user account options and support features in a dedicated section.
Notifications
Clear, concise alerts to keep users informed without distraction.
Score Display
A centralized, easily accessible dropdown for switching between montages.
Export
Simplified access to export functionality, enabling users to download rendered montages with fewer steps.
New "Social" category
A dedicated section grouping montage-specific actions such as locking, sharing, and managing access, aligning with user mental models for collaboration and security tasks.
Conception of high fidelity drafts
Based on our research insights, we moved into high-fidelity design to address the core usability issues. We focused on three key areas: a redesigned montage navigation system with support for bulk actions, an enhanced export modal enabling multi-export in fewer steps, and a clean header with a better hierarchy to improve feature discoverability and reduce clutter. These improvements aimed to simplify complex tasks and create a faster, more intuitive user experience.
1
A redesigned montage navigation system with support for bulk actions
User need: to be able to select several montages and carry out multi actions on them, such as delete, download or export several montages at the same time.
Before: an over stack of informations, with no clear hierarchy, and no possibility to have multi actions on montages.
After: a simplified experience with a table-based modal that replaced the dropdown, providing a detailed overview of montages, and allowing to have bulk actions on montages. Users can rename, lock, delete, or export multiple montages at once via checkboxes and a multi-select footer.
2
An enhanced export modal enabling multi-export in fewer steps,
User need: to configure export settings once and apply them to all selected montages.
Before: Excessive UI effects, too many informations displayed that increase the mental workload of the user, over display of technical informations, making the export flow hard to comprehend for the user.
After: New bulk export feature, cleaner design with only the important informations displayed, improved accessibility, resulting in a reduced mental workload for the user.
Before: Too many actions displayed, bad hierarchy of informations, depreciated component.
After: Clean design, only the informations expected by the user are displayed, the information hierarchy serves the desired flow.
We employed the RITE mthod (Rapid Iterative Testing and Evaluation) for quick feedback and adjustments.
Findings
1. Users preferred a modal layout for montage management over dropdowns.
2. Empty checkboxes (default state) improved clarity for selecting montages.
3. A search bar and sorting options addressed user needs for organization.
Changes Implemented
1. Added a persistent search bar for montages.
2. Redesigned the export modal to simplify multi-export configurations.
3. Removed redundant or confusing elements, like the “original video” from the montage list.
Results vs goal
70%
of users perform bulk actions without errors in the first attempt.
60%
report improved efficiency in montage management.
80%
locate and use navigation and export features without external guidance.
80% ✅
of users* completed bulk actions on their first attempt.
60% ✅
of users* report repetitive task reduced with bulk actions, saving significant time.
100% ✅
located and used the navigation and export features without guidance.
82% ✅
of users* report a global satisfaction of the platform.
*on a panel of five users.
.gif)
.png)
