Tribute Recording Flow · 2024
Doubling submissions on a core flow
The interaction twenty million submissions pass through — rebuilt from 33% completion to 66.58%, by treating infrastructure as a conversion problem.
- Role
- Head of Product Design
- Scope
- Recording flow redesign (web and mobile), technical infrastructure overhaul
- Team
- Design, frontend, backend engineering
- Timeline
- ~4–6 months
Impact
Submission rate 33% → 66.58%
Against a target of 65%. Path and funnel analysis separated people who never started from people who hit a technical failure — those needed different fixes.
Killed the Ziggeo and CDN dependency
Most reliability complaints traced to the video layer, not the interface. Users who hit a failed upload did not come back.
The barrier was emotional, not just technical
Surveys found users — introverts especially — hesitate to record themselves. Photo uploads shipped as a complement, never a replacement.
Background & Challenges
Imagine the joyous tears of a grandmother as she watches a heartfelt video tribute compiled by her family from loving messages, celebrating her 80th birthday. This deeply personal moment, made possible through our platform, highlights the core mission of Tribute: to facilitate meaningful connections that transcend distance and time. Video submissions represent the most essential element of the Tribute experience, with over twenty million submissions received so far. The video submission process, or the “recording flow,” represents more than just another feature of the Tribute platform; it is the fundamental interaction that defines the platform’s essence.
However, the current recording flow has significant problems:
- The user interface and the flow feel very dated
- The technical reliability of the recording flow is weak due to its reliance on the older CDN integration and Ziggeo
- The conversion rates are low — approximately 40% of users who begin the recording process ultimately submit a video
- Bugs are frustrating users
- The mobile experience is very subpar
- Currently, the only option is to record videos, and there is no option to upload videos
These problems are resulting in considerable friction for users and affecting our performance metrics.
Project Objectives
Using the SMART framework, I established specific objectives for the redesign:
- Increase the submission rates from 40% to at least 65% for users who begin the recording process and submit a video.
- Improve the technical reliability of the recording flow by removing the problematic dependency on Ziggeo and the older CDN integration.
- Add new features, including photo uploads and gift card integration — plus a stretch goal of a resumable upload feature that works throughout the UI, allowing users to upload in the background while navigating the app, and to retry failed uploads themselves.
Having measurable targets for the project kept it focused and provided a means to assess its success. Additionally, it ensured we tackled both the technical issues and the new features users had requested.
User Research & Analysis
The value of using user path analysis
Throughout the redesign process, user path analysis was incredibly valuable, as it enabled me to see how users navigated our app and identify exactly where friction occurred. When I mapped out each step of the recording flow, I was able to see not only where users were abandoning it, but also the context of those abandonments.
This type of analysis provided information that would not have been available solely from aggregate conversion rates. For example, I was able to distinguish between users who abandoned the recording flow immediately after viewing the recording interface and those who began the recording process but experienced technical issues along the way.
Funnel analysis using PostHog
Once I analyzed the data using PostHog’s funnel tools, the picture became very clear:
- All users intended to record a video (the entry point of our funnel).
- 79% of users continued beyond the first video record screen.
- However, only 42% of those users successfully completed the video submission process.
Therefore, my overall submission rate was approximately 33% from beginning to end — fairly low for a core feature.
Using PostHog, I further analyzed the data by device type and found that mobile users were experiencing even greater difficulty than desktop users. I also measured the time spent at each step and noted that users who eventually gave up were spending a great deal of time waiting for video processing — a clear indication that something was amiss.
The same funnel after the rebuild looks like this:
Total conversion rate 66.58%
Median time to convert 2m 19s
Last 30 days
Two things worth reading off it. The overall rate is 66.58%, which clears the 65% target the project was set. And the step-to-step numbers say something the headline figure hides: of the people who get as far as handing over their details, 80.30% finish. The upload — the step we spent most of the rebuild on — is no longer where the flow loses people.
The loss is at the front. 4,404 view the record flow and never begin it, which is the emotional hesitation the research turned up rather than anything technical. That is the next problem, and it is a different kind of problem.
Establishing reasonable conversion targets
My target of increasing the overall submission rate from 33% to at least 65% may seem ambitious, given that it is for a core feature. However, my research provided important context on the challenges of recording video for users.
My customer surveys indicated that many of our users, particularly those who consider themselves introverted, become hesitant when asked to record themselves on video. The act of recording creates a sense of vulnerability and pressure, leading some users to hesitate.
As a result, the redesign required addressing three distinct challenges:
- Create a feeling of familiarity and reduced intimidation when recording video by improving the UI, providing additional clarity and ensuring that the technical aspects are reliable.
- Add alternative options to the video submission process (e.g. photo uploads), while maintaining the focus on video as the primary method of submission.
- Strike a balance between these two methods to ensure that we do not inadvertently discourage users from submitting video content, which is what makes a Tribute unique.
To address emotional barriers and guide users through the recording process, we designed the photo upload as a complementary feature rather than emphasizing it as a primary alternative to video submission. This way, we maintained the focus on video submission while offering users alternatives to complete the recording flow.
Testing our prototype with Maze
To test our prototype, I used Maze, a result-oriented usability testing tool. The test results were very promising, with high success and satisfaction rates across the redesigned recording flow.
Although the testing confirmed my primary design decisions, it also yielded one critical piece of feedback: users wanted a clearer, labeled progress bar to help them understand where they were and what came next.
This insight helped us improve the user interface, giving users a better understanding of their place in the process and minimizing uncertainty.
Solution Design
Based on my research, I developed a detailed flow chart that identified:
- The problem areas of the current process
- Areas where conversion rates were low
- All the new features we desired to implement
Instead of spending a lot of time creating pixel-perfect mockups in Figma, we used Bolt.new for rapid prototyping, which enabled us to iterate and validate quickly. This approach allowed us to prioritize flow logic over pixel precision, ensuring we focused on functionality and the user journey rather than getting caught up in visual details. While Figma is powerful for detailed design work, the rapid iteration enabled by Bolt.new let us test and refine our ideas more effectively, demonstrating the intentional trade-offs in our tooling choices.
Technical Implementation
For the new recording flow, we implemented a modern technology stack:
- Vue.js and Tailwind CSS for the front-end
- Pinia for managing application state
- FormKit for handling forms
- VideoRecord-js for capturing video
- Custom dropzone/upload implementation
- Vimeo for direct resumable uploads
- Backblaze and Bunny for uploading photos
- Stripe for integrating e-commerce
One of the best decisions we made was the way we approached mobile. While our desktop experience used a customized recording interface, the mobile experience used native HTML input fields to capture video on both iOS and Android devices. This was a massive improvement because it leveraged the OS’s capabilities rather than fighting against them. Why rebuild what the OS already does so well?
Additional Design Improvements
While we improved the technical foundation of the recording flow, we also made thoughtfully designed improvements to the user experience that addressed the needs of the users:
Providing context
We dynamically placed placeholders behind the core flow to enable users to select the Tribute theme (birthday, graduation, congratulations, etc.) that they are celebrating. This helped create a contextual experience for the user that tied the selected theme throughout the entire process.
Providing instant feedback
To provide instant feedback and reactively apply checkmarks for real-time validation, we followed best practices for form development. This instantaneous feedback to users helped alleviate their uncertainty and confusion.
Creating clear and intuitive interface controls
One subtle but impactful enhancement: hovering over record disables the upload button, and vice versa. Research showed users were confused about whether they had to record and upload as separate steps. This one decision removed the confusion and made the path forward obvious.
Including a participant notes functionality
We added a notes field that stays hidden from everyone but the person recording. It solved a common issue from our research: users were recording take after take because they forgot what they wanted to say once the camera was on.
Adding moments of delight
We included a pulsating effect on the buttons and a confetti Lottie animation on the confirmation page to celebrate the successful completion of the submission process. These small moments of delight reinforced the positive emotions associated with completing the submission process and added a bit of personality to the experience.
Reflection
The recording flow is deceptively simple on the surface — record a video, submit it. But the combination of technical fragility, emotional hesitation, and cross-platform inconsistency made it one of the harder problems we tackled at Tribute. The biggest lesson was that conversion wasn’t just a UX problem. The technical layer (Ziggeo, the CDN) was actively undermining trust. Users who hit a processing delay or a failed upload didn’t come back for a second try. Fixing the infrastructure was as much a conversion play as any design change we made.
If I were starting this again, I’d push harder on resumable uploads from day one rather than treating it as a stretch goal. For a product where the average user is recording on a phone over mobile data, upload resilience is table stakes.
- 66.58%
- Submission Rate (up from 33%)
- 88%
- Users Continue Beyond First Screen
- 72%
- Successful Video Submissions
Next project