top of page
top_banner_13.jpg

Video Editor App

PDRM_1024.png

PowerDirector

The best full-featured video editor and video maker

Repeatedly awarded Apple App Store and Google Store's

    annual recommendations

 Taiwan Excellence Silver Awards

Platform for iOS and android

PDR_UI_phone_1.png
The App

Overview

PowerDirector is a video editing app designed specifically for mobile devices by CyberLink Corporation. It offers a wide range of powerful tools and features, along with an extensive library of resources. Whether it's title templates, dynamic graphics titles, transition effects, filters, or background music, PowerDirector provides everything users need to effortlessly create stunning video content.

However, the rising popularity of short-form videos on social media has led to the emergence of numerous similar video editing apps, affecting PowerDirector's competitiveness and resulting in a decline in downloads and user ratings. To enhance our product, we actively listen to user feedback, focusing on user experience and demands, to revitalize PowerDirector's competitiveness and drive growth in downloads.

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.

PDR_UI_phone_5.png
PDR_UI_phone_4.png
Features

Work

Duty

• 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.

Role

CyberLink UI/ UX Design Team Lead

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

icon figma vector.png
Adobe_Photoshop_CC_icon.svg.png
5a5772891c992a034569ab8c.png

Thinking and finding user experience issues while keeping product feature UI updating.

PowerDirector , since its launch in 2001, has been a longstanding and powerful app. While it has continuously introduced new features, there has been a lack of consistent focus on analyzing and discussing user experience. Additionally, the interface has largely remained unchanged, failing to keep up with current design trends. Consequently, its design appears outdated in comparison to its competitors. Therefore, we have engaged in discussions with the Product Manager (PM) and Engineering team to address these concerns and strive to make improvements to PowerDirector App.

Interface Design of Early PowerDirector App

PDR_FbAd_02.png
Reverse.png

Refinement version

PDR_UI_phone_7.jpg
PDR_UI_phone_6.jpg

Discover Problem / User Pain Points

Outdated UI Design Style 

The interface design of PowerDirector has remained stagnant for an extended period, lacking updates to align with current design trends. Consequently, it appears outdated in comparison to its competitors. This outdated image hinders its appeal to a younger audience, which is unfavorable for the product.

Messy Operation Process and Poor User Experience

PowerDirector has accumulated a plethora of features. However, due to the lack of continuous optimization, the user experience during operation is not so good, leading to a decrease in the utilization rate of these functions.

Confusing Function and Content Classification

PowerDirector offers a wide range of functions and content designs, such as special effects, titles, templates, textures, and more. These features are specifically designed to enhance the convenience of video editing for users. However, the categorization and layout of these functions can sometimes be confusing, making it challenging for users to locate and use them during the editing process.

The information on the subscription page is unclear

The effectiveness of the subscription page is crucial for the app's revenue. Currently, compared to its competitors, the subscription page lacks visual appeal and clear communication of the benefits of subscribing.

Our Objectives / 

Solution

Redesign the UI design style and layout of PowerDirector

Optimize operational workflows to enhance the user experience.

Reorder and categorize

Reevaluate all the features and tools in PowerDirector (including content design) and readjust their placement. Place the most frequently used features at the front of the toolbar so that users can quickly locate them. Additionally, reorganize and group similar features together to reduce the number of tools on the toolbar. Currently, there are too many tools, which makes it time-consuming for users to find the desired tool.

Review the operational workflows of the features

Based on usability testing and user feedback, make adjustments to optimize the workflow of each feature. Also, examine whether the operational logic of each feature is consistent.

Improve subscriber retention and increase the subscription rate.

Enhance the design and presentation of the subscription page to increase its appeal to users.

Good Results

Increased Young User Base / Google Play Store excellent ratings

Previously, the user age distribution was predominantly in the 40-50 age range, accounting for over 50% of the total, indicating an older demographic. However, the 20-30 age range has now grown from a small proportion to over 20% and continues to increase. This significant increase in the younger user base reflects the success of PowerDirector's rejuvenation. Additionally, PowerDirector has received excellent ratings and recommendations from Google Play Store, surpassing its competitors in terms of editing capabilities and user ratings.

messageImage_1688966822749.jpg

Google Play Store excellent ratings and recommendations

Strong Growth in Total Download Rate. (YoY)

Subscriptions have shown remarkable growth, with a 284% increase in trial-to-conversion rate.

messageImage_1688966827334.jpg

Revenue has exceeded expectations for this year, surpassing even the targets set for the next year.

pic_6.jpg
pic_3.jpg

Initiating the Establishment of Design System

Design components can be shared among other CyberLink software to ensure consistency.

Enhancing the efficiency of RD, PM, and designers, enabling faster development of new features and products.

Diving into UI/UX design process 

Through close collaboration with product managers and monetization team(customer service), we actively integrate user feedback, analyze product usage data, and conduct competitor analysis to gain a comprehensive understanding of our customers and market needs. This in-depth research empowers us to identify key areas that require attention. By leveraging these insights, we can make informed decisions and develop strategies to address critical areas and enhance our overall product offering.

Research
Methods

Competitor Analysis

Information Architecture

User Research

Usability Testing

Quantitative User Research

We regularly collect and analyze user data, including content designs provided within the software, to gain a deeper understanding of user behavior patterns, preferences, usage needs, and the effectiveness of our services. With this data, we can better understand the user experience and make timely adjustments and improvements to our software.

pic_8.jpg
pic_9.jpg
pic_11.jpg
pic_12.jpg

Competitive Audit

Additionally, we conducted an analysis of the core features, comparing them to direct competitors such as KineMaster and VivaVideo, as well as indirect competitors like Picsart. We also prioritized the implementation of new features and enhancements to ensure the timely delivery of updates, continuously enhancing our competitive edge.

pic_7.jpg

Actual User Requirements

Operational Mode Requirements

Through competitor analysis and user feedback research, we found that most video editing software solutions adopt a vertical UI layout for their video editing interfaces. Vertical editing mode has become a trend, especially with the rise of social media, as users predominantly create and share 9:16 vertical videos on smartphones. Therefore, after integrating with iOS, our priority was to support vertical UI mode while retaining the original horizontal mode, setting us apart from our competitors. We believe that the vertical mode is suitable for quick editing of short videos, while the horizontal mode is more suitable for editing longer videos or projects with multiple tracks.

Launcher Page Requirements

Based on user feedback data, we discovered that the majority of users' first interaction upon launching the app is to create a "New Project." We have learned that 80% of users spend less than 5 minutes on video editing, and 50% of users spend less than 1 minute. This indicates a preference for creating short videos, which may explain why the "New Project" option is frequently accessed. To address this, we need to prominently feature the "New Project" button, ensuring that users can easily find and access it.

Content Design Requirements

Through competitive analysis, we have identified that our product lacks distinctive features and innovative functionalities compared to our competitors. Additionally, in terms of content design, such as special effects, transitions, dynamic titles, stickers, etc., we need to strengthen the quantity and develop a more diverse range of options. This is crucial to attract new users to choose PowerDirector and consider subscribing to our services.

User Subscription Requirements

We have been striving to offer a variety of subscription plans. However, upon comparing with our competitors, we found that the abundance of options may create confusion for users. To address this, we suggest emphasizing the annual subscription discounts and implementing promotional strategies, such as game rewards, during different time periods to enhance user engagement.

Additionally, during the editing process, we observed that users may encounter an excessive number of pop-up windows when accessing premium features that require payment. These pop-ups include subscription offers, feature unlocks, and game prompts, which negatively impact the user experience. Therefore, we recommend minimizing the frequency of pop-up windows throughout the user journey to streamline the overall user experience.

Functional Map of PowerDirector

In the development of mobile applications, both the functional map and user interface (UI) design are crucial considerations. The functional map helps designers and developers understand user workflows and ensures a smooth and intuitive user experience. When designing new features, it is important to review and update the structure of the functional map to accurately reflect changes.

 

By examining the position of each feature in the functional map and analyzing user data, we have reorganized the placement of features. We have prioritized the most commonly used and important features by categorizing them and placing them in the first layer of the toolbar, making them easily accessible to users. These adjustments enhance user convenience and efficiency.

PDRM_4.png

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 >>>

PDR_FbAd_02.png

The launcher of original version ( Landscape mode for Android only )

Reverse.png

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.

1.Sample Project.jpg
Launcher.jpg

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.

Launcher_Landscape_220105.jpg

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

PNG-3.png
design2.png

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. 

Group-4845_1.png

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.

mpbile_samole2.png
mpbile_samole3.png
mpbile_samole1.png
add_template_01.png
mpbile_samole4.png
add_template_04.png
add_template_05.png
add_template_03.png

Keep refining features to find better user experience for PowerDirector App

Example

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

add_video_clip_N1.png

Tap "+ New Project" button

add_video_clip_N4.png
add_video_clip_N3.png

Select more than one material that you want, and press the "Next" button to start editing.

add_video_clip_3.png

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

add_video_clip_N5.png
add_video_clip_N6.png

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.

add_video_clip_N7.png
add_video_clip_3.png
unsplash_Pf6e3o0GL4M.png
add_video_clip_N8.png

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. 

Example

Video Filter effect issue

1. Simplify the process of repeatedly open/ close.

2. UX inconsistency.

The original process of using filter effect

85.Filter.jpg
87.Filter.jpg
88.Filter.jpg
89.Filter.jpg
90.Filter_Android.jpg

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.

2.Default highlight Portrait_None.jpg
3.Drag to adjust the parameter.jpg
5.Tap Download.jpg
7.Tap Use.jpg
8.Display the filter pack on the toolbar.jpg

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.

wide3.png

Make Your Videos Stand Out with amazing effects

"Body" effects and "Anime Face" effects feature UI

1. Master Video-tap AI Effect.jpg

Tap AI Effect.

2. Tap one Anime Face Effect to apply to video.jpg

Find an Anime Face Effect which you want to apply.

3. Full-screen progress.jpg

Full-screen progress bar.

If users want to stop and re-select other effects, they can click the "Cancel" button below.

4. Apply the Anime Face Effect.jpg

Apply the Anime Face Effect.

5. Tap Body Category.jpg
6. Tap a body effect to apply to video.jpg
7. Display adjustable parameters of the effect.jpg
8. Tap Back.jpg

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

1. Tap the independent entry.jpg
2. Select a template.jpg
3. Tap Try Now.jpg
4. Select a clip to apply the template effect.jpg

Tap "AI style" button on the launcher.

Select a template that you want.

Tap "Try Now"

Select a clip to apply a template effect.

6. Tap Produce.jpg

Apply the effect, press the "Produce" button on the top right.

7. Display the proudce setting panel.jpg

Display the produce setting panel.

9. Produce complete, and choose to share video.jpg

Produce completed, choose to share video.

10. Tap Crop & Range.jpg
11. Select the range.jpg
16. Tap Done to finish.jpg
16. Tap Done to finish.jpg

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

Stage2_1. Tap Cutout.jpg
Stage2_2. Tap Change Background.jpg
Stage2_3. Show bg thumbnail panel_Dynamic.jpg
Stage2_4. Show bg thumbnail panel_Static.jpg

Tap "Cutout".

Tap "Change Background".

Show background thumbnail panel, default option is "Dynamic".

Switch to "Static" option.

Stage2_5. Tap Add.jpg

Tap "+" to add phone's gallery and online gallery 

Stage2_6. Add the background.jpg

Find background image you want

Untitled.jpg

Added a new background image to replace the original photo

If the cutout effect is applied to the Picture in Picture track

Stage2_8_1.-PIP-track_Tap-Cutout.jpg
Stage2_9. Tap Background & Stroke.jpg
Stage2_11. Apply the effect.jpg

The above is to select

color of the background image.