Back

AIVE's storyboard redesign

@AIVE
Product Design
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 generate, organize, and export variations efficiently, leveraging AI.
My Contributions
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.
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.‍
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.
Goals
1. Enable users to manage multiple montages simultaneously using bulk actions.
2. Improve feature discoverability through intuitive navigation and clear visual hierarchy.
3. Ensure seamless integration of bulk export functionality with accessible settings.
4. Enhance user satisfaction by reducing repetitive tasks and simplifying workflows.
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.
Discovery
We began by interviewing video project managers to understand their pain points. A recurring theme emerged: managing multiple montages required excessive effort, with repeated tasks like renaming, locking, or deleting montages individually.
We defined a primary user persona:"A video project manager who needs to handle multiple montages simultaneously, saving time and reducing repetitive tasks."
Research and ideation
We analyzed successful UI patterns from tools like Figma, Capcut, and Github to gather inspiration.
Figma's branching system for clear version control.
Capcut's grid-based library for intuitive montage seleciton.
GitHub's branch navigation system.
Design Iterations
Redesigned Navigation between video projects
User need: Users 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.
Enhanced Export Modal
User need: Users want to configure 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.
Header redesign
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.
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.
Testing & Validation
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.
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.
Results

75%

of users completed bulk actions on their first attempt.

30%

repetitive task reduced with bulk actions, saving significant time
Passation Synerg'hetic
Parentaise
anouk.hervouet12@gmail.comInstagramBEHANCEDribbbleLINKEDIN
Powered by Webflow