Check out my presentation slides about content design & redesigning Magic Hour's Face Swap flow here!
01 INTRODUCTION & CONTEXT
What's Magic Hour?
Magic Hour is an AI-powered video creation platform designed to simplify and accelerate the video creation process. The platform caters to a wide range of users, including content creators, marketers, educators, and small businesses. Magic Hour (YC W24) provides a suite of AI-powered tools for video and image creation, including:
Text-to-Video: Generate videos from text prompts.
Face Swap: Seamlessly replace faces in photos or videos.
Lip Sync: Make characters speak any audio.
Animation: Create stop-motion-style animations.
AI Talking Photo: Animate photos to make them speak.
Image-to-Video: Convert still images into dynamic videos.
Founded in 2023 by longtime friends Runbo Li and David Hu, the company is based in San Francisco and was part of Y Combinator’s Winter 2024 batch. I joined Magic Hour's team on March 15th as a Design Intern.
Try it out!
Swap your face with Magic Hour's Face Swap Feature! Note that this is the landing page version of the feature! I redesigning the product flow of users who already have an account.
02 pROBLEM
Enabling more people to create successful face swaps...
The Face Swap Product Flow is Magic Hour's most used feature and their feature page is the page that converts the most users from the free plan to a premium plan.
Magic Hour’s face swap tool uses advanced AI to detect and replace faces in videos or images. It works entirely online—no downloads needed—and supports both personal uploads and YouTube links.
The Face Swap Product Flow is Magic Hour's most used feature and their feature page is the page that converts the most users from the free plan to a premium plan.
Magic Hour’s face swap tool uses advanced AI to detect and replace faces in videos or images. It works entirely online—no downloads needed—and supports both personal uploads and YouTube links.
03 rESEARCH & PLANNING
Synthesizing preliminary user tests
Magic Hour already had a summary of previous usability tests including 12 screen-recorded users using the "think aloud method and their transcripts.
After watching the videos and parsing through user comments, I noticed that the majority of user dissatisfaction came from one of these three pain points:
01 Confusing UX
Which software needs to be installed? How can this information be obtained?
02 Lack of Cost Transparency
Users are only told about potential price warnings after they have completed the entire flow?
How might we redesign the Face Swap Video product flow to increase the video generation success rate?
How do I best tackle this problem?
This was my first project as a remote designer that's relatively open ended in how I can approach it. I was concerned with a/b testing and the amount of additional work it would take for Runbo and David to implement. Although Runbo said a/b testing wasn't as strenous and I thought, we decided to go with creating Figma prototypes and conducting user tests using my prototypes.
Early stage design goals
01 Minimalistic output, advanced features
“what is the minimum we can show the user to ensure they get what they’re looking for, while still preserving advanced features but only showing them for the users who want it?”
02 GPU considerations & multi-face swap
How is this software installed? Which set of instructions do I follow?
04 PROTOTYPE, TEST, EVALUATE, REPEAT
Flow 1 & 2: To dropdown, or to not dropdown...
I made two low fidelity prototypes, one with each step as a toggle and the other without.
A potential concern with the collapsed dropowns is it could lead to slightly higher drop-off, as the user has to click a tab before they proceed, as opposed to the initial design where they would see the upload box immediately.
It’s also possible some users may not know they have to click a dropdown when they first arrive, though I estimate this population is small.
Flow 1 & 2: To dropdown, or to not dropdown...
My first intuition was to reduce the product flow to a single page. Having all the information clearly laid out gives a good idea of how many steps are next, and reduces unnecessary clicking. This would tackle the first pain point of aconfusing UX.
I made two low fidelity prototypes, one with each step as a toggle and the other without.
A potential concern with the collapsed dropowns is it could lead to slightly higher drop-off, as the user has to click a tab before they proceed, as opposed to the initial design where they would see the upload box immediately.
It’s also possible some users may not know they have to click a dropdown when they first arrive, though I estimate this population is small.
Flow 2.2: An assets panel for easy convenience
Many users failed to create a video because they didn't have photo assets readily available. Thus, we decided to an assets panel that automatically uploads photos of the faces from the video, as well as previously uploaded images.
Do you know what "Multi-face Swap" means?
How might we increase the number of people using the "Multi-face Swap" option while being efficient with GPU usage?
When face swaping, users have two options:
Swap all faces: Upload one photo and replace all faces in the video with that once photo
Multi face swap: Select specific faces to swap with other faces
Me and Runbo both felt that having a segmented button that displayed an explicit distinction between the two face swap options was unnecessary, and the current users seemed to confirm my belief!
Only 2% of users who created a video used the "Multi-face Swap" function. We felt this percentage was disproportionately low. I suspected it was because the term "Multi-face Swap" doesn't make its own function apparently clear.
I decided to remove "Swap All Faces" and offer only "Multi-face Swap" as the available option. While this improved customization, after speaking with Runbo, I learned that it was very GPU-intensive. Users would have to wait for the GPU to identify each face. Additionally, most users were satisfied with the results from "Swap All Faces," making the extra friction of swapping each face individually not worthwhile.
Since the distinction between "Swap All Faces" and "Multi-face Swap" still needed to be made, I began to think about a better way to communicate the idea of a "Multi-face Swap". Many other platforms with similar features refer to this function as "Multi-face Swap". Despite Nielsen's fourth heuristic of abiding by external standards I still decided to use a different term because the term "Multi-face Swap" still was not widely adopted enough, a majority of our users are novice or beginner video editors, and the term itself was not clear.
I considered multiple options including "Custom Face Swap" and "Advanced Face Swap" but eventually settled on a more instructional label -- "Swap a specific face". Although there still isn't a specific term for this function, the label was useful in describing the product flow.
05 sOLUTION
The final prototype
06 REFLECTION
My Takeaways
Design Sprints are Challenging
Balancing the roles of designer, business analyst, facilitator, and tester was frustrating at times. As someone who usually creates multiple iterations of every design feature, tests user test every user flow, and mulls for hours over design decisions. the 8-week timeline did not allow me to build something the way I fully envisioned. However, this experience taught me the importance of decisiveness and working within constraints to deliver a fully functional prototype. This will be something i take with me in the future.
Striking a balance between function & delight
Choosing to create a multi-page onboarding guide rather than consolidating everything onto one page, initially felt like a compromise on efficiency. The tradeoff of functionality for a more dynamic user experience was an interesting decision, especially considering the workplace environment. The final design struck a balance between user ease and business requirements, like adding onboarding screens to reduce drop-offs while maintaining simplicity.
