Redesign a friendly, elegant, and consistent interface for Polarr Photo Editor V6
Polarr is an AI photography startup with 4 million MAU, funded by Threshold Ventures(DFJ), we provide creative and professional tools such as Photo Editor, 24 FPS, Album+, Aura, Memoir to help people create their unique work.
Brief
Over 2 million photographers worldwide use Polarr Photo Editor every month to create amazing works. In this project, we have made a big upgrade and released the new selection tool with edge-aware capability, allowing you to quickly select and edit the object in the photo.
Due to the new feature released, the user flow was changed, and the interface was also redesigned simultaneously.
Due to the new feature released, the user flow was changed, and the interface was also redesigned simultaneously.
Role and Collaborations
As the Polarr Photo Editor's principal designer, I directly discussed with the CEO and engineer team to explore new functions' flow, interface, and responsible for user testing. Also, I was independently responsible for building the whole massive design system and redrawing all the icons within 3 months.
*Special Thanks:
Lead designer: Lara, give me many suggestions during the project.
Customer Support and Marketing: Ye and Tiger, help me recruit and conducted many user testing.
*Special Thanks:
Lead designer: Lara, give me many suggestions during the project.
Customer Support and Marketing: Ye and Tiger, help me recruit and conducted many user testing.
Company / Product
Polarr / Photo Editor
Timelime
2018-2020
Team
Senior Product Designer - ShaoPing Chen
Frontend Engineering Team - Sean
iOS Team - Daniel
Frontend Engineering Team - Sean
iOS Team - Daniel
Platform
Web, iOS, Android, Desktop
Tools
Figma, ProtoPie, Principle, Overflow
Pain Point
🔍 Discoverability
Many features are hidden too deep, and users were not aware of them.
🤯 Complex UI
The interface is too complex for beginners to get started; many new users give up.
🌀 Low Efficiency
The operation doesn't fit the user's mental model and is difficult to control.
Goals and Metrics
Goals
1. Make it easy for the beginner and enjoy the powerful tools.
2. Let old users and professional users editing photos more efficiently.
3. Keep simple, consistent, and elegant design to show our modern branding to users.
Metrics
1. Key task's success rate and duration in the user testing.
2. New features' adoption rate.
3. Retention after release.
4. Increase the number of photos saved and exported.
5. User satisfaction.
Outcome and Impact
During user testing, users agreed that the new interface was better and easy to use.
The youngest testers, less than 10 years old, could use our features and complete tasks.
Featured 21 times on US' Apple Store and 17 times on China' Apple Store after released.
Exploration
New Selections Tool and User Flow
We were tried to move up the hierarchy of some powerful features to solve the discoverability issue, then added a new selections feature that will affect the existing operation logic. We need to avoid letting the product get complex as Photoshop, so we discussed many solutions and interaction behaviors.
*Made by Figma.
Selections Prototyping
1. Onboarding tips teach users can use the Smart Selections tool.
2. PPE will auto-create selected areas for the recognized objects, such as a face, sky, people, etc.
3. Users can also manually add a selection area by brush.
4. Auto-selected the sky, then replace the background.
Slider Bar Prototyping
The original slider controller is confused and didn't fit the mobile app's mental model, so I explored different styles and made a high-fi prototype to do user testing.
👉 Try Prototype (Tap on header can switch the UI)
👉 Try Prototype (Tap on header can switch the UI)
Old Color Tool
New Color Tool Ideation
Prototyping
Design System
It wasn't just creating a visual style guide; I rebuilt all the components, rethinking all interaction and controllers to enhance usability and get rid of outdated designs.
Old / New UI Compare
Main Page
Although it keeps the minimalist style, it's hard to find a feature, and the order is not very reasonable.
The icons are bigger and clearer with caption and move the same functionality button together.
Filters
The thumbnail is too small; the user has to keep clicking back and forth on the filter to check the results.
Adding 3 types of view: single, columns, grid; and use tabs to display categories.
Color Adjustment
The old's slider bar is difficult to control and confusing.
Users can easily control the value and switch tabs to other features.
Face Tools
The hierarchy of elements is distributed, which hard to find the feature.
Use tabs to replace the original buttons and reduce page hierarchy.
Curvers
UI elements cover parts of the image, and the click area of the toolbar is tiny and unclear.
More consistent and have enough space to control.
Tools Menu
The problem here is that categories aren't suitable and take up too much space.; also, users' didn't aware of its scrollable.
Re-order the icons by the user's needs and take space more efficiently, move powerful features out but not hidden on the tools page.
Takeaway
Prioritized Task —
This project's scope is vast, including usability optimization and designing new features in the same release. It causes long development cycles, and we spend too much effort on it but didn't break it down and roll it out gradually.
Although we have enough confidence in user testing, slow and steady might be high risk in the startup environment.
Although we have enough confidence in user testing, slow and steady might be high risk in the startup environment.
Micro Usability Testing —
We did a lot of user testing with people from different countries; some of the testings were spent a long time and money, but I found leverage micro usability testing might be more efficient to get feedback early and enough for us.