Setup Redesign
Setup Redesign
MontageAI
MontageAI
Duration
Dec 23 - Mar 24
Duration
Dec 23 - Mar 24
My Role
Research
UX/UI Design
User Testing
My Role
Research
UX/UI Design
User Testing
Team
3 UX/UI Designer
1 AI Trainer
Team
3 UX/UI Designer
1 AI Trainer
Product Overview
A B2B platform for bulk generation of marketing short videos
Product Overview
A B2B platform for bulk generation of marketing short videos
Product Overview
A B2B platform for bulk generation of marketing short videos
Context
What is Setup
Context
What is Setup
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.
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.
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, large workload, and complex for users
How to improve the user experience and efficiency of setting up video generation parameters?
Current Problem - Low efficiency, large workload, and complex for users
How to improve the user experience and efficiency of setting up video generation parameters?
Current Problem - Low efficiency, large workload, and complex for users
How to improve the user experience and efficiency of setting up video generation parameters?
Solution
A more streamlined, flexible, and clearer input experience
Solution
A more streamlined, flexible, and clearer input experience
Solution
A more streamlined, flexible, and clearer input experience
Before
Before
Before
After
After
After
Break up into Progress Steps
Break up into Progress Steps
Break up into Progress Steps
Split the settings from a integrated single page into a process with multiple pages.
Split the settings from a integrated single page into a process with multiple pages.
Split the settings from a integrated single page into a process with multiple pages.
Reframe the Hierarchy
Reframe the Hierarchy
Reframe the Hierarchy
Categorize parameters and redesign interfaces with a clearer hierarchy.
Categorize parameters and redesign interfaces with a clearer hierarchy.
Categorize parameters and redesign interfaces with a clearer hierarchy.
Flexibility
Flexibility
Flexibility
Provide default parameters same as imported video materials. Users can skip them if no need to modify.
Make some settings optional and fold into "more" and "advanced settings" section.
Provide default parameters same as imported video materials. Users can skip them if no need to modify.
Make some settings optional and fold into "more" and "advanced settings" section.
Provide default parameters same as imported video materials. Users can skip them if no need to modify.
Make some settings optional and fold into "more" and "advanced settings" section.
How did we get there?
How did we get there?
How did we get there?
Research
Internal Audit
Research
Internal Audit
Research
Internal Audit
1. Unclear Progress
1. Unclear Progress
1. Unclear Progress
All progresses are integrated in the same interface and difficult to understand
All progresses are integrated in the same interface and difficult to understand
All progresses are integrated in the same interface and difficult to understand
2. Confusing Hierarchy
2. Confusing Hierarchy
2. Confusing Hierarchy
Compact interface and confusing logic among parameters
Compact interface and confusing logic among parameters
Compact interface and confusing logic among parameters
3. Large Input Workload
3. Large Input Workload
3. Large Input Workload
Requires heavy workload and a long time to complete
Requires heavy workload and a long time to complete
Requires heavy workload and a long time to complete
External Audit
External Audit
External Audit
We audited setup interfaces of 3 video editing and AI image generation platforms and concluded the main features that these excellent design patterns for our inspiration.
We audited setup interfaces of 3 video editing and AI image generation platforms and concluded the main features that these excellent design patterns for our inspiration.
We audited setup interfaces of 3 video editing and AI image generation platforms and concluded the main features that these excellent design patterns for our inspiration.
· Structured workflow
· Step by step
· Intuitive Navigation
· Functional classification and zoning
· Cards with clear hierarchy
· Complex function in higher information hierarchy
· Structured workflow
· Step by step
· Intuitive Navigation
· Functional classification and zoning
· Cards with clear hierarchy
· Complex function in higher information hierarchy
· Structured workflow
· Step by step
· Intuitive Navigation
· Functional classification and zoning
· Cards with clear hierarchy
· Complex function in higher information hierarchy
Capcut
Capcut
Capcut
Pr
Pr
Pr
Midjourney
Midjourney
Midjourney
Design Principles
Design Principles
Design Principles
We follow the 3 key design principles to complete the redesign.
We follow the 3 key design principles to complete the redesign.
We follow the 3 key design principles to complete the redesign.
Flexible
Flexible
Flexible
Choose between professional and simple
Choose between professional and simple
Choose between professional and simple
Choose between professional and simple
Hierarchical
Hierarchical
Hierarchical
Categorize and reorganize the information in a clear way
Categorize and reorganize the information in a clear way
Categorize and reorganize the information in a clear way
Categorize and reorganize the information in a clear way
Standardized
Standardized
Standardized
Streamline process with consistency and efficiency
Streamline process with consistency and efficiency
Streamline process with consistency and efficiency
Streamline process with consistency and efficiency
Goals
How to create standardized workflow with great Flexibility and Clear Hierarchy
Goals
How to create standardized workflow with great Flexibility and Clear Hierarchy
Goals
How to create Standardized workflow with great Flexibility and Clear Hierarchy
Business Goal
Business Goal
Business Goal
Optimize setup processes to enhance customer satisfaction, usage rates, and completion efficiency.
Optimize setup processes to enhance customer satisfaction, usage rates, and completion efficiency.
Optimize setup processes to enhance customer satisfaction, usage rates, and completion efficiency.
Optimize setup processes to enhance customer satisfaction, usage rates, and completion efficiency.
Challenge
Challenge
Challenge
Too many parameters to input, requiring user constant testing and iteration.
Too many parameters to input, requiring user constant testing and iteration.
Too many parameters to input, requiring user constant testing and iteration.
Solution
Realize the redesign based on design principles
Solution
Realize the redesign based on design principles
Solution
Realize the redesign based on design principles
Break up into Progress Steps
Break up into Progress Steps
Break up into Progress Steps
Provide users with more information about the process, indicating which step they are on.
Provide users with more information about the process, indicating which step they are on.
Provide users with more information about the process, indicating which step they are on.
Reframe the Hierarchy
Reframe the Hierarchy
Reframe the Hierarchy
Clarify information structure for users, helping them navigate and understand the parameter more easily.
Clarify information structure for users, helping them navigate and understand the parameter more easily.
Clarify information structure for users, helping them navigate and understand the parameter more easily.
Flexibility
Flexibility
Flexibility
Allow users to choose their preferred experience - professionalism or simplicity, catering to diverse needs and enhancing overall usability.
Allow users to choose their preferred experience - professionalism or simplicity, catering to diverse needs and enhancing overall usability.
Allow users to choose their preferred experience - professionalism or simplicity, catering to diverse needs and enhancing overall usability.
New Feature and Iteration #1
Retain Parameters
New Feature and Iteration #1
Retain Parameters
New Feature and Iteration #1
Retain Parameters
Goal: Allow users to match certain parameters of the generated video with those of the imported video to reduce workload.
Goal: Allow users to match certain parameters of the generated video with those of the imported video to reduce workload.
Goal: Allow users to match certain parameters of the generated video with those of the imported video to reduce workload.
Add a Feature to Retain Parameters
A Pop-up Before Setup
Add a Feature to Retain Parameters
A Pop-up Before Setup
Add a Feature to Retain Parameters
A Pop-up Before Setup
Improvement
Improvement
Improvement
· A quick selection feature instead of manual typing
· A quick selection feature instead of manual typing
· A quick selection feature instead of manual typing
Problem
Problem
Problem
· Workload still heavy
· Overloaded information for a pop-up and hard to read
· Workload still heavy
· Overloaded information for a pop-up and hard to read
· Workload still heavy
· Overloaded information for a pop-up and hard to read
Goal
Goal
Goal
· Significantly reduce the workload
· Present the information in a more readable way
· Significantly reduce the workload
· Present the information in a more readable way
· Significantly reduce the workload
· Present the information in a more readable way
Iteration
Pre-set Default Parameters
Iteration
Pre-set Default Parameters
Iteration
Pre-set Default Parameters
Improvement
Improvement
Improvement
· Pre-set most parameters to values corresponding to imported videos, displayed in gray.
· Skip setting parameters if the change is unnecessary. After editing, edited values are displayed in black.
· Pre-set most parameters to values corresponding to imported videos, displayed in gray.
· Skip setting parameters if the change is unnecessary. After editing, edited values are displayed in black.
· Pre-set most parameters to values corresponding to imported videos, displayed in gray.
· Skip setting parameters if the change is unnecessary. After editing, edited values are displayed in black.
Iteration #2
Reframe Hierarchy
Iteration #2
Reframe Hierarchy
Iteration #2
Reframe Hierarchy
Goal: Help users navigate and understand the categorized and organized parameters easily.
Goal: Help users navigate and understand the categorized and organized parameters easily.
Goal: Help users navigate and understand the categorized and organized parameters easily.
Before
Before
Before
1st Iteration
Categorize Parameter and Reformat
1st Iteration
Categorize Parameter and Reformat
1st Iteration
Categorize Parameter and Reformat
Improvement
Improvement
Improvement
· Add secondary headings to categorize parameters
· Two columns - two sections to one column - one section
· ‘’More‘’ section collapsible and skippable
· Add secondary headings to categorize parameters
· Two columns - two sections to one column - one section
· ‘’More‘’ section collapsible and skippable
· Add secondary headings to categorize
· 2 columns - 2 sections to 1 column - 1 section
· ‘’More‘’ section collapsible and skippable
· Add secondary headings to categorize parameters
· Two columns - two sections to one column - one section
· ‘’More‘’ section collapsible and skippable
Problem
Problem
Problem
· Visual flow within and between sections is contradictory
· Two-column parameters within a section don't group well
· Visual flow within and between sections is contradictory
· Two-column parameters within a section don't group well
· Visual flow within and between sections is contradictory
· Parameters within a section don't group well
· Visual flow within and between sections is contradictory
· Two-column parameters within a section don't group well
Goal
Goal
Goal
· Optimize visual flow
· Optimize the visual effect of grouping
· Optimize visual flow
· Optimize the visual effect of grouping
· Optimize visual flow
· Optimize the visual effect of grouping
2nd Iteration
Reformat
2nd Iteration
Reformat
2nd Iteration
Reformat
Improvement
Improvement
Improvement
· Change all sections to collapsible cards
· Optimize the visual flow
· Change all sections to collapsible cards
· Optimize the visual flow
· Visual flow within and between sections is contradictory
· Parameters within a section don't group well
· Change all sections to collapsible cards
· Optimize the visual flow
Setup Redesign
MontageAI
Duration
Dec 23 - Mar 24
My Role
Research
UX/UI Design
User Testing
Team
3 UX/UI Designer
1 AI Trainer