Web-based and easy-to-use SVG animation tool
My client is a SaaS company that helps non-designers and non-technical people create beautiful infographic images with ease.
After the tool introduced its library of animated SVG icons, users began to request access to the animated files and even the possibility to save them on their local computer. This led to the birth of the SVG animation tool.
The SVG animation tool is an easy-to-use and web-based tool that enables even the non-designers and non-technical people to customize animation from its library of pre-animated images or upload their own SVG file and animate it from scratch.
Lynda is 30 year old project manager in a big medicine company. She is creative but non tech-savvy. She is also super-busy and a perfectionist.
One day, she received a task to make a presentation about a somewhat uninteresting report to their team. She thought that in order to keep the team’s attention to the presentation regardless of its boring topic, she decided to include animated images to spice-up her work.
After using quite a few animated GIFs in her presentation, she realized that the images become blurry and not HD when viewed from their large monitor in the presentation room. This led Lynda to find a way to fix the issue and she later discovered about animated SVG and the wonders of its scalability.
The problem is that animation tools are too complicated for her to use and most of them requires installation. On top of that, she has no idea if there’s any tool she can use in her level of technical skills. Despite these problems, she tried her luck and Googled “Simple easy-to-use animation tool” and ended up on SVG Animation Tool’s landing page.
Since she’s super busy, she simply judged the tool by its header (at least up to subheader) and got convinced to use the tool based on what she saw.
Initially, the animation tool is meant to be put as an embedded window inside the landing page. Since the goal of the first release is to test whether people are willing to pay for the service or not, we decided that the tool should be accessible in the quickest possible way.
Wireframe of the earliest version of the tool. Too technical looking.
Mock-up of the embedded window version of the tool.
However, having the tool embedded on the landing page feels out-of-place and can distract users from their main task.
The team concluded that it has to be on a separate page. But having the goal of quick access to the tool, we decided to implement a full-screen overlay window instead of a separate page to avoid separate loading time.
We wanted the animation tool to be as user-friendly as possible that non-designers or non-developers can use the tool with ease.
Focusing on ease of use, we decided to make the animation be done directly on the canvas.
Wireframes for the user-flow and interactions during the early stages of design.
Earlier version of the left-panel tool for animation.
Paper prototype to quickly ideate UI for the editing on canvas feature and advanced options.
Full-screen overlay window version of the tool designed not to overwhelm users on first sight.
Applying Hick’s law in my design, I decided to hide all advanced options by default to lessen user’s cognitive load in making decisions while still having advanced options available for more advanced users.
Part of my job is also to make sure that the design's consistency will be well executed up to production. So I need to create a documentation that will clearly communicate how each UI elements behave including its different states.
Upper first fold was made as eye-catchy as possible by using bright colors and large texts and an animated SVG hero image.
My rough sketch for the hero image.
The slight animation of the hero image was intentional to make sure that it’s enough to catch the user’s attention but not distracting enough to keep the user from the CTA button. Floating animation was done using CSS inside the SVG file. See it live here!
The SVG Animation Tool would be a super easy to use animation tool that would make even non-designers and non-developers be delighted in making beautiful animated SVGs.
During the earlier stage of the design process, I could have constructed questionnaires for the client to solidify the goals, the target market, and the roadmap of the product. This could have avoided the issue with the embedded vs full-screen, and also lessen the number of iterations made during the entire design process.
Sep 2017 - Feb 2018 (6 months)
For it is God who works in me,
both to will and to work for his good pleasure. - Phi 2:13