MONTAGEAI SETUP PAGE
Project Title
Setup Page Redesign
Role
Contract Product Designer
Duration
2023.12 - 2024.3
Team
Montage Visual
Tools
Figma, Axure RP
Product Overview
AI-powered B2B platform for marketing videos
Context
What is Setup
Setup is an important step after importing video materials and before generating the video. Users need to provide input parameters to the AI model to ensure that generated marketing videos meet the desired effects.
Current Problem - Low efficiency, heavy workload, and a complex user experience
How to simplify and speed up video generation setup for users?
Solution
Streamlined, flexible, and clear input experience
Before
After
Split into a multi-step flow
Split the setup page from a single integrated view into a multi-page step-by-step process.
Refine Visual Hierarchy
Restructure parameter settings into clear, logical categories and steps.
Flexibility
Defaults auto-fill from imported videos, so users can skip if no changes needed.
Organized optional settings under collapsible "More Options" and "Advanced Settings" sections.
How did we get there?
Research
Internal Audit
1. Unclear Progress
All progress interfaces are poorly integrated into the same screen
2. Confusing Hierarchy
Compact interface and confusing logic among parameters
3. Large Input Workload
Require heavy input and a long time to complete
External Audit
We audited setup interfaces of 3 video editing and AI image generation platforms and identified key features that serve as excellent design patterns for our inspiration:
· Structured workflow
· Step-by-step process
· Intuitive navigation
· Functional categorization and zoning
· Cards with clear hierarchy
· Complex functions in a higher information hierarchy
CapCut
Pr
Midjourney
Design Principles
We followed the 3 key design principles to complete the redesign.
Flexible
Offer the choice between professional and simple
Hierarchical
Categorize and reorganize information in a clear way
Standardized
Streamline the process with consistency and efficiency
Goals
How to create standardized workflow with great Flexibility and Clear Hierarchy
Business Goal
Improve customer satisfaction, increase usage rates, and reduce the time and complexity of generating a batch of marketing videos.
Challenge
An overwhelming number of parameters, along with challenges in categorization, logic, and placement, requires continuous user testing and iteration.
Solution Implementation
Realize the redesign based on design principles
Split into a multi-step flow
Provide users with clearer process information, including which step they are on.
Refine Visual Hierarchy
Clarify the information structure to help users navigate and understand parameters more easily.
Flexibility
Offer choices between a professional or simplified experience, catering to different needs.
New Feature and Iteration #1
Retain Parameters
Goal: Allow users to match certain parameters of the generated videos with those from the imported videos to reduce workload.
New Feature: Retain Parameters
Add a Pop-up at the Start of the Setup Flow to Retain Parameters
Improvement
· A quick-select feature to replace manual input
Problem
· Workload remains heavy
· Overwhelming information for a pop-up
Goal
· Significantly reduce the workload
· Present the information in a more readable way
Iteration
Defaults Auto-Fill Parameters Instead of Pop-up
Improvement
· Most parameters are pre-filled with values from the imported video and displayed in gray.
· Only modified parameters require input. Edited values appear in black and are retained for the next video generation.
Iteration #2
Refine Visual Hierarchy
Goal: Help users navigate and understand the categorized and organized parameters easily.
1st Iteration
Categorization and Layout Refinement
Improvement
· Added secondary headings to group parameters
· Changed layout from two columns with two sections to one column with one section
· Added "More" sections collapsible and skippable
Problem
· Visual flow within and between sections was inconsistent
· Parameters displayed in two columns were not well grouped visually
Goal
· Optimize visual flow across and within sections
· Improve the visual clarity of parameter grouping
2nd Iteration
Reformatting
Improvement
· Converted all sections into collapsible cards
· Improved overall visual flow