Back

SVG Animation Tool

Web-based and easy-to-use SVG animation tool

Introduction

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.

...

Case Study

  1. Identifying the Problem
  2. Challenges and Solutions
  3. Conclusions
  4. What Could Have Been Done Better?

...

I. Identifying the Problem

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.

...

II. Challenges and Solutions

1. From embedded window to full-screen.

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.

screenshot

Wireframe of the earliest version of the tool. Too technical looking.

screenshot

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.

2. Should be user-friendly. Even to non-technical people.

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.

image

Wireframes for the user-flow and interactions during the early stages of design.

screenshot

Earlier version of the left-panel tool for animation.

image

Paper prototype to quickly ideate UI for the editing on canvas feature and advanced options.

screenshot

Moving objects directly on canvas gives user more freedom and ease.

screenshot

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.

screenshot
screenshot

To guide the users on what to do, tips and help texts are shown on empty, error, and restricted pages and buttons. In Addition, a “How-to” feature with videos and instructions is available anytime for users to know more about the main features of the tool.

screenshot

For all the paginations across the app, the Previous "<" and Next ">" buttons are placed close together to reduce the distance required to travel for the pointer in the x-axis.

3. Design Consistency.

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.

screenshot
screenshot

UI Components Design Guidelines

4. Upperfold should be compelling to have high conversion rate as possible.

Upper first fold was made as eye-catchy as possible by using bright colors and large texts and an animated SVG hero image.

image

My rough sketch for the hero image.

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!

screenshot
screenshot

Striking upper-fold and call-to-action reinforcement at the middle part.

...

III. Conclusion

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.

...

IV. What Could Have Been Done Better?

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.

...

Background

Project Type:

Freelance

Project duration:

Sep 2017 - Feb 2018 (6 months)

Role:

UX/UI designer

Responsibility:
  • Worked and reported directly to the CEO to make sure business requirements are met.
  • Initiated research to gather data for identifying needed features for the first version of the tool.
  • Managed the project and backlogged all possible ideas to improve the tool for the next releases using Trello.
  • Collaborated directly with in-house UX/UI designers for consultations, heuristic evaluations/usability testing and design iterations.
  • Designed over-all UX and UI following existing pattern library.
  • Created separate pattern library for non-existing UI patterns and interaction guidance to help guide future designers and developers.

For it is God who works in me,
both to will and to work for his good pleasure. - Phi 2:13