Vyond
Year 2019 -2020 /
Agency Vyond /
My Role Senior UI/UX Designer /
My Role
​
​
Stakeholder Interview Prototype Design
UX Design Data Analytics
User Testing
​
​
​
​
Creativity
x
Animation
About Vyond /
​
Vyond is a cloud-based platform designed for users without an animation background. It offers a library with tens of thousands of pre-animated assets, controllable via a drag-and-drop interface. These assets include characters, actions, templates, props, text boxes, music tracks, and sound effects. Users can also upload their own assets, such as audio, image, or video files. Additionally, Vyond features a drag-and-drop composition tool for creating pans and zooms.
20%
Pain Points /
Currently, Vyond supports only basic camera animation for creating pans and zooms within scenes. Feedback from numerous users, gathered by our customer success team, indicates that the current camera animations appear robotic and stiff. Many users seek smoother camera animations and understand the concept of easing in animation, expecting a solution to enhance the naturalness and fluidity of their videos.
Target User Identified /
At the early design stage, we developed personas representing three different user types based on their animation proficiency and needs. These personas are continuously refined based on real-life feedback. Users familiar with easing in animation are considered advanced, as easing is a technical term commonly used by animators and film editors to refine their work.
Scenarios Easing in & out Applies in /
​
Technically, users should be able to apply special effects in three circumstances within Vyond: scene transitions, character animations, and camera animations. However, limitations exist, restricting users' ability to do so in certain scenarios. Among these, only camera animation is free from such limitations.
Introduction of Easing /
​
To explain easing to stakeholders, I plan to start with the bouncing ball theory. Since this feature has been approved and placed in the backlog, my role has shifted from identifying user needs to executing the feature. Explaining the pros and cons of this specific animation function requires a certain level of animation expertise. Fortunately, my experience in the animation industry allows me to effectively demonstrate the feature.
UI Creation /
Pursuing a smooth curve /.
​
In the animation industry, animators often tweak graphic editors after completing a shot. This practice applies not only to camera animation but also to character and prop animations. The robotic and unnatural appearance of camera movements in our product is due to the lack of a system for users to tweak graphics. While our product targets amateurs and those without an animation background, it is understandable that users with more animation knowledge seek smoother animations. Below is a depiction of the relationship between animation graphics and easing.
Types Of Animation Graphic /
​
There are several types of animation graphics, with subtle differences discernible to seasoned animators. After discussions with developers and the product owner, we decided to incorporate two of the most commonly used graphics, also found in other professional animation tools like Powtoon and Maya.
Solution Pitch /
​
Having confirmed with developers the feasibility of integrating animation graphics into our product, the challenge is now to educate users in an easy-to-understand manner. Given that our product is intended for amateurs and people without an animation background, we must balance simplicity with functionality to address user needs. I have devised three solutions based on interface complexity and ease of use.
Solution 1 /
​
Solution 1 prioritizes ease of use. Instead of requiring users to manually tweak animation graphics, they can simply click an ease-in or ease-out button, which will automatically apply the effects.
Solution 2 /
​
Solution 2 is based on user feedback, proposing a design with checkboxes similar to those used for applying other filters to animations, characters, and props.
Solution 3 /
​
Solution 3 is the most complex, allowing users to manually tweak animation graphics. While this requires more time to understand the functionality of easing, it is also the most transparent way to educate users about the benefits of easing.
