Designing a browser-based AI-powered video editor

Timeline:
2023-2025

Role:
Director of Brand and Product Experience

Project overview

Justin spearheaded the design and user experience (and marketing!) efforts for Socialive's groundbreaking AI-powered video editor. From concept development to the final developer handoff, he played a pivotal role in bringing this innovative video editing tool to life. His leadership ensured the creation of a world-class product, setting a new standard for AI-driven video editing.

Challenge

While Socialive offered an end-to-end video creation platform, the editing functionality was a significant gap. Lacking a comprehensive and intuitive editing workflow, users faced difficulties completing even the most basic tasks, often resorting to external software to achieve the results they needed.

One of my most impactful projects at Socialive was leading the design and user experience initiatives for our best-in-class video editing platform. Our focus was clear: create a user-centric design that streamlined video editing workflows for video professionals and video novices alike.

Working cross-functionally with product, engineering, customer-facing teams, and senior leadership, I took ownership of the day-to-day design decisions, fostering iterative development that remained laser-focused on delivering unparalleled user experiences. I ensured that each feature did not just meet users' needs and expectations, but obsessed over interaction design that would provide moments of delight and discovery for users. 

My role extended far beyond design execution; I heavily contributed to shaping the product vision, roadmap, strategy, and hierarchy, participating in prioritization discussions that aligned our design decisions with strategic business goals. I conducted market research and did numerous competitor deep dives to identify trends, and opportunities for innovation. Striving to make data-driven decisions, I facilitated customer and user testing sessions which directly led to the identification of pain points, enhancement of usability, and drove rapid adoption.

The success of this project stemmed from successful cross-collaboration and a rapid iteration mindset. This experience reinforced my belief in placing people at the core of design decisions and obsessing over the details that bring them joy. As an added bonus, we simultaneously used the newly established designs to update and enhance our legacy component library to ensure future builds are fast and consistent.

Interactive prototypes

Dozens of high-fidelity, interactive Figma prototypes were created to clearly illustrate design and development goals. These prototypes served many purposes, including: Gaining stakeholder buy-in, user testing, design validation, boosting early adoption, pipeline generation, customer expansion and retention.

Process

Discovery & research

To better understand user needs, we conducted interviews, surveys, and usability tests to identify pain points for roles spanning from creators and administrators. Platform analytics helped uncover common abandonment points and navigational issues. We developed user personas and mapped their workflows, enabling us to optimize the experience effectively based on their goals. An extensive competitive research initiative identified gaps in the market, and areas in which we could leapfrog the competition to better serve our ICP.

Strategy & vision

We established a design vision focused on simplicity, clarity, and usability, guided by core principles: Ease of use, scale, and quality.

Information architecture redesign

We restructured the data architecture with logical categories and metadata tagging to improve content discovery. A new sitemap and user flow diagrams were developed to ensure seamless workflows across different users and roles.

Wireframes & prototypes

We created low-fidelity wireframes for early explorations of information architecture, then built interactive prototypes for user testing and validation.

High-fidelity design & implementation

Post-validation, we developed pixel-perfect designs with a modern, updated aesthetic, working in lockstep with the engineering team for accurate implementation. The designs were built with the existing design system to ensure consistency and scalability.

Key improvements

Completed end-to-end workflows for users

With a fu

Simplified navigation

Restructured product and data architecture to enable users to focus on completing their tasks, rather than trying to navigate our platform.
‍‍
Reorganized content into logical categories using domain-driven design principles, reducing the number of clicks needed to accomplish goals.

Enhanced video management

Rebuilt video filtering system to include more robust and relevant choices.
‍‍
Designed video detail pages with contextual information, providing a centralized location for editing, publishing, and AI-powered features.

Reflection

x