User research, conceptualization, visualization, coding, and testing
SUMMARY
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.
The company 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.
User Research
In UX design, onboarding is a set of techniques and interactions aimed at comforting users and giving the product's initial introduction.
– Telo Santos, Product Designer
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?
Design Solutions
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.
These onboarding concepts were thoroughly validated and fully prepared for the illustration and animation stage.
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.
Successful request.
This code snippet example in SCSS is used to animate all the SVG illustrations, which helped me apply my coding skills and saved the company money while reducing development time.
The result of the animated svg in the product's onboarding flow.
