Video Editor App
PowerDirector
The best full-featured video editor and video maker
Unleash your creativity.
Create high-quality professional videos – fast.
Platform for iOS and android
About
"CyberLink PowerDirector is one of the most advanced video editing software solutions available, designed to unlock your creativity and bring your ideas to life. With a seamless and enjoyable editing experience, our software provides a wide range of powerful tools and features.
Customizable templates, motion graphics titles, LUTs, a growing library of sound effects and background music, and professional-grade effects for video editing give you the creative freedom to make visually stunning videos that leave a lasting impression.
Whether you're a professional filmmaker or an aspiring content creator, PowerDirector is the perfect software for anyone looking to make their mark in the world of video editing. With the ability to unleash your creativity anytime, anywhere, there are no limits to what you can achieve.
Operation UI design
PowerDirector offers users two editing modes: horizontal and vertical, allowing them to switch effortlessly by simply rotating their phone.
When designing the UI interface, utmost consideration is given to both operation modes to ensure consistency and deliver an exceptional user experience. This entails maintaining consistent instructions and controls during mode transitions, enabling users to seamlessly switch between horizontal and vertical editing. The UI design facilitates a smooth and intuitive experience, empowering users to effortlessly adapt to different modes and maximize their editing capabilities.
Work
Duty and Role
• Planned and discussed user flow, information architecture
and function map of every new feature with PM and RD
according to the spec.
• Defined user interface guidelines, visual style and work with
designers to standardize UI style guides.
• Collaborated with RD and marketing team to design
user friendly UI based on user experiences research.
• Frequently use the app to optimized user experience issue
and user flow.
• Collaborated with web commerce team to update App store
images or promotion AD to achieve the best promo effect of
new features.
Project Objectives
Keep reviewing user Interface and create better user experience according to user data, including redesign UI face, UX flow and build better "in app purchase page" for PowerDirector. Meanwhile, keep developing advisor new UI design for each new feature release.
Tools
Keep product feature UI updating
In mobile app development, it's important to consider both the app page flowchart and UI design. The flowchart provides a visual representation of how different pages and features are connected and enables designers to plan a user's journey through the app. This structure is critical for ensuring that the user experience is smooth and intuitive, leading users to their intended destination through a logical sequence of steps.
When implementing UI design for new features, we must audit and update the flowchart to ensure that it reflects the changes accurately. By examining the location of each function in the flowchart, designers can verify that the user experience remains seamless and that the operation process is efficient.
Site Map of PowerDirector
Optimized launcher and main UI design
Application launchers are crucial for mobile app development, as they serve as the user's first point of contact with the app and set the tone for the entire user experience. A well-designed launcher can help users navigate the app quickly and efficiently, providing easy access to frequently used features and functions, which can lead to increased user engagement and retention. Therefore, it's important to continuously optimize and update the launcher to ensure that users have the best possible experience.
Start optimizing PowerDirector Launcher
In order to let users edit videos easily and quickly with one hand, and also refer to popular softwares which are easy to use, we decided to redesign the launcher including main UI design, and refine the user flow which provided a new operation mode - vertical screen mode, to let the users switch between two modes easier.
Meanwhile, we planned to interact more with users, so we added our social media platform on the new launcher and added more cool demos and video tutorials for more interaction with our users.
Here shows the original version >>>
The launcher of original version ( Landscape mode for Android only )
Main UI of original version
Feature overview slider of original version
Refinement items and New launcher for Portrait mode
-
Provide a new Portrait mode launcher, so that users can easily use PowerDirector App with one hand and without rotating their phone.
-
Rearrange launcher layout, refine UI flow, and highlight the “new project button” which user frequently use according to the user data, to let users see it when they open the App.
-
Added tutorial videos to show how to do cool demos.
-
Added social media element info and cool demos on it.
New launcher of portrait mode
The new launcher design should support both landscape and portrait modes, allowing users to switch between two modes by turning their smartphone.
New launcher of landscape mode
New launcher of landscape mode >>>
New Main UI design for Portrait mode
-
For the new portrait mode, we hope that users can learn and use it easily, so we re-examined the operation process of the original landscape mode, optimized and re-planned some functional items, and also redesigned the main UI to have consistency between landscape and portrait mode.
-
Added “+" button to let users into the main UI, they will notice it at first glance, and also add text descriptions to let users clearly know that the first step is to add their own video for editing.
New Main UI of landscape mode
New Main UI of portrait mode
Design style for PowerDirector Mobile
App UI design style is critical for creating a positive user experience in mobile app development. It sets the tone for the entire app and influences how users interact with it. A well-designed UI style can make an app more engaging, intuitive, and visually appealing, which can lead to increased user satisfaction and loyalty. In addition, a consistent UI design style across all screens and functions of an app can improve usability and reduce confusion for users.
Keep optimizing UI design for each new features release
Creating a successful mobile application requires continuous refinement and improvement of its functionality to provide a better user experience. This involves gathering user feedback and analyzing usage data to identify pain points and areas for improvement. Once armed with this information, we can prioritize and address critical issues and make incremental changes to enhance the user experience.
By continuously refining the app's functionality, developers can create an app that meets the evolving needs and preferences of its users and stays ahead of the competition. This approach fosters user loyalty and drives engagement, ultimately resulting in the success of the app.
Keep refining features to find better user experience for PowerDirector App
Add Video clips process optimizing
Optimize select videos / photos flow
1. Users can't distinguish the order of all selected when
adding multi-selected video clips to the timeline.
2. Users cannot first preview demo sample when
selecting video clip materials.
The process of adding clips to timeline
Tap "+ New Project" button
Select more than one material that you want, and press the "Next" button to start editing.
The selected and edited video clips are added to the timeline.
Issue: In the original process of selecting video, when users selected multiple videos, user cannot easily change the order when selected, and can only move to the next stage and shuffle the clips on the timeline, so it’s not user friendly. Moreover, user cannot preview the video clips which they want to choose, but can only watch in static thumbnails, which is very inconvenient for users either.
Refine the flow of selecting video clips material
In order to let users clearly know the order of selected video clips, we added an area of selected video clips. When user clicks and select the video clips, the materials will show the selected numbers and also added to the below area in sequence.
Added preview and enlarge functions, users can click on the enlarge icon on the upper right corner to preview the video clips in full screen, or press and hold the video and preview it, if users want to add it to the editing list, they can easily press “select +”, if not, just click blank space to back to the “add media” page.
Issue: If users select multiple video clips to the timeline, the video track will become very long and it's inconvenient for users to drag and shuffle the clips when editing.
In order to make the editing process more easy, each clip will transfer to 1:1 square thumbnail when users press and hold it, so users can drag it more easily when editing.
Video Filter effect issue
1. Simplify the process of repeatedly open/ close.
2. UX inconsistency.
The original process of using filter effect
Click the "Filter" and select any filter pack, and press the thumbnail cover and all filters of the pack will pop up.
Press the filter which you want to apply, and an effect adjustment slider will appear on the top of the Control Panel.
If users want more effects, press the "Get More" button, the interface will switch to the effect library.
Click a filter thumbnail and press "+" to see the preview demo of this filter and can purchase/ subscribe to it.
Issue: All "filter" packs are opened (show) and closed (merge) on the same row. If users choose a lot of "filter" packs at the same time, it is easy to cause level confusion.
Rethink the way of selecting filter packs. Replace the thumbnails that originally represent each filter pack with text descriptions first. And use the upper and lower parts to distinguish different levels, divide the "filter" cover and the corresponding filter template into the upper part and the lower part, and simplify the process between different levels.
Issue: Some UI issues need to be solved. First, when users click "Get more" button to view more filter packs, they cannot distinguish the differences between each filter pack at first glance, but need to click on each pack to go to the second layer to see the preview sample, and the image is too small to see it.
Second, users can only see the thumbnail but not try it on the photos, it’s hard for users to decide to purchase or subscribe to it.
We redesigned the UI layout and optimized the user process of the filter effect library.
We've deleted the subscription pop-up window. If users want to click and download the filter, once they click the "download" button, it will change to the "use" button so that users can apply and try it directly, and so can enhance user's interests to filter effects. Users will be notified to pay or subscribe if they want to output their creations.
Refinement UI flow for using filter effect
Press the "tab" option in the upper half to switch different filter packs, and can find corresponding filter effects.
Find the filter pack you want and press "download" button. After completing the download, the button will change to "use", then press it and will directly add to the filter menu, which allows users to try.
Keep adding new feature for each new version release
To keep mobile app users engaged and ensure its longevity, it's important to regularly add and release new features while keeping up with trends and user needs. Each new feature has the potential to boost engagement and user retention, making it more likely for users to continue using and recommending the app. Consistency and intuitiveness in the UI design are also crucial to help users easily adopt new features without feeling overwhelmed. Ultimately, a UI design that continually adds new features with each new release is vital for staying competitive in the ever-evolving world of mobile applications.
Make Your Videos Stand Out with amazing effects
"Body" effects and "Anime Face" effects feature UI
Tap AI Effect.
Find an Anime Face Effect which you want to apply.
Full-screen progress bar.
If users want to stop and re-select other effects, they can click the "Cancel" button below.
Apply the Anime Face Effect.
Tap "Body" Category.
Tap a body effect to apply to video. After completion, an editable detail icon will appear on the thumbnail.
Adjustment parameters will show at the left of the toolbar below, click the arrow to return to the menu.
Choose other effects.
How to generate magic avatars with the Best AI video style
"AI Style" feature UI
Tap "AI style" button on the launcher.
Select a template that you want.
Tap "Try Now"
Select a clip to apply a template effect.
Apply the effect, press the "Produce" button on the top right.
Display the produce setting panel.
Produce completed, choose to share video.
Tap “Crop & Range” tool
on edit panel.
Select the range that you want.
Tap "Volume" tool on edit panel.
Pull the slider to adjust the clip volume.
How to Use cut out to edit your video
"Cut out" feature UI
Tap "Cutout".
Tap "Change Background".
Show background thumbnail panel, default option is "Dynamic".
Switch to "Static" option.
Tap "＋" to add phone's gallery and online gallery
Find background image you want
Added a new background image to replace the original photo
If the cutout effect is applied to the Picture in Picture track
The above is to select
color of the background image.
The bottom is to select
stroke style.
Apply stroke effect.
Tap "Cutout".
Tap "Background & Stroke".
Show the panel.
How to increase app stickiness by using gamification and awards
"Gamification" UI
Tap the gift box on the navigation bar to start the game.
Select activity item.
Claim prizes for completing the game.
View completed game items.
Pop up toast tip UI to show the quest completed.
Tips Dialogue.
Quest dialogue completed.
Different colors medals for different tasks.
Enhancing the Shopping Cart Page for Improved Sales Performance
To keep mobile app users engaged and ensure its longevity, it's important to regularly add and release new features while keeping up with trends and user needs. Each new feature has the potential to boost engagement and user retention, making it more likely for users to continue using and recommending the app. Consistency and intuitiveness in the UI design are also crucial to help users easily adopt new features without feeling overwhelmed. Ultimately, a UI design that continually adds new features with each new release is vital for staying competitive in the ever-evolving world of mobile applications.
