PowerDirector Mobile

The best full-featured video editor and video maker

Platform for iOS and android

Unleash your creativity. Create high quality professional videos – fast.

PowerDirector is built with speed and utility in mind. Optimized on all devices, editing is smoother, snappier and more fun. Explore your imagination and create visually stunning videos, wherever and whenever you need.

Whether you’re creating cinematic style movies, videos of your latest adventure or using a green screen to share exciting, memorable moments, PowerDirector is the perfect video editor for you.

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.

• 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 PDR. Meanwhile, keep developing advisor new UI design for each new feature release.

Keep product feature UI updating & optimizing launcher design.

Site Map of PowerDirector

Optimized launcher and main UI design

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

Title Designer

Added Music

Produce Video

Title Designer

1/3

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.

Main UI of landscape mode

Added video to timeline

Show toolbar to find edit tools

Main UI of landscape mode

1/3

New Main UI of landscape mode

Main UI for portrait mode

Added video to timeline

Open edit detail page

Main UI for portrait mode

1/3

New Main UI of portrait mode

Design style for PowerDirector Mobile

Keep optimizing UI design for each new features release

How to start editing video

Press the "+ New Project" button, and choose "Project Aspect Ratio" which you need.

Add Video of Shutterstock or select different material in stock, then add videos which you want to edit.

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

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.

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.

Refine the flow of selecting video clips material

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

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.

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.