Onboarding Animations
Product Designer
Web Data Extraction
I designed and built a series of animated onboarding screens to engage new users. Illustrated metaphors, coded by hand in SCSS and jQuery, that turned a potentially overwhelming first experience into something that actually felt good to go through.
Onboarding Animations
Product Designer
Web Data Extraction
I designed and built a series of animated onboarding screens to engage new users. Illustrated metaphors, coded by hand in SCSS and jQuery, that turned a potentially overwhelming first experience into something that actually felt good to go through.
Onboarding Animations
Product Designer
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
Product Designer
Web Data Extraction
I designed and built a series of animated onboarding screens to engage new users. Illustrated metaphors, coded by hand in SCSS and jQuery, that turned a potentially overwhelming first experience into something that actually felt good to go through.
SVG
Illustrations coded by hand
Multi
Products onboarded
SCSS
Animation method
2018
Year
SVG
Illustrations coded by hand
Multi
Products onboarded
SCSS
Animation method
2018
Year
SVG
Illustrations coded by hand
Multi
Products onboarded
SCSS
Animation method
2018
Year
Challenge
Making the Complex Feel Simple
Zyte builds tools for web extraction devs and enterprise teams. Even though our users are pretty technical, everyone starts out as a beginner. First-time users need a different kind of onboarding. Here’s what we had to figure out: How do you explain a complex product to someone new? How do you keep onboarding consistent across different products? And how do you do all that without making it feel like a boring manual? More text wasn’t the answer. We needed the right metaphor, and we had to make it feel real.
Challenge
Making the Complex Feel Simple
Zyte builds tools for web extraction devs and enterprise teams. Even though our users are pretty technical, everyone starts out as a beginner. First-time users need a different kind of onboarding. Here’s what we had to figure out: How do you explain a complex product to someone new? How do you keep onboarding consistent across different products? And how do you do all that without making it feel like a boring manual? More text wasn’t the answer. We needed the right metaphor, and we had to make it feel real.
Challenge
Making the Complex Feel Simple
Zyte builds tools for web extraction devs and enterprise teams. Even though our users are pretty technical, everyone starts out as a beginner. First-time users need a different kind of onboarding. Here’s what we had to figure out: How do you explain a complex product to someone new? How do you keep onboarding consistent across different products? And how do you do all that without making it feel like a boring manual? More text wasn’t the answer. We needed the right metaphor, and we had to make it feel real.
Challenge
Making the Complex Feel Simple
Zyte builds tools for web extraction devs and enterprise teams. Even though our users are pretty technical, everyone starts out as a beginner. First-time users need a different kind of onboarding. Here’s what we had to figure out: How do you explain a complex product to someone new? How do you keep onboarding consistent across different products? And how do you do all that without making it feel like a boring manual? More text wasn’t the answer. We needed the right metaphor, and we had to make it feel real.
DESIGN PROCESS
From Idea to Animated Code
01
HMW framework
Reframed the problem as an opportunity before generating any ideas.
02
Storyboards
Mapped each onboarding moment as a small story before sketching anything.
03
Sketch and validate
Fast, disposable sketches validated with the Tech Lead before illustrating.
04
Illustrate and animate
Adobe Illustrator to SVG, then SCSS and jQuery to bring it to life.
DESIGN PROCESS
From Idea to Animated Code
01
HMW framework
Reframed the problem as an opportunity before generating any ideas.
02
Storyboards
Mapped each onboarding moment as a small story before sketching anything.
03
Sketch and validate
Fast, disposable sketches validated with the Tech Lead before illustrating.
04
Illustrate and animate
Adobe Illustrator to SVG, then SCSS and jQuery to bring it to life.
DESIGN PROCESS
From Idea to Animated Code
01
HMW framework
Reframed the problem as an opportunity before generating any ideas.
02
Storyboards
Mapped each onboarding moment as a small story before sketching anything.
03
Sketch and validate
Fast, disposable sketches validated with the Tech Lead before illustrating.
04
Illustrate and animate
Adobe Illustrator to SVG, then SCSS and jQuery to bring it to life.
DESIGN PROCESS
From Idea to Animated Code
01
HMW framework
Reframed the problem as an opportunity before generating any ideas.
02
Storyboards
Mapped each onboarding moment as a small story before sketching anything.
03
Sketch and validate
Fast, disposable sketches validated with the Tech Lead before illustrating.
04
Illustrate and animate
Adobe Illustrator to SVG, then SCSS and jQuery to bring it to life.
Research
Framing the Problem with How Might We
Before I started sketching, I used the How Might We framework to turn the problem into something we could actually solve. I asked questions like: How can we make onboarding less overwhelming? How can we use metaphors to welcome and guide new users? How can we build a visual language that works across different products without getting boring?
These questions set the direction for the project before I had any answers. I used them to filter every idea that came up after.
Research
Framing the Problem with How Might We
Before I started sketching, I used the How Might We framework to turn the problem into something we could actually solve. I asked questions like: How can we make onboarding less overwhelming? How can we use metaphors to welcome and guide new users? How can we build a visual language that works across different products without getting boring?
These questions set the direction for the project before I had any answers. I used them to filter every idea that came up after.
Research
Framing the Problem with How Might We
Before I started sketching, I used the How Might We framework to turn the problem into something we could actually solve. I asked questions like: How can we make onboarding less overwhelming? How can we use metaphors to welcome and guide new users? How can we build a visual language that works across different products without getting boring?
These questions set the direction for the project before I had any answers. I used them to filter every idea that came up after.
Research
Framing the Problem with How Might We
Before I started sketching, I used the How Might We framework to turn the problem into something we could actually solve. I asked questions like: How can we make onboarding less overwhelming? How can we use metaphors to welcome and guide new users? How can we build a visual language that works across different products without getting boring?
These questions set the direction for the project before I had any answers. I used them to filter every idea that came up after.
Collaborating With the Lead Technical Manager
I teamed up with the Lead Technical Manager to brainstorm ideas, nail down themes, and sketch out storyboards before sharing anything with stakeholders. These chats were super helpful. I got a clear picture of what users actually experience, what the product does, what the first steps look like, and where new folks usually hit roadblocks.
Digging in early like this meant any metaphors we came up with actually matched how the product worked, not just what I thought it might do.
Collaborating With the Lead Technical Manager
I teamed up with the Lead Technical Manager to brainstorm ideas, nail down themes, and sketch out storyboards before sharing anything with stakeholders. These chats were super helpful. I got a clear picture of what users actually experience, what the product does, what the first steps look like, and where new folks usually hit roadblocks.
Digging in early like this meant any metaphors we came up with actually matched how the product worked, not just what I thought it might do.
Collaborating With the Lead Technical Manager
I teamed up with the Lead Technical Manager to brainstorm ideas, nail down themes, and sketch out storyboards before sharing anything with stakeholders. These chats were super helpful. I got a clear picture of what users actually experience, what the product does, what the first steps look like, and where new folks usually hit roadblocks.
Digging in early like this meant any metaphors we came up with actually matched how the product worked, not just what I thought it might do.
Collaborating With the Lead Technical Manager
I teamed up with the Lead Technical Manager to brainstorm ideas, nail down themes, and sketch out storyboards before sharing anything with stakeholders. These chats were super helpful. I got a clear picture of what users actually experience, what the product does, what the first steps look like, and where new folks usually hit roadblocks.
Digging in early like this meant any metaphors we came up with actually matched how the product worked, not just what I thought it might do.
Design Solutions
Storyboarding and Sketching
Once I had a handle on the problem and the tech side, we jumped into storyboarding. We broke down each onboarding step into a mini story: what is the user doing here, what do they need to get, and how should they feel after?
After that, I started sketching out ideas and checked in with the Tech Lead before locking anything in. I kept the sketches quick and rough, just enough to answer one question at a time. Does this metaphor make sense? Is the visual clear? Is it the right level of abstract?
Sketch
Early concept mapping the progress of all steps needed to successfully send a request.
Validation
Concepts thoroughly validated and fully prepared for the illustration and animation stage.
Design Solutions
Storyboarding and Sketching
Once I had a handle on the problem and the tech side, we jumped into storyboarding. We broke down each onboarding step into a mini story: what is the user doing here, what do they need to get, and how should they feel after?
After that, I started sketching out ideas and checked in with the Tech Lead before locking anything in. I kept the sketches quick and rough, just enough to answer one question at a time. Does this metaphor make sense? Is the visual clear? Is it the right level of abstract?
Sketch
Early concept mapping the progress of all steps needed to successfully send a request.
Validation
Concepts thoroughly validated and fully prepared for the illustration and animation stage.
Design Solutions
Storyboarding and Sketching
Once I had a handle on the problem and the tech side, we jumped into storyboarding. We broke down each onboarding step into a mini story: what is the user doing here, what do they need to get, and how should they feel after?
After that, I started sketching out ideas and checked in with the Tech Lead before locking anything in. I kept the sketches quick and rough, just enough to answer one question at a time. Does this metaphor make sense? Is the visual clear? Is it the right level of abstract?
Sketch
Early concept mapping the progress of all steps needed to successfully send a request.
Validation
Concepts thoroughly validated and fully prepared for the illustration and animation stage.
Design Solutions
Storyboarding and Sketching
Once I had a handle on the problem and the tech side, we jumped into storyboarding. We broke down each onboarding step into a mini story: what is the user doing here, what do they need to get, and how should they feel after?
After that, I started sketching out ideas and checked in with the Tech Lead before locking anything in. I kept the sketches quick and rough, just enough to answer one question at a time. Does this metaphor make sense? Is the visual clear? Is it the right level of abstract?
Sketch
Early concept mapping the progress of all steps needed to successfully send a request.
Validation
Concepts thoroughly validated and fully prepared for the illustration and animation stage.
Design Solutions
Proposing Metaphors for Technical Concepts
The main challenge here was coming up with metaphors that made technical stuff feel easy to get, but still accurate. Think about a proxy manager sending a request and getting a response, or waiting for your first API call, or seeing an extraction finish up.
These are all pretty technical moments, but they each have a flow: a start, something happening, and a result. We came up with a few metaphors based on that, so even if you’re new, you can see what’s going on behind the scenes and actually get it right away.
Illustration
User sends a request through a proxy manager and receives a response from the targeted website. A technical concept made visual.
Design Solutions
Proposing Metaphors for Technical Concepts
The main challenge here was coming up with metaphors that made technical stuff feel easy to get, but still accurate. Think about a proxy manager sending a request and getting a response, or waiting for your first API call, or seeing an extraction finish up.
These are all pretty technical moments, but they each have a flow: a start, something happening, and a result. We came up with a few metaphors based on that, so even if you’re new, you can see what’s going on behind the scenes and actually get it right away.
Illustration
User sends a request through a proxy manager and receives a response from the targeted website. A technical concept made visual.
Design Solutions
Proposing Metaphors for Technical Concepts
The main challenge here was coming up with metaphors that made technical stuff feel easy to get, but still accurate. Think about a proxy manager sending a request and getting a response, or waiting for your first API call, or seeing an extraction finish up.
These are all pretty technical moments, but they each have a flow: a start, something happening, and a result. We came up with a few metaphors based on that, so even if you’re new, you can see what’s going on behind the scenes and actually get it right away.
Illustration
User sends a request through a proxy manager and receives a response from the targeted website. A technical concept made visual.
Design Solutions
Proposing Metaphors for Technical Concepts
The main challenge here was coming up with metaphors that made technical stuff feel easy to get, but still accurate. Think about a proxy manager sending a request and getting a response, or waiting for your first API call, or seeing an extraction finish up.
These are all pretty technical moments, but they each have a flow: a start, something happening, and a result. We came up with a few metaphors based on that, so even if you’re new, you can see what’s going on behind the scenes and actually get it right away.
Illustration
User sends a request through a proxy manager and receives a response from the targeted website. A technical concept made visual.
Graphic Design and Code
From SVG to CSS — Animating in Code
I worked with our Lead Technical Manager on the Product Team to come up with ideas and storyboards for stakeholders. After we landed on the concepts, I jumped into Illustrator to make vector illustrations that fit Zyte’s brand. When illustrating for animation, I set up everything in separate layers so things can actually move, not just look good.
Once the SVGs were ready, I used SCSS and jQuery to animate them and help guide the user’s attention. The live CodePen embeds here are my own work.
Graphic Design and Code
From SVG to CSS — Animating in Code
I worked with our Lead Technical Manager on the Product Team to come up with ideas and storyboards for stakeholders. After we landed on the concepts, I jumped into Illustrator to make vector illustrations that fit Zyte’s brand. When illustrating for animation, I set up everything in separate layers so things can actually move, not just look good.
Once the SVGs were ready, I used SCSS and jQuery to animate them and help guide the user’s attention. The live CodePen embeds here are my own work.
Graphic Design and Code
From SVG to CSS — Animating in Code
I worked with our Lead Technical Manager on the Product Team to come up with ideas and storyboards for stakeholders. After we landed on the concepts, I jumped into Illustrator to make vector illustrations that fit Zyte’s brand. When illustrating for animation, I set up everything in separate layers so things can actually move, not just look good.
Once the SVGs were ready, I used SCSS and jQuery to animate them and help guide the user’s attention. The live CodePen embeds here are my own work.
Graphic Design and Code
From SVG to CSS — Animating in Code
I worked with our Lead Technical Manager on the Product Team to come up with ideas and storyboards for stakeholders. After we landed on the concepts, I jumped into Illustrator to make vector illustrations that fit Zyte’s brand. When illustrating for animation, I set up everything in separate layers so things can actually move, not just look good.
Once the SVGs were ready, I used SCSS and jQuery to animate them and help guide the user’s attention. The live CodePen embeds here are my own work.
Waiting for your first request. The empty state made welcoming.
Waiting for your first request. The empty state made welcoming.
I reused SVG elements to efficiently animate multiple actions and transitions.
I reused SVG elements to efficiently animate multiple actions and transitions.
While the user’s account was provisioning, we designed an engaging animation of IPs preparing to be sent.
While the user’s account was provisioning, we designed an engaging animation of IPs preparing to be sent.
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.
Conclusion
Where Design and Code Meet
This project brought together everything I enjoy: research, illustration, design, and code. The goal was simple: make users feel welcome in a product that might otherwise seem intimidating.
I learned that good onboarding isn't about explaining everything. It's about giving just enough info, in the right way, so users feel confident moving forward.
01
Metaphors are a design tool. The right one makes a complex concept feel obvious.
02
Illustrating for animation means thinking in motion from the very first sketch.
03
Onboarding earns trust. The first five minutes determine whether someone comes back.
04
Validation before illustration saves hours. A bad metaphor is expensive once it's been drawn.
Conclusion
Where Design and Code Meet
This project brought together everything I enjoy: research, illustration, design, and code. The goal was simple: make users feel welcome in a product that might otherwise seem intimidating.
I learned that good onboarding isn't about explaining everything. It's about giving just enough info, in the right way, so users feel confident moving forward.
01
Metaphors are a design tool. The right one makes a complex concept feel obvious.
02
Illustrating for animation means thinking in motion from the very first sketch.
03
Onboarding earns trust. The first five minutes determine whether someone comes back.
04
Validation before illustration saves hours. A bad metaphor is expensive once it's been drawn.
Conclusion
Where Design and Code Meet
This project brought together everything I enjoy: research, illustration, design, and code. The goal was simple: make users feel welcome in a product that might otherwise seem intimidating.
Metaphors are a design tool. The right one makes a complex concept feel obvious.
Illustrating for animation means thinking in motion from the very first sketch.
Onboarding earns trust. The first five minutes determine whether someone comes back.
Validation before illustration saves hours. A bad metaphor is expensive once it's been drawn.
Conclusion
Where Design and Code Meet
This project brought together everything I enjoy: research, illustration, design, and code. The goal was simple: make users feel welcome in a product that might otherwise seem intimidating.
I learned that good onboarding isn't about explaining everything. It's about giving just enough info, in the right way, so users feel confident moving forward.
Metaphors are a design tool. The right one makes a complex concept feel obvious.
Illustrating for animation means thinking in motion from the very first sketch.
Onboarding earns trust. The first five minutes determine whether someone comes back.