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. They have several features 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.
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 tool uses advanced AI to identify and replace faces in photos or videos, works fully online with no downloads, and supports both personal uploads and YouTube links.
25% conversion rate
Magic Hour’s Face Swap Product Flow is its most popular feature and drives the highest upgrade rate from the free plan to premium.
03 rESEARCH & PLANNING
Synthesizing preliminary user tests
I first conducted a cognitive walkthrough of the initial product flow. My unfamiliarity with Magic Hour's platform as a new user helped me identify potential issues that led to early drop-offs, and UX confusions.
Magic Hour already had a summary of previous usability tests including 12 screen-recorded users using the "think aloud method and their transcripts. I noticed that the majority of user dissatisfaction came from one of the following pain points:
01
Confusing UX
Features such as "multi-face swap" and uploading a Youtube video are not immediately obvious to the user.
02
Lack of Cost Transparency
Users are only told about potential price warnings after they have completed the entire flow.
02
Lack of readily available assets on their devices
Many users did not have a clear headshot on their device that could be used to swap faces.
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. 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 constraints
GPU considerations for multi-face swap
Swapping multiple faces in a video is useful, but very GPU intensive. HMW design a flow that only allows high intent users to swap multiple faces?
Minimalistic output, advanced features
Magic Hour is used by beginners and professionals. 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?
04 PROTOTYPE, TEST, EVALUATE, REPEAT
Reducing it all to one page
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. I made two low fidelity prototypes, one with each step as a toggle and the other without.
A potential concern with the collapsed dropdowns is that 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.
Finding faces on your device is hard!
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.
What's a "multi-face swap"?
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
Runbo and I felt that a segmented button with the two face swap options was unnecessary, and the current users statistics seemed to to confirm our hypothesis.
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” to give users more control. But after talking with Runbo, I learned that this approach is far more GPU-intensive—users would have to wait for the system to detect each face individually. In practice, most people were already happy with the automatic results from “Swap All Faces,” so the added friction of customizing every face ended up creating more hassle than value.
Since it was still important to distinguish between “Swap All Faces” and “Multi-face Swap,” I started exploring better ways to communicate what the “Multi-face” feature actually does. Many platforms with similar tools use the term “Multi-face Swap,” and while Nielsen’s fourth heuristic encourages following established conventions, that label isn’t widely adopted yet. Most of our users are novice video editors, and the phrase itself isn’t immediately clear to them.
I brainstormed several alternatives, including “Custom Face Swap” and “Advanced Face Swap,” but eventually chose a more straightforward, instructional label: “Swap a specific face.” Even though there still isn’t a standardized term for this function, this instructional phrasing does a better job of guiding users through the intended workflow.
05 sOLUTION
The final prototype
Slideshow presentation
06 REFLECTION
My Takeaways
Optimizing user tests
Finding a balance between making changes and conducting user tests was very important. It was easy to want to validate every small design decision I made, but conducting user tests takes a lot of time and resources ultimately slowing down the entire design process. At a startup like Magic Hour, designs must be executed quickly so I found myself making a mental note of when I should best conduct user tests, and make small tweaks between each tester.
Content design is VERY important.
The confusion caused by the term "multi-face swap" was a challenging problem to handle. It was the first time I concretely and immediately felt the impacts of sub-optimized terminology and content design. I had a lot of fun diving into content design principles, and referred to Andy Welfle and Michael J. Metts' book "Writing is Designing" as a frame of reference.
