Asurion is an industry leader in mobile insurance, technology, and support, with a team of thought leaders working behind the scenes. Their clients come from a variety of backgrounds, but they all have one common goal, and that is to enhance their lives through technology.
What better way to capture the attention of a tech-enthusiastic audience than performance-friendly interactive SVG animations?
“I use SVGator to boost user engagement and bring my designs to life with visual storytelling through animation.”
One of Asurion’s Principal Designers, Ilya Tsuprun, accepted our invitation to talk about his own professional experience with SVGator.
The Challenge: Find a one-stop solution for SVG animation
The most difficult challenges designers face when searching for the perfect SVG animation tool usually boil down to these three obstacles: third-party dependencies, a complex learning curve, and the requirement for time and labor-intensive code writing. Also, A/B testing the Figma designs on real people can also be a challenge.
Here’s Ilya’s experience with testing alternative SVG animation solutions:
“Over the years through my journey, I've been continuously searching and experimenting with different tools and tried many different processes and techniques to create scalable, lightweight, and high-performance animations for desktop and mobile products. I've tried a variety of video converter tools, including Flash (Rip): Flash (Rip), GIF, video, PNG/JPG sequence, APNG, HTML, JSON, and finally - SVG.
There are many ways and tools to create SVG animations, but all the solutions that I've tried couldn't give me the right set of tools for creating the complex animations I had in mind.
I have some limited Action Script coding experience from the Flash era, so without giving up, I just started coding my SVG animations in Codepen by using a JavaScript animation engine.
The animation process took a relatively long time, and the learning curve was steep, and I was not very comfortable with all the coding stuff.
The dev hand-off was okay – the devs were happy with getting a readymade lightweight animated asset. BUT this solution for SVG animations had a third-party dependency: an external player. It was possible to embed the external player into the animated asset, but the process was manual and tricky, which was not ideal, and my team had trouble getting on board with this approach.
Thinking it was good enough for our web and mobile products, we started the conversation on standardizing it as our go-to solution for creating SVG animations on our dev and design teams.
While the coding animation processes worked well, as a Principal Product Designer, I had difficulty mentoring and sharing knowledge with my peers and received pushback regarding the coding animation process because my colleagues were hesitant and intimidated by the process. So I kept searching for alternative solutions . . .
Another solution we tried to implement was a library that exports JSON-based animation files. The fact that this solution came with a third party dependency had many drawbacks, like not knowing what features were supported while animating. This library utilized only 5% of AE's capabilities, so we constantly needed to check what features were supported. Throw player integration on top of all of this, and the process became extremely inefficient.
The Solution: SVGator
“After experimenting with all the other tools available, I revisited SVGator. It had evolved. And to my delightful surprise, it was capable of more and had all the features that I needed and was searching for to create high-fidelity, complex SVG animations! And zero coding! No coding and no 3rd party dependencies! All the animation attributes were embedded in a single standalone SVG file.
Jumping into a familiar and intuitive web interface was a breeze. Within minutes, I found myself animating and bringing my designs to life. It felt like, “this is it” – this is the tool I was looking for; it had everything I needed. The ability to quickly create animated SVG assets only once, and export them in different formats (.svg, .js, .dart) across multiple platforms was awesome!
I used SVGator to create this mobile onboarding animation:
By having more than just static visuals and capturing user's attention more easily, we boosted user engagement exponentially. The animations made the process of visualizing what the product has to offer more efficient. In one of my latest projects for mobile, I used SVGator to create a simple React Native animated asset that included vector illustrations and a PNG file. SVGator also supports base64 encoding in its export, which means that you can animate and export not only vector visuals but also images - which is awesome.
I've exported all the vector and PNG assets from my Figma design file and used the awesome tinypng.com web service to minimize the high-resolution PNG image size without compromising quality, then dropped them into SVGator for animation. A couple of hours later, the animation was already seamlessly playing in our mobile app and ready for A/B testing in prod. BAM!”
Bonus Perks When Using SVGator
Seamless developer handoff
“The dev handoff process was also great, with little dev effort as SVGator provides very useful documentation on their website and different techniques and solutions for implementing its animated assets in different environments for multiple platforms.”
Communication with SVGator
“Communication with the SVGator team was always seamless and felt personal. They've responded to all of my submitted feedback and feature suggestions very promptly and respectfully. And I was thrilled when SVGator announced the new mobile export capability following feedback!”
Final Thoughts
“I've been advocating for SVGator as our go-to tool for creating scalable vector animated assets on my team at Asurion for some time now, and it is exciting to see other designers pick up the tool as well. I’ve been noticing SVG animations start popping up in many of our digital products.”
Want to share your own experience with SVGator? Get in touch with us here and have your insight featured on our blog, Facebook, Instagram, or Twitter!
