Media Player App

PowerDVD

The best full-featured video editor and

video maker

Unleash the Full Potential of Your Media Collection on TVs and Laptops

Platform for Windows

About

"CyberLink PhotoDirector is a powerful photo editing software that provides a wide range of features and tools for users to enhance and manipulate their digital photos. It offers intuitive and easy-to-use interface with advanced editing capabilities, allowing users to create stunning images that stand out. With its extensive range of editing options, from basic color correction to advanced effects and layer management, PhotoDirector is a popular choice for both amateur and professional photographers. Whether you are looking to retouch photos, create photo collages, or add special effects, PhotoDirector provides the tools you need to take your photography skills to the next level.

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.

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

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 PhotoDirector

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

To enhance the user experience and improve the discoverability of new features, we have optimized the launcher UI for PhotoDirector.

The launcher now has two sections, with the top area dedicated to showcasing new features. Users can quickly and easily see what's new and even "try it now" with just one click. This streamlined approach not only saves time but also ensures that users always have access to the latest features and functionalities. We believe that these improvements will greatly benefit our users and help them get the most out of the PhotoDirector application.

Here shows comparison of the original one (left) and the updated version (right) >>>

Added feature tryout on top of launcher

1/2

The launcher of updated version

Refinement items and New launcher

In order to interact more with users, we redesigned a new launcher and added our social media platform in it, also added more cool demos and video tutorials to have more interaction with our users.

Adjusted the new feature tryout part, placed it at the top of the new launcher, and users can scroll down to learn more and try out different features or new content design, ex. filter, sticker, collage..etc.

Rearranged button allocation on launcher which integrated related edit buttons together, based on user feedback and rethink user flow for users easily to use.

Added tutorial videos to show how to do cool demos. ("Explore" category in launcher)

Added social media elements info and cool demos on it. ( "Get inspired" category in launcher)

Keep optimizing launcher

scroll down

Keep to adjust items:

In order to strengthen the promotion of new features and element content, we enlarged the "Feature tryout" image area at the top of the launcher to make it more visually attractive, catching the user's and pushing them to try it out.

Rearrange the button assignment on the launcher, highlight and enlarge the edit button which is most commonly used by users. Since there's already a lot of colors in the launcher, we make the button in dark gray with white icon, so that button can stand out.

According to users' surveys, we optimized the sorting order, moved the items with low usage rates such as “watching tutorials”, “Instagram”, “youtube”...etc., into the hamburger menu, and changed to place more element items which use more by users. Moreover, update monthly so that users can use the new and cool elements to their photos easily and faster, and to motivate users to pay for subscriptions.

scroll down

Design style for PhotoDirector 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 PhotoDirector App

Example

PhotoCollage issue

Optimize user flow of applying the collage template

If users select template, cannot re-select a different photo again, apply on this template

How to use collages (the before version)

Tap "collage" button on launcher

Enter store Page and select collage which you want

Open "Photo library", select the photo which you want, and press the confirm button in the upper right corner.

Apply template to selected photos.

Issue: If user wants to re-choose photo, press "x" button in the upper left corner and can re-select the photo

Refinement UI flow of collages

After that, more editing photo related features were added, such as swap, rotate, horizontal flip, vertical Flip, filter and adjust image tools to make users' experience better. At the same time, each icon arrangement is decided according to the user's usage rate.

Change category of selected template

Adjust control panel color to keep visual consistency of overall UI style.

In order to fix that users cannot re-select other photos when already chosen, we've added a replacement photo feature, as long as users click on the photo, the feature menu below will show the "replace" button and other photo editing related features.

Example

Photo Frame issue

Simplify Frame Applying Flow

1. Reduce the process of multiple times open/close for users.

2. UX consistency.

Using process optimization

The original UI flow

Refine UI flow

The original UI flow

Press "Frame" feature and select the frame pack which you want, then find "Retro" frame cover.

Press "Retro" cover thumbnail and all Retro frame templates will pop up.

Refine UI flow

Press the "tab" option in the upper half to switch different frame packs, and can find corresponding frame templates.

Frame

pack

Frame templates

Issue:

All "frame" template packs are opened (pop-up) and closed (merge) on the same row. If users choose a lot of "frame" packs at the same time, it is easy to cause level confusion.

Ps. Press "frame" pack cover is the first level.

Pop-up all frame templates is the second level.

Use the upper and lower parts to distinguish different levels, divide "frame" pack cover and corresponding templates into upper half and lower half to simplify the process between different levels.

Users can easily switch tabs to find the template they want to use.

UX consistency in other features

Refine Frame UI

Text Style

Text bubble

Element

Example

Portrait tools issue

Optimize the UX flow when applying the Portrait Tools

Need several steps to adjust the people’s eye bags.

The original process of using portrait function

Tap “Portrait Tools” button

Go to Portrait Tools room, tap “Eye Bag Removal”.

Go to another room to adjust the eye bag, and tap “Choose Face” to adjust another person’s eye bags.

Tap “Add undetected faces”.

Tap on the face you want to add.

Adjust the face, and tap “OK”.

Tap “Done”.
(Tick in upper right corner)

Adjust the eye bag.

Tap “Done”.
(Click in upper right corner)

Refine portrait UI flow

Use the sheet design to adjust
different features easily.

Show the menu directly when
Tap “Portrait Tools” button.

Tap “Portrait Tools” button and select “Eye Bag Removal”.

Show up the sheet menu, and adust the eye bag for people A.

Tap “Add undetected faces” to adject another people B ’s eye bag.

Tap “Done” to go back.

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.