Pixocial
Summer Intern
During my internship, I contributed to developing AI-powered web tools aimed at simplifying image and video editing for non-professional users. This project not only enhanced accessibility but also successfully drove traffic and engagement to our app ecosystem.
DURATION
Summer 2024
MY ROLE
UX/UI Design
User Testing
SOFTWARE
Figma
AirBrush/BeautyPlus/BeautyPlus Cam/SnapID
Web-based AI
Tool Box
Focused on developing a series of AI-powered online media editing tools, designed to provide simple and user-friendly editing solutions for users who lack experience with professional software. At the same time, these tools enhance interaction on the brand’s website and effectively promote app downloads and brand exposure.
Business Background
Pixocial has a well-established suite of media editing app brands with a large, loyal user base across various platforms.
Each app and brand has its own website, and we’re expanding our reach by introducing AI-powered web tools to attract new users and drive traffic back to our apps.
Internship Responsibilities
Photo Editing Web Tools UX/UI Design
Project Timeline
VID Enhancer
June
IMG Enhancer
June
VID Watermark Removal
July
AI Anime Generator
July
IMG Format Converter
July
IMG Background Removal
August
VID Background Removal
August
IMG Expand
September
Magic Eraser
September
Complete Flow Design
Design Collaboration and Iterative Refinements
Cross-Platform Design Adaptation
User Research Design
Core Values of AI Media Editing Tools
Universality
Reducing operational complexity to meet the needs of non-professional users.
Efficiency Improvement
Automation and fast processing improve accuracy and efficiency.
Innovation
AI enables innovative and personalized media outputs.
Cross-platform & Cloud Processing
Cloud processing allows high-quality media editing without requiring high-performance devices.
Business Goal
The ultimate goal is to increase long-term user engagement and retention by integrating innovative AI tools that seamlessly blend with our app ecosystem.
App Traffic Generation
Increasing the number of app users and boosting engagement.
Enhancing Brand Awareness
Improving market recognition through innovative tools and user interaction.
Product Positioning
By aligning the core values of AI media editing tools with our business goals, we defined our product positioning as fast, frequent, and concise, ensuring efficiency and user engagement.
Short
Frequent
Fast
User Experience's Perspective
Streamlined tasks, allowing quick completion.
Encourages regular use through user-friendly design.
Quick loading and processing for smooth experiences.
Market’s Perspective
Short development cycles,
Rapid feature releases to adapt to market changes, boost user engagement, clicks, and Google rankings.
Design Goals
1
Task Flow
Seamless guidance, Simplified steps, Reusability
2
Functionality
Easy to understand, Error prevention, Holistic thinking
3
Visual Presentation
Clear hierarchy, Brand consistency
AI Anime Generator
On BeautyPlus
This tool transforms photos into anime-style images in seconds. Designed with simplicity and creativity in mind, it ensures a smooth user experience, allowing users to effortlessly generate personalized, artistic content.
Filter Preview Display Optimization
Previous Option 1
Pros
Allows previewing all different effect cover images simultaneously.
Clear intention: step-by-step process.
Cons
Only small-frame-size previews available
Previous Option 2
Pros
Bigger frame size preview
Clear intention: Automatically applies the currently selected filter after uploading your image
Cons
Inefficient if there are many avatars, requiring multiple page turns
Final Decision
Pros
Able to display more avatar covers while maintaining a larger preview frame.
Button text is revised to suggest the currently selected filter will be automatically applied after uploading.
Filter Price Badge Design
In the AI Anime tool, I designed three distinct badges to clearly indicate the price of paid, already purchased, and free filters. The introduction of the "Purchased" badge provides a clearer indication to users, reducing the need for additional prompts or notifications within the workflow.
Limited trials
To optimize cost control while driving app downloads, our web tool offers users three free filter trials. In the second iteration of the design, I implemented several UX strategies to enhance user awareness and maintain flow.
Image Expand Iteration
Version 1 - 2 Optimizing Layout for Single-Purchase
Version 2: Auto-Redirect to Result Tab
Pros
Allows easy comparison of multiple generated images.
Organized history of results.
Cons
Workflow interruption as users must switch between tabs.
Version 3: Unified Editing and Generating Workflow -
More suitable for single-image generation.
Although these tools have distinct functionalities, our design approach remains focused on creating reusable workflows, components, and systems that ensure efficiency and consistency across the platform.
How did we ensuring Design Consistency & Reusability?
Copywriting
Components
Visual Elements
General Workflow Structure
Different loading components
Color System
I unified and optimized the color system across four different brands. By switching modes in Figma, quick adjustments can be made, greatly improving the efficiency of future design and development work.
Button System
Created a button system with various states and levels, enabling quick switching through the use of component variants.
Cross-Platform Adaptation
Web and Mobile
Due to the differences in screen size and user habits between mobile and desktop platforms, our tool required different design decisions. For example, the before & after comparison feature in video enhancer.
Web
On mobile, especially with vertical videos, the crucial download button could be hidden if both versions were displayed on the same page. To address this, we used a switch toggle for before & after comparisons on the mobile version.
Mobile
User Testing Strategy
UserTesting.com Tasks (New Users)
Engaged new users using the Think-Aloud Method to gain insights into their thoughts, reasoning, and decision-making processes as they interacted with the product.
Insights Gained:
Uncovering initial impressions, usability challenges, and understanding the cognitive process behind their interaction with the product using the Think-Aloud Method.
Google Forms Survey
(Paid Users)
Targeted paid users to gather feedback based on their experience with the product.
Insights Gained:
Understanding why users are willing to pay, what features they value most, and identifying any pain points in the paid experience.