Concepts of the Animation Tool on the web platform and the mobile app
Goal
User-generated animations have been a vital part of the Tynker creative environment. Tynker offers coding courses and tutorials that focus on creating animations. We constantly see animations in user-published projects.
Prior to the Animation Tool, user feedback suggested that creating animations was not the most optimized experience. In fact, one identified pain point was that users had to manage animation frames outside of the Drawing Tool, and there was no way for them to compare artworks while in the drawing environment.
The goal of the Animation Tool was to provide a way that users can directly create animations without having to leave the Drawing Tool. In the short run, we wanted to be able to feature this upgrade in the upcoming 2020 events with more animation-building activities. In the long run, we wanted to see an overall improvement in user-created visuals.
Prior to the Animation Tool, user feedback suggested that creating animations was not the most optimized experience. In fact, one identified pain point was that users had to manage animation frames outside of the Drawing Tool, and there was no way for them to compare artworks while in the drawing environment.
The goal of the Animation Tool was to provide a way that users can directly create animations without having to leave the Drawing Tool. In the short run, we wanted to be able to feature this upgrade in the upcoming 2020 events with more animation-building activities. In the long run, we wanted to see an overall improvement in user-created visuals.
One clear pain point before the redesign: users had to go in and out of the Drawing Tool to manage the animation frames
Style difference between the IDE and the Drawing Tool before the redesign
Challenges
The feature was intended for both the Tynker web platform and the Tynker app, each with specific requirements and challenges.
Web Platform
The web version of the Drawing Tool itself required a visual update to match the new IDE style and patterns. Before a thorough design update, the individual functionalities required auditing to determine if further updates were necessary.
Additionally, we wanted to evaluate and explore new features that may be beneficial for the long-term goal. Fitting all the new features and workflows became a challenge in early-stage conceptualization.
Mobile App
For the mobile integration, the challenges were defining the fundamental features necessary to make this tool useful and ensuring that the design would fit within a more limited screen size. Finding the right balance visually for features proved to be challenging. Along the process, some minor patterns required updates for the best experience.
Web Platform
The web version of the Drawing Tool itself required a visual update to match the new IDE style and patterns. Before a thorough design update, the individual functionalities required auditing to determine if further updates were necessary.
Additionally, we wanted to evaluate and explore new features that may be beneficial for the long-term goal. Fitting all the new features and workflows became a challenge in early-stage conceptualization.
Mobile App
For the mobile integration, the challenges were defining the fundamental features necessary to make this tool useful and ensuring that the design would fit within a more limited screen size. Finding the right balance visually for features proved to be challenging. Along the process, some minor patterns required updates for the best experience.
My Role
Before designing, I wanted to look at the existing tools and evaluate the individual functionalities for importance in order to build a proper visual hierarchy. I also wanted to look at the different products in the market to understand the spread of features and UI approaches.
From there, I started conceptualizing layout options with new features in mind. I collected feedback on those variations from existing resources and composed a final layout at the end. During the process, I worked together with two teams of developers, one for web and one for mobile, to validate the implementations and to keep works within the time constraints. I documented all interactions with layout specs for both teams.
After the launches, I paid attention to the metrics on the usage of the tool and followed the user community closely to see how user-generated animations develop with the tool.
From there, I started conceptualizing layout options with new features in mind. I collected feedback on those variations from existing resources and composed a final layout at the end. During the process, I worked together with two teams of developers, one for web and one for mobile, to validate the implementations and to keep works within the time constraints. I documented all interactions with layout specs for both teams.
After the launches, I paid attention to the metrics on the usage of the tool and followed the user community closely to see how user-generated animations develop with the tool.
Examples of initial market research on other creative tools
Examples of color pickers collected during the research phase
Actions
Research
I looked at other creative software of similar nature for both layout and user flow considerations. Key discoveries were documented as a reference for additional features in the future.
Since we design for a particular age group, I looked at a spread of creative tools from simple coloring apps to complex tools such as Adobe Photoshop. Some key features I considered adding:
Vector drawing
- A very flexible and dynamic approach for high-quality results. It was available on the web platform and was rarely used by users.
- It was available on one competing platform. Though the primary user group could be a little older than our target audience.
- While it was certainly a good tool to have for advanced users, existing data and initial user testing suggested this feature may be confusing to our target age group, especially for mobile app users.
- Some tools in the market combined raster and vector drawings in the same environment.
I looked at other creative software of similar nature for both layout and user flow considerations. Key discoveries were documented as a reference for additional features in the future.
Since we design for a particular age group, I looked at a spread of creative tools from simple coloring apps to complex tools such as Adobe Photoshop. Some key features I considered adding:
Vector drawing
- A very flexible and dynamic approach for high-quality results. It was available on the web platform and was rarely used by users.
- It was available on one competing platform. Though the primary user group could be a little older than our target audience.
- While it was certainly a good tool to have for advanced users, existing data and initial user testing suggested this feature may be confusing to our target age group, especially for mobile app users.
- Some tools in the market combined raster and vector drawings in the same environment.
Pixel Drawing
- A very trendy variation of the drawing environment that focuses on pixelated drawings.
- This feature was mentioned a few times in user feedback and had been a feature request from content developers.
- The basic environments should match the primary experience nicely.
Layering
- Layering is another advanced feature with which users can organize their drawings. This feature would also make animating easier.
- Initial discoveries showed that some users got confused between layering and frames. This may be addressed by a better-designed UI.
- Some users also accidentally drew on unintended layers.
Frame Management
- While basic features such as duplicate, rearrange, create, and delete should remain accessible easily, some apps in the market also had a very specific layout for massive animation frame management.
- This feature would allow users to quickly duplicate and rearrange animation frames. It seemed more appropriate for long and complex animations.
Onion Tool
- This feature shows adjacent frames and is useful as a reference for animating.
- Most of the animation apps utilize this tool.
- As an animator myself, I lobbied for this feature for its simplicity as a toggle and the tremendous impact it can bring.
Animation Preview
- This feature allows users to quickly look at the result of their drawings.
- It was immediately considered as an essential feature, but we had questions on how to integrate this feature.
On the mobile side of research, my focus was primarily on user flows of frame management and ways to condense UI elements in addition to the considerations above.
Based on discoveries made in the research phase, the stakeholders agreed on the base list of features for the initial release. We kept documentation and designs of other ideas for future considerations.
During my auditing of existing tools, I also discovered bugs within the current platform. Those were documented and addressed during the process.
Layout variations for the web version that included some hypothetical ideas
Web UI
In the initial layout exploration, I intended to keep all the potential features included and started imagining what that may look like. Some basic directions for those variations were:
In the initial layout exploration, I intended to keep all the potential features included and started imagining what that may look like. Some basic directions for those variations were:
- A hierarchy based on the common structure in the market
- A hierarchy based on usage frequency
- A hierarchy focused on the common animating flow
- A hierarchy based on usage frequency
- A hierarchy focused on the common animating flow
From there, I started trimming features that were excluded from the initial release and hiding less critical features in a deeper interaction to reach the final layout.
Comparison between the previous design and the final layout
The final designs of the preview feature and the onion tool
The icon library used for the tool
Mobile UI
I designed the mobile version of Animation Tool with a secondary visual hierarchy. Even though we wanted to highlight the feature itself, it was still important to keep the layout clutter-free.
Several improvements to the overall design pattern were made during the process, in order to keep the experience more consistent on the high level.
Due to time constraints, the onion tool did not make it in the initial release for the mobile version. The assumption was the most common flow for animating would be done through duplication, which still takes up a relatively prominent position in the tool itself.
I designed the mobile version of Animation Tool with a secondary visual hierarchy. Even though we wanted to highlight the feature itself, it was still important to keep the layout clutter-free.
Several improvements to the overall design pattern were made during the process, in order to keep the experience more consistent on the high level.
Due to time constraints, the onion tool did not make it in the initial release for the mobile version. The assumption was the most common flow for animating would be done through duplication, which still takes up a relatively prominent position in the tool itself.
Early explorations of the mobile layout
Exploration concept for a full-screen animation management feature
Final mobile layout
Interaction prototype
Result
Immediately following the release of the feature in November 2019, assets created through the tool increased by 20% that month, which was a 40% increase from a year before. The trend continued and peaked in May 2020 when created assets doubled from the month it was released. The number of assets created stayed at least 30% more throughout the year 2020.
As part of the 2020 Summer Code Jam program, we received over 3000 student projects of original animations in a week. Some of them were truly creative and well crafted. In the 2021 program, we saw 5000+ student projects featuring original animations.
Exclusive tutorials and blog articles were created to bring more user awareness of this tool. This tool has been constantly promoted in coding events ever since it was released.
As part of the 2020 Summer Code Jam program, we received over 3000 student projects of original animations in a week. Some of them were truly creative and well crafted. In the 2021 program, we saw 5000+ student projects featuring original animations.
Exclusive tutorials and blog articles were created to bring more user awareness of this tool. This tool has been constantly promoted in coding events ever since it was released.
Winners of 2020 Summer Campaign
Winners of 2021 Summer Campaign
What's Next?
The more advanced features, such as layering, vector drawing, and pixelated drawing were still being considered for future implementation. A more robust way to create custom animations was explored, such as using a structured skeleton system. More researches are still necessary to flash those ideas out.
A more dynamic rig system was considered so users could easily animate by moving parts of artwork around