DIY Animated Video Platform

Vyond is a leading DIY animated video SAAS platform for B2B.

Background

I joined Vyond in the Hong Kong office in the early days, with 20-30 members, largely developers, and 3 designers. It was a “roll up your sleeves” environment at the brink of product-market fit. I regularly collaborated with colleagues in Taiwan and San Francisco.

Throughout this time, I learned a lot about product development, agile processes, and the importance of structured workflows as the company doubled in size each year. Some key achievements include:

• Design process: The design team doubled, but initially lacked structured processes, which caused inefficiencies. Establishing a design process streamlined workflows and improved collaboration with other teams.
• Improving usability: Regular usability testing helped us identify and address complex usability issues, improving user satisfaction. Sharing findings with other departments helped build user empathy.
• User onboarding: Identifying crucial steps for new users helped reduce the app’s learning curve, leading to lower subscription churn.
• Design consistency: Implementing reusable interaction patterns ensured a cohesive user experience across both apps and improved the efficiency of design and development teams.

Process

We followed the Double Diamond approach, progressing through stages like research, content auditing, modeling, and creating a cohesive interaction pattern.

Research & Discovery

Through regular user interviews and tests, we identified significant navigation pain points. Minor adjustments weren’t sufficient to resolve the issues, so a broader redesign was needed.

Defining the Problem

Late in the redesign, we encountered several challenges:

1. With a growing design team, members were adding features without considering the overall user experience, hindering scalability.
2. The app’s navigation lacked consistency, making it difficult for users to find options.
3. Low cohesion between content panels made it challenging to navigate the app’s extensive library of assets.

Vyond has a large library of assets, each with many properties. This complexity can add significant cognitive load for users, especially with additional user-generated and customized content.

Content Audit

I conducted a comprehensive content audit, mapping relationships to visualize connections and identify gaps within the ecosystem.

Develop

We translated the content mapping into a repeatable design pattern. This allowed us to apply a consistent approach to both existing and new designs while maintaining transparency between design and development teams.

The pattern was designed to accommodate different user types:

• Primary: Video creators
• Secondary: Managers (gatekeepers)
• Lifecycle stages: Beginners, intermediate, and advanced users

Validating Design

With the updated pattern, we conducted further user tests, which showed improved task completion rates. While it required some trial and error, the pattern proved to be effective overall.

Below is a short video clip (26 secs) showing the design pattern in action, demonstrating how users browse, apply, save, and reuse colors.

Reflections

The most challenging part was persuading stakeholders to revisit foundational elements so late in the project. Team members also had to adapt to working with constraints, which led to more focused and effective design decisions.