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