Photo Editor App
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."
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.
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
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.
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.
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
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.
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.
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) >>>
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.
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.
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.
scroll down
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.
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.
Original version
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
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)
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
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)
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.
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
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
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.
How to generate magic avatars with the Best AI Photo style
"AI Style" feature UI
Users can use editing tools to adjust the image, eg. using crops to increase face proportion.
Tap “AI Style” icon on the toolbar.
Tap different categories to select different AI effects.
Adding image detection function, which will detect face proportion in photo, if it’s too small for applying effect, users will be reminded to enlarge it for further editing.
Apply AI effects
How to retouch Portrait Photos
"Eye Reshape" feature UI
Tap “Portrait” icon on the toolbar.
Then enter face editing tool.
Tap “Eye Reshape” icon.
If there are several people in the photo, users can click "add undetected face"
to switch the eyes of different people.
Here are many tools for editing portraits.
How to add different text effect or styles on Photos
"Text UI" feature UI
Tap “Text” icon on the toolbar to add text to the photo.
After entering text editing, the default settings will be in "presets" first, users can choose “Background” and “Colorful” effects they want.
Switch to "Colorful" option.
Switch to "Font" option. Users can select more different font.
Switch to "Styles" option. Users can edit color, format, border, shadow and shape.
After clicking the text on the photo, users can re-edit the content.
How to apply more filter effect to Photos to let photo more attractive
"Filter" feature UI
Tap “filter” icon on the toolbar to change different photo color tones.
Switch filter and effect at the bottom, and find the preferred effect to apply.
Entering the store to find more filters. We also redesigned the new store, using larger thumbnails and sample demos to increase user usage rate.
Previous
Current
Added different sample thumbnails for filter and effect categories
Filter
Efffect
Color setting list for filter and effect categories
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.
