Revamping Contenda: from fragmented screens to fluid video-to-blog flows
Contenda transforms technical videos like coding tutorials, into written content like blog posts. This case study is all about how I redesigned its legacy video-to-blog flow to drive top-of-the-funnel awareness and to increase retention.
1 designer (me), 1 pm, and 4 engineers
Interviews, feature scoping, A/B testing, UI/UX design, design systems
Tested and shipped
2 months
Meet: a cool but fragmented platform
When I joined Contenda, all the pieces were there - users could register, submit videos, and convert them into posts. Yet, these features were unpolished and isolated.
We suffered from low conversions and retentions due to this - 38% beta users who registered progressed onto further pages, and of those, only 20% submitted videos. As a company gearing up for the first public launch, this was detrimental to both our business and our growing waitlist of excited users.
Blockers to the platform's growth
As a very concerned designer, I talked to 15 beta users and found the 2 drop-off triggers below. This got me thinking about - HMW to reimagine an intuitive and welcoming video-to-blog experience to drive conversion and retention?
Ways to tackle the two blockers
Having more awareness of the current problem state, the pm, engineers and I devised two ways to tackle the users' initial concerns to lower barriers to registration and revamp the video-to-blog experience:
Integrate FusionAuth, a third-party authenticator, to make users feel welcomed. This service laid the BE/FE groundwork for secure logins, reducing both design and engineering hurdles.
Introduce a user dashboard to make users feel at home, which consolidates all video submission, post editing/sharing, and account management for a cohesive experience.
Simplifying the legacy flows
We first mapped out new registration and video submission flows based on the new login service and dashboard idea, then validated them with beta users to ensure alignment between ours and their mental models. Now, it would only take users significantly fewer steps and touch points from logging in to receiving their post!
A much simpler and quicker way of registration -> video submission -> post viewing
Layout explorations
Luckily, with FusionAuth we didn't have to spend too much time building out new design/engineering assets. Leveraging their template, which mirrored Contenda’s current layouts, I enhanced visual polish and gave frontend a breather.
Old vs new registration/login layouts
On the dashboard side, I prioritized the most future-oriented solution. After gathering feedback on three dashboard explorations from the team & users, I chose the most adaptable layout for scalability.
Horizontal header
Visually straightforward, it offers design flexibility in the primary content area but has limited scalability with restricted tab space.
Widget-central
Liked by some beta users for its direct widget-grouped actions, but can feel cluttered and lacks navigational depth.
Vertical nav (winner)
Strong hierarchy and adaptability. Vertical sidebar may reduce viewing width, but can transition into a responsive sidebar if needed.
Dashboard explorations
Designing for a warm welcome
First impressions matter. Recgonizing the importance of the initial login screen, I infused it with Contenda's brand and clear CTAs. The dashboard also greeted newcomers with video submission shortcuts.
These updates collectively contribute to an intuitive landing experience, as well as a streamlined and error-free user flow.
Before: what first-time users would go through
After: what first-time users would go through
Designing for convenient workflows
The dashboard had to support different paths. With that in mind, the stakeholders suggested that I integrate video submission as a dashboard tab, since it was easier on engineering and on the design side, I would only have to add enhancements like emojis and clearer copy.
Iteration 1: what the team suggested - it worked, but it wasn't optimal
However, I felt like this wasn't optimal. Talking to 6 early testers validated its disruptiveness and inconsistency with other tabs. To balance user needs with engineering bandwith, I redesigned it into a modal, allowing quick, non-intrusive submissions and preserving the same layout.
Iteration 2: a more streamlined video submission modal
Designing for future revenue
The dashboard opened up opportunities to incorporate payment options. Leveraging existing CTA and modal elements, I designed a Stripe-friendly payment modal displaying different pricing tiers.
I felt that users needed more incentives to pay, and advocated for visibility. An A/B test indicated that users were more drawn to payment plans when presented with their video submission limits, guiding my decision to add a progress bar to visualize these.
Users were more likely to click on "Get more minutes" when presented with submission limits
Bringing everything together
The amount of new screens underscored the need for a harmonized design language. I started to create Contenda's first design system along the way to help design/eng collab and to make sure everything we add later fits in perfectly. Read about my process!
The impact
Post launch, these designs significantly boosted Contenda's business strategy, with a soaring increase in all sorts of metrics below. I was thrilled to witness so many new sign-ups, and our users more contented than before.
500%
Surge in new user sign ups
82%
Uptick in user retention
63%
Reduced dropoff rates
“I'm so glad that I can create and see all my posts in one place. This finally feels like one solid platform that I can bookmark…thank you!” - Mary, early tester
Without the constraints, I would…
Throughout the design phase, many things left me wanting more. Given unlimited resources and freedom, I'd have pursued these avenues:
Progress-driven onboarding: leading users through a sequence of engaging mini-guides on video submission, post editing, and beyond. I envisioned an interactive experience providing both hospitality and knowledge.
Bulk video uploading: currently, users can upload 1 video at a time, but what about 2 or even 10 at a time? I envision several scenarios where content creators might prefer mass uploading to expedite their content repurposing.
My takeaways
Starting this expansive project as the sole designer was initially overwhelming. However, a strategy-driven approach made all the difference: I utilized existing design and tech assets, prioritized designs that were future-oriented to ensure adaptability, and cultivated early and consistent collaborations with the engineers. Even as a team of one, leveraging these tactics allowed me to effectively navigate ambiguities and pivots.