Onboarding Animations
2018
Web Data Extraction
I developed SCSS and jQuery onboarding animations that engage new users of the company's data extraction application. The animations help first-time users better understand how to use the product.
Onboarding Animations
2018
Web Data Extraction
I developed SCSS and jQuery onboarding animations that engage new users of the company's data extraction application. The animations help first-time users better understand how to use the product.
Onboarding Animations
2018
Web Data Extraction
I developed SCSS and jQuery onboarding animations that engage new users of the company's data extraction application. The animations help first-time users better understand how to use the product.
Challenge
Zyte Data has excellent products catered to web extraction developers and enterprise companies. As the company exerted effort to sell more of its products, it needed a seamless onboarding experience for new users.
Challenge
Zyte Data has excellent products catered to web extraction developers and enterprise companies. As the company exerted effort to sell more of its products, it needed a seamless onboarding experience for new users.
Challenge
Zyte Data has excellent products catered to web extraction developers and enterprise companies. As the company exerted effort to sell more of its products, it needed a seamless onboarding experience for new users.
Design Solutions
User Research
I collaborated with the Product Team's Lead Technical Manager to share, develop ideas, themes, and storyboards to present to the stakeholders. I asked questions around a theme to be reused throughout the experience since many products needed onboarding. How might we make the steps less overwhelming and use metaphors to greet, inform, engage users to continue with the onboarding steps into the unknown?
Solution Sketches
To help new users of a remote-based company's data extraction application, I lead the design and development of animated onboarding screens. – I worked on sketching and validating concepts with the Tech Lead to ensure the product met user expectations during onboarding. – I used Adobe Illustrator to finalize sketches and followed brand guidelines and SCSS animations. It was a new and enjoyable experience. – I proposed several metaphors that aimed at data extraction for new users. – I utilized SCSS animations to give life to SVG illustrations.
Design Solutions
User Research
I collaborated with the Product Team's Lead Technical Manager to share, develop ideas, themes, and storyboards to present to the stakeholders. I asked questions around a theme to be reused throughout the experience since many products needed onboarding. How might we make the steps less overwhelming and use metaphors to greet, inform, engage users to continue with the onboarding steps into the unknown?
Solution Sketches
To help new users of a remote-based company's data extraction application, I lead the design and development of animated onboarding screens. – I worked on sketching and validating concepts with the Tech Lead to ensure the product met user expectations during onboarding. – I used Adobe Illustrator to finalize sketches and followed brand guidelines and SCSS animations. It was a new and enjoyable experience. – I proposed several metaphors that aimed at data extraction for new users. – I utilized SCSS animations to give life to SVG illustrations.
Onboarding animation sketch concept to list the progress of all steps needed to successfully send a request.
Onboarding animation sketch concept to list the progress of all steps needed to successfully send a request.
Onboarding animation sketch concept to list the progress of all steps needed to successfully send a request.
These onboarding concepts were thoroughly validated and fully prepared for the illustration and animation stage.
These onboarding concepts were thoroughly validated and fully prepared for the illustration and animation stage.
These onboarding concepts were thoroughly validated and fully prepared for the illustration and animation stage.
Graphic Design
SVG to CSS
To create code-ready animations, I first convert hand-drawn sketches into clean vector illustrations using Adobe Illustrator. After refining and optimizing these graphics as SVG files, they become lightweight, scalable assets that are easy to animate and integrate directly into code.
Graphic Design
SVG to CSS
To create code-ready animations, I first convert hand-drawn sketches into clean vector illustrations using Adobe Illustrator. After refining and optimizing these graphics as SVG files, they become lightweight, scalable assets that are easy to animate and integrate directly into code.
Graphic Design
SVG to CSS
To create code-ready animations, I first convert hand-drawn sketches into clean vector illustrations using Adobe Illustrator. After refining and optimizing these graphics as SVG files, they become lightweight, scalable assets that are easy to animate and integrate directly into code.
IP request concept I illustrated. User sends a request through a proxy manager, and returns the response from the targeted website.
IP request concept I illustrated. User sends a request through a proxy manager, and returns the response from the targeted website.
IP request concept I illustrated. User sends a request through a proxy manager, and returns the response from the targeted website.
Waiting for your first request.
Waiting for your first request.
Waiting for your first request.
Successful request.
Successful request.
Successful request.
The result of the animated svg in the product's onboarding flow.
The result of the animated svg in the product's onboarding flow.
The result of the animated svg in the product's onboarding flow.
© 2026 telo santos
© 2026 telo santos
© 2026 telo santos