Vyond | 2016 - 2018
Vyond Video Maker
Overview
Vyond is a San Francisco-based SaaS startup. Vyond’s Video Maker, its core product, enables users to create animation videos using drag-and-drop tools. Think of it as Canva for animation.
I joined Vyond’s Hong Kong office as designer #2 when they were a team of 20. It has since received USD 50 million in funding and has grown to over 80 people.
My role
As a Senior UX Designer, I worked as an Individual Contributor leading the redesign of Vyond’s Video Maker and launching 100+ features. This case study showcases a collection of some of the key features I worked on.
Template
For Vyond’s Template feature, our user tests identified problems such as unclear hierarchy and difficult navigation.
In the re-design project I led, I ensured a clear hierarchy structure and introduced features such as Featured Templates to help users select templates more easily.
Search
The previous Search feature lacked a clear categorization strategy and had only basic search logic, resulting in poor search results.
I defined the categorization structure, a scalable tagging process, and enabled retrieval with multiple keywords as well as keyword suggestions.
Timeline
The Timeline feature allows users to adjust various elements in a scene such as timing, camera movement, audio, motion paths, effects, and transitions.
I led the design of this feature, shaping interactions such as display logic, timestamps, tooltips, play-head, keyboard shortcuts, and zooming features to provide users with greater control of their videos. I had great fun finding the balance between providing advanced features and reducing the visual noise with a Simple vs expanded Complex view.
Camera
The Camera feature allows users to add, adjust, and manage camera movements to create a more compelling video.
As a feature lead, I defined the specifications for camera viewport handling, movement durations, and asset visibility within the canvas.
Microinteractions
Microinteractions are brief interactions in a user interface that provide instant feedback and guidance. They are the fundamental building blocks of how features behave within Vyond’s Video Maker. Below are some of the macro-interactions I worked on:
Drag & Drop
Snapping
Object manipulation (Resize, Rotate, Flip)
Contextual menu
Multi-select (Scene and Object)
Keyboard shortcuts
Zooming
Outcome
I take pride in seeing customers appreciate our work. Here's some praise we received.
“Sweet mercy the new editor is AMAZING! The level of fine-grain control that we have over elements now is fantastic, and the intuitiveness of the interface is fantastic as well!”
“I have so much to say! So many things! I’ve been using new UI/UX for about an hour and overall I’m in love! … Anyway, the improvements are huge.”
“User friendly, clear extra simple, but still great quality & tools”