top of page

PhotoDirector Mobile

Photo Editor & Pic Collage Maker

Platform for iOS and android


Whatever you want to create with your photos, PhotoDirector is one of the best free editing apps for pictures. Stylize, edit photos, and animate them all in one easy-to-use app. With precision editing tools, you can make essential lighting and color adjustments, crop, and add one-touch looks to transform every detail of your photo editing. Plus, with powerful Photo Animation tools, you can bring your images to life with natural-looking movement. Use Animated Decorations, Sky Replacement, and Object Removal tools and create a wonderful array of photo edits ! 

Role and Duty:

• Defined user interface guidelines, visual style and work with designers to standardize UI style guides.

• Work with RD to develop special effects of the App together. At the same time, lead designers to

  produce content design, such as filters, stickers, collages...etc.  For users to use it and let their photos

  more attractive.

Planned and discussed user flow and functions of new features with PM and RD according to the spec.

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

Keep product feature UI updating, and also optimizing launcher design

Optimized launcher

In order to let users get more info of new features more easily and quickly, we decided to optimize the launcher UI, which is divided into two areas, on top can find out the new feature and can also “try it now” easily and quickly.

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


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 social media elements info and cool demos on it. ( "Get inspired" category in launcher)

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


scroll down

Keep optimizing launcher 

Keep to adjust items:


scroll down

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

Organizing design system for PhotoDirector Mobile


Keep optimizing UI design for each new features release


Press "Edit" button on launcher/ Switch "Photo" or "Stock" tab to choose photo which you want.

Slide the toolbar at the bottom, find the editing function that you want, and start editing.

(example image is using the portrait tool)

How to start editing photo

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)


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


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.


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.


Refinement UI flow of collages


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 templates 


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



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

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.

Frame 4814-1.png

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

Frame 4822.png

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.

Vector 370.png
Rectangle 867.png
Vector 370.png
Rectangle 867.png

Use the sheet design to adjust
different features easily.

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

Keep adding new feature for each new version release


How to generate magic avatars with the Best AI Photo style

"AI Style" feature UI


Tap “AI Style” icon on the toolbar.

Tap different categories to select different AI effects.

Users can use editing tools to adjust the image, eg. using crops to increase face proportion.

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.

Frame 815-5.png

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.




Added different sample thumbnails for filter and effect categories





Color setting list for filter and effect categories

Group 821.png

How to purchase

bottom of page