Vyond | 2018
Vyond Template Redesign
Overview
Vyond is an online application that enables people to create animated videos through drag and drop.
Through watching user testing videos, we have identified a few usability issues with our “Template feture”. In this case study, I walk through the process of how I addressed the usability issues.
My Role
I was the lead product designer working alongside another engineer. We physically sit next to each other during the project to streamline communications.
I planned remote user-testing sessions, created interaction designs, wireframes, prototypes, and also wrote functional specifications.
Challenge
In our ongoing iteration cycle, we aimed to assess the effectiveness of the Template feature for users in generating video content. We conducted six rounds of user testing sections on Usertesting.com, tasking participants with creating an HR policy video elucidating our bad weather policies. Two primary issues were identified:
Lack of visual hierarchy
Difficult to navigate between Template categories
Outcome
We have addressed all the usability issues identified
Introduced template highlight features to reduce cognitive load and help address the marketing needs
Lack of visual hierarchy
The lack of a clear visual hierarchy poses a significant issue. Users unintentionally choose Templates, replacing content on their current canvas, especially with text-only templates.
For example, a user mistakenly considered a Text template to add text, resulting in the unintended replacement of everything on the scene. The issue stems from the proximity of Templates and Assets, implying similar behavior despite their visually grouped association.
Difficult to navigate between categories
In the old UI, the templates are nested within each category, requiring users to click the Back button and select a different category if they cannot find what they need.
This becomes particularly frustrating when users aim to swiftly explore various categories to locate their desired template, as evidenced in our tests. The design impedes users from freely exploring different options, resulting in a high interaction cost.
Objective
Create a scalable framework — Define a clear hierarchical structure to help users navigate between templates in the fastest way possible.
Templates and regular assets look too similar, we need to find ways to visually distinguish the two
Stretch objective
The marketing team proposed promoting specific template categories to enhance user personalization such as featuring seasonal content like Christmas themes. We believe this adds value to the users with a more tailored experience. We aim to address usability issues while incorporating this new feature for added user benefit.
How Might We help user…
Distinguish between Template and Assets?
Freely browse between different categories?
Highlight templates that are useful for them?
Design principle
Before I started to design, I drew out a few core principles from Nielson Norman Group that are relevant to this project to help guide how I design.
Guiding principle # 1 — Consistency and Standards. UI elements that are grouped together should behave in the same way.
Guiding principle # 2 —User Control and Freedom. Users often perform actions by mistake. Help users can quickly browse between different categories even if they selected the “wrong” categories.
Guiding principle # 3 — Flexibility and Efficiency of Use. Allow for customization, so users can make selections about how they want the product to work.
Lo-fidelity concept
I sketched and integrated between different concepts, taking inspiration from many tools such as Canvas, Powerpoint, and any other tools that have a library structure.
The following “How Might We” statements helped me stay focused on the problem I am trying to address, throughout my exploration process, I slowly found answers to each of them. How might we:
Distinguish between Template and Assets? — Through structure and visual queue
Freely browse between different categories? — Create a mental parking lot
Highlight templates that are useful for the user? — Show a sub-set by default
Define a clear structure
To help users distinguish between Templates and Assets, I have settled on a design pattern that helps communicate functionality through a clear hierarchy.
Old mental model
Assets and Templates co-exist in the same place but have different interaction patterns. When users select an asset, the asset is added to the canvas, if the user selects a template, the whole canvas will be replaced.
New mental model
I have moved templates to the bottom “Scenes” area. The new mental model becomes:
Go to the left panel to add a new asset, a new asset is added to the canvas
Go to the bottom to add a new scene (Templates), a new scene is added
I also added a feature to give users the option to replace existing content or add a new scene.
Visual queue
I discussed with my engineer partner the possibility of adding GIF animation for the template thumbnails since most assets are static while Templates are animated by default, adding this would allow a clear distinction between Templates and Assets. The conclusion was that it was possible in our timeline so that is what we did.
Paper prototype
To enhance category browsing, I drew inspiration from browser tab designs. Tabs act as a mental "parking lot," allowing users to explore options without full commitment. Following Google's material design, I created a paper prototype with an engineer, defining the template menu's hierarchy, layers, summoning, and dismissal locations.
Prototype
I used a tool called Atomic to create an interaction design prototype and presented it to the team to communicate how the template menu should behave.
Working alongside my engineer, I tweaked the animation parameters such as slide-in/out and the fading effect until the animation felt smooth.
Coding prototype
Collaborating with engineers, we have developed a coding prototype to assess feasibility and gauge the viability of our approach. We presented this to stakeholders, including the CEO, highlighting the problems we aimed to solve and why our design was the right solution. Upon receiving approval, we proceeded to create the final product.
Functional specification
At Vyond, the designer writes functional specifications, it documents how the feature is supposed to behave, including all the possible edge cases we can think of and design decisions we made along the way.
While prototypes and wireframes help communicate how the product is supposed to work, writing forces us to think about the problem more clearly. Flawed logic is also easier to discover when you put the interactions into words and not distracted by the UI
Solution
1. Clear Hierarchy
We have moved the Template menu to the bottom of the UI, shown when the user clicks the Add scene button or click the Swap scene button. With this new UI, the case where users mistreat Template as an asset and accidentally replace the current scene will no longer happen.
2. Easy to navigate
We have introduced a Tab feature that works very similar to a browser tab, users can easily navigate between categories they care about without the speed bump from the old design. They can also customize their workspace to show only Template categories that are relevant to them, and hide those that are not.
3. Marketing needs
We don't want first-time users to be overwhelmed by the number of Template categories out there. Hence, by default, we selected the most used template categories based on usage data, and only show a few starter categories or categories for promotion to help users quickly get started. This approach helps to promote certain categories without coming as too “salesy”.
Final test
We ran a few more user testing follow-ups to see how well the new design went compared to the old one. We were happy to see that the usability issues were addressed completely.
In the next iteration, we planned to pay close attention to whether the starter categories help to speed up the process of creating videos and whether this feature is used.
Result
Below are some of the praise we received from customers for the project since its launch, specifically commending the new editor in its entirety, not just the template feature.
“Sweet mercy the new editor is AMAZING! The level of fine-grain control that we have over elements now is fantastic, and the intuitiveness and responsiveness 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”