top of page
top_banner_4.png

Photo Editor App

PHDM_logo.png

PhotoDirector

Photo Editor & Pic Collage Maker

Google Play "Ranking first in consumer satisfaction with

     the highest average rating of 4.6 in the photo editing category"

Platform for iOS and android

About

"CyberLink PhotoDirector is a powerful photo editing software that offers users a wide range of features and tools to enhance and process their digital photos. With an intuitive and user-friendly interface, as well as advanced editing capabilities ranging from basic color correction to sophisticated effects and layer management, PhotoDirector takes photo editing to the next level.

In recent years, the increasing popularity of sharing fun photos on social media has led to the emergence of numerous similar applications, impacting PhotoDirector's competitiveness and resulting in a decline in downloads and user ratings. To elevate our product, we have focused on user feedback, addressing user experience and needs, to enhance PhotoDirector's competitiveness and drive download growth."

line4.png

Challenges

PhotoDirector is a long-established and powerful application. Despite continuously introducing new features, it has lacked ongoing attention to user experience and interaction with users. Over time, the interface of PhotoDirector has remained largely unchanged, failing to keep up with current design trends. As a result, compared to its competitors, its launcher design appears outdated and lacks a substantial amount of content design to complement its offerings.

In response to these challenges, we conducted in-depth research on modern user preferences and habits, particularly among younger demographics, and found that they tend to prefer sharing and interacting on social media platforms. Therefore, we decided to incorporate missing social media elements to enhance user engagement. This includes features that allow users to share their creations and artwork with others, as well as real-time social interactions such as commenting, liking, and sharing.

In addition to social media elements, we also recognized the importance of content design in attracting users. Consequently, we allocated more resources to develop a diverse range of creative and appealing content design options to cater to various user needs and tastes. These content designs empower users to effortlessly create unique photos and videos, elevating their creative experience and encouraging them to share their work on social media platforms.

Working closely with product managers and the engineering team, we are committed to making improvements and optimizations to revitalize PhotoDirector, making it more appealing to a broader audience, especially among the younger demographic, while maintaining its attractiveness to middle-aged users. This ongoing effort reflects our dedication to providing a high-quality user experience.

line2.png
PHD_UI_phone_1.png

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

Tools

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

Design Process

To clarify the problem and analyze the solutions, we adopted the steps of the Product Design Thinking process: Understand → Research → Analyze → Design → Test. Utilizing feedback from current users to understand their pain points and needs, we collaborate with product managers, development teams, and revenue teams to achieve organizational goals and meet user needs.

Understand Problem / User Pain Points

We started by conducting a user survey and collecting user feedback from our customer service team. This allowed us to understand the purposes and backgrounds of users when editing photos, as well as the pain points they encountered during the process.

Launcher looks simple and plain

The launcher design of "PhotoDirector" appears outdated compared to its competitors. It lacks richness and attractiveness, hindering its appeal to younger audience.

Lack of social media popular content design

PhotoDirector offers many content designs, including stickers, filters, frames, collages, and more. However, these designs tend to lean towards traditional styles and lack the variety needed to keep up with the trending sharing styles commonly used on mainstream social media platforms.

Confusing Function and Content Categorization

PhotoDirector offers a wide range of functions and content designs, including filters, effects, stickers, and collages. However, at times, the categorization and layout can be confusing, making it difficult for users to quickly locate and utilize these features based on their categories during the editing process.

Insufficient functionality and lack of smooth operation.

PhotoDirector lacks continuous optimization and enhancement for many of its functions, resulting in a subpar user experience during usage. As a result, it lacks competitiveness, leading to a gradual decline in user engagement.

Diving into research

Through continuous collaboration with product managers and monetization teams, we actively integrate user feedback, analyze product usage data, and conduct competitor analysis to understand customer and market demands. These research efforts enable us to gain a clear understanding of our objectives and devise strategies to address critical issues, thereby enhancing our product and services.

Research
methods

User Research

Competitor Analysis

Customer Interview

Usability Testing

Information Architecture

Research goal

• Understand the user's first interaction and usage process when opening the app's launcher.
• Identify the most frequently used features by users during photo editing.
• Analyze the sequence in which users commonly utilize content designs.
• Investigate the challenges and issues users encounter while editing photos.
• Conduct a comparative analysis with competitor's products, including UI design and content.

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.

PhDi3.jpg
PhDA_3.jpg

Through data analysis, we can understand the usage rates and preferences for content designs on both iOS and Android platforms. This helps us evaluate which content designs to adopt in order to improve efficiency and meet user needs on both platforms.

content_plan2.jpg
Comparison_9.jpg

Regularly conducting user surveys allows us to understand the features and preferences that users desire the most. Additionally, through comparing with our competitors, we can evaluate the specifications of our features and set optimization goals.

Analyze

Competitor analysis

Continuously analyzing key features and comparing with competitors such as Motionleap, Filto, Prequel, Picsart, and Meitu, we can identify functionalities that require adjustments and enhancements to strengthen our product's competitiveness. Additionally, we conduct analyses based on user demographics and age groups to understand their preferences and make timely adjustments to the product's tone and direction, thereby increasing user engagement.

Age Analysis

We found that users aged 25-34 contribute significantly higher as paying customers, especially on the iOS platform. Although there are more young users in the 18-24 age group, most of them prefer using the free version, resulting in a lower conversion rate to paid users. This indicates that young users are our potential customer base. However, if we want to achieve higher revenue or conversion rates, we need to target more mature age groups.

 If we want to have higher revenue or conversion,

   we need to target more mature age users

Conversion Rate Analysis

Through data analysis, we have discovered the differences in conversion rates between the two platforms. In Android, the conversion rate among females is higher (approximately 2 times), while in iOS, the conversion rate among males is higher. Although the difference is not substantial, if we aim to achieve higher revenue or conversion rates, targeting female users would be necessary.

 If we want to have higher revenue or conversion,

    we need to target Female users

Comparison_6.jpg
Comparison_8.jpg
Comparison_7.jpg

Actual user requirements

Preference for Content Designs Applicable to Social Media Platforms

According to user feedback data, we have found that over 60% of users most frequently click on features related to content designs when editing their photos. This indicates that users enjoy applying content designs, which allows them to effortlessly and quickly add unique styles to their photos before sharing them on social media platforms.

We can plan to showcase before-and-after comparisons of content design usage to attract users' attention and encourage them to try it out, thereby stimulating subscriptions.

More Intuitive and Modern Launcher Requirements

We have observed a significant number of young users, aged 18-24, using our app; however, most of them are utilizing the free version. According to the feedback from surveys, these young users find the current PhotoDirector launcher less engaging and somewhat outdated compared to our competitors.

We plan to revamp the launcher, incorporating popular social media features and content design.

The categories and quantity of content design can be more diverse

According to a comparison with our competitors, we have observed that PhotoMaster offers a relatively smaller variety and quantity of content designs, which affects our competitive edge. Additionally, based on user subscription data, female users have a purchasing rate twice that of male users. This suggests that we should focus more on content design and demo thumbnail towards the female demographic, as they represent our primary target audience.

We should focus more on content design and demos tailored towards the female demographic, as they represent our primary target audience.

Organization objectives

User Subscription rate

We have been working hard to provide various subscription plans. However, compared to our competitors, we found that too many options might confuse users. To address this, we have shifted our focus to highlighting annual subscription discounts and frequently conducting promotional strategies during specific events to attract users to subscribe. We also regularly update visual ad banners and thumbnail effects to capture user attention for subscriptions.

Additionally, we have observed that users may encounter excessive pop-up windows when accessing premium features that require payment. These pop-ups include subscription offers and feature unlocks, negatively impacting the user experience. Therefore, we recommend minimizing the frequency of pop-up windows throughout the entire user journey to streamline the overall user experience.

Implementing UI refinement design

Through user research and strategic analysis, we have identified the design needs for optimization, including redesigning the launcher page, subscription page, and improving features related to content design.

Once the new designs are completed, we will conduct iterative internal user usability testing and optimization, while also tracking user usage data to ensure that the optimization aligns with user needs, ultimately achieving an enhanced user experience.

• New launcher page

• Subscription page

• Optimize feature flow related to content design

Functional map of PhotoDirector

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.

PHDM_4.drawio.png

Review flowchart

We have reviewed and redesigned the flowchart of the launcher, aiming to assist users in easily opening the application, accessing the launcher, and gaining a clearer understanding of how to start using it. We drew inspiration from PowerDirector's new approach, categorizing user behavior into two types: those who already know how to edit and those who need high-quality demonstrations to inspire editing ideas. As a result, we divided the launcher into two sections: one for "Direct Editing," encompassing new feature trials, new content trials, and editing tools; the other for "Exploring Creative Inspiration," including IG demos, content collage designs, YouTuber channels, and tutorials. By analyzing the click rates for each section, we can identify the most essential user needs and adjust the launcher based on user interaction data to better meet their requirements.

flow_chart2.jpg

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/ early stage

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

01_1.jpg

The launcher of updated version

Refinement items and new launcher

Based on the previous user data analysis and to enhance interaction with our younger user demographic, we have redesigned the new launcher. We have added our social media platforms and incorporated more captivating demos and video tutorials to encourage greater engagement with our younger users. While aiming to attract more young users, we have also considered maintaining a high conversion rate among middle-aged users. Therefore, after thorough discussions, we decided to retain the black background for a sense of stability, rather than opting for the white background preferred by younger users. We intend to attract the younger demographic through social media and demo thumbnails.

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

Based on user's data feedback :

For the newly revamped launcher, data analysis on user usage patterns revealed that the "Get Inspired and Explore" social demo did not perform well in attracting young users, resulting in a low click-through rate.

Most users access the launcher with the main intention of directly using the photo editing tools, followed by trying out representative features and templates, all of which fall under content design. This indicates a high level of user appeal towards content design. Based on the data analysis, we will further optimize the launcher by enhancing the content design section.

Among the existing users who enter the launcher:

"Trial with new features represents interest in

new content design : 
32% of users click to try new features."

Using the editing tool area means the user wants to directly select the photo to edit : 

‧ 40% click on the Editing tool.

Promoting social media images.

‧ 8 % click on Get Inspired and Explore.

"Selecting the template design means that users are attracted by the content design: 12 % click on it."

Tutorials / Tutorials / Youtube / IG / Produced Videos / Settings

‧ 8 % click on it.

PHD_launcher1_1.jpg
PHD_launcher1_2.jpg

keep to optimize flowchart of new launcher

Based on user data, we have further optimized the launcher flowchart. Through feedback from clicks, we have gained a deeper understanding of the significance of content design to users, accounting for approximately 40% of total clicks. When combined with the editing tools section, it encompasses almost 85% of the overall user interaction. Conversely, features related to social media have shown lower click-through rates. Additionally, we observed that photos edited using the "Direct Edit" tools apply content designs before final output, further underscoring the importance of content designs to users.

 

Leveraging this data, we strategically placed the most frequently used content designs within the launcher. Adjusting their position based on user preferences ensures encountering the latest content designs upon entering the launcher. Simultaneously, we expanded the display area for content designs, providing users with a larger layout that allows for a clearer view of more detailed content design elements.

flow_chart3.jpg

Keep optimizing launcher 

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.

single_detail_01.png
single_detail_a02.jpg

scroll down

design_style_icon_6.png

Design style for PhotoDirector Mobile(keep going)

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. 

design_style.png

Optimized subscription page

We have optimized the subscription page as it directly impacts our revenue. Based on user feedback and a comparison with our competitors' subscription pages, we have implemented the following improvements:

Additionally, we are dedicated to continuous improvement. We will utilize AB testing to assess and fine-tune the subscription page design, aiming to further increase the subscription rate and enhance the overall user experience.

We realized that having too many subscription plans was causing confusion among our users. To address this, we redesigned the subscription plans and reduced their number, presenting them in a clear and straightforward manner. We also emphasized the discount percentages to attract customers and increase the subscription rate.

Compared to competitors, PhotoDirector's subscription page was lacking visual impact, so we added a top promotion banner for a more eye-catching display. This banner can be updated to reflect seasonal promotions.

We enhanced the user viewing experience by introducing a carousel of thumbnail previews that showcase advanced features. Also, we regularly update or replace the thumbnails with new features to grab the attention of our customers.

mobile_iap_old2.png

Original version

mobile_iap_new3.png

New Subscription page

Good Results

We optimized the user experience through the design thinking process, user interviews/surveys, and data analysis. We redesigned and improved the launcher, subscription page, and continuously optimized content design and UI interface to make the content design more attractive and the user flow more convenient.

As a result, we achieved excellent ratings on Google Play Store, and both download and subscription rates significantly increased, surpassing our expectations and even exceeding next year's targets by a large margin. Moving forward, our goal is to attract more young users and convert the free user base into subscribers.

Google Play Store's excellent rating

截圖 2023-07-31 下午12.26.08.png

In Google Play Store, it has received a rating of 4.6 based on 887K reviews. Similarly, in the Apple Store, it has an excellent rating of 4.7. It ranks 7th in the "Photos & Videos" category.

Strong Growth in Total Download Rate. (YoY)

CL-3.jpg

Subscription revenue exceeded expectations and even reached the target set for next year.

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)

sample_collage_4.png
sample_collage_N1.png
single_detail_a03.png
sample_collage_6.png

Refinement UI flow of collages

sample_collage_7.png

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.

tool.png
toolbar2.png

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.

single_detail_01.png

Tap "collage" button on launcher 

sample_collage_5.png

Enter store Page and select collage which you want

single_detail_b01.png

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

single_detail_b02_b.png

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

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

PHD_Frame_3.png

The original UI flow

Refine UI flow

The original UI flow

sample_detail_1.png
sample_detail_2.png

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

sample_detail_3.png
sample_detail_4.png

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

sample_detail_3.png

Refine Frame UI 

sample_detail_03.png
sample_detail_02.png
sample_detail_01.png

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

Frame 4814.png

Tap “Portrait Tools” button

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