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's products are built for web extraction developers and enterprise companies. That's a technical audience, but every technical user was once a first-time user, and first-time users need a different kind of communication. The challenge was threefold. How do you explain a complex technical product to someone who hasn't used it yet? How do you make onboarding feel consistent across multiple different products? And how do you do all of that in a way that doesn't feel like reading a manual? The answer wasn't more text. It was the right metaphor, brought to life.
Challenge
Making the Complex Feel Simple
Zyte's products are built for web extraction developers and enterprise companies. That's a technical audience, but every technical user was once a first-time user, and first-time users need a different kind of communication. The challenge was threefold. How do you explain a complex technical product to someone who hasn't used it yet? How do you make onboarding feel consistent across multiple different products? And how do you do all of that in a way that doesn't feel like reading a manual? The answer wasn't more text. It was the right metaphor, brought to life.
Challenge
Making the Complex Feel Simple
Zyte's products are built for web extraction developers and enterprise companies. That's a technical audience, but every technical user was once a first-time user, and first-time users need a different kind of communication. The challenge was threefold. How do you explain a complex technical product to someone who hasn't used it yet? How do you make onboarding feel consistent across multiple different products? And how do you do all of that in a way that doesn't feel like reading a manual? The answer wasn't more text. It was the right metaphor, brought to life.
Challenge
Making the Complex Feel Simple
Zyte's products are built for web extraction developers and enterprise companies. That's a technical audience, but every technical user was once a first-time user, and first-time users need a different kind of communication. The challenge was threefold. How do you explain a complex technical product to someone who hasn't used it yet? How do you make onboarding feel consistent across multiple different products? And how do you do all of that in a way that doesn't feel like reading a manual? The answer wasn't more text. It was the right metaphor, brought 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.
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 sketching anything, I used the How Might We framework to reframe the problem as an opportunity. How might we make the onboarding steps feel less overwhelming? How might we use metaphors to greet, inform, and gently guide new users forward? How might we create a visual language that could stretch across multiple products without feeling repetitive?
Those questions gave me a creative direction before I had a single answer. They also became the filter for every idea that came after.
Research
Framing the Problem with How Might We
Before sketching anything, I used the How Might We framework to reframe the problem as an opportunity. How might we make the onboarding steps feel less overwhelming? How might we use metaphors to greet, inform, and gently guide new users forward? How might we create a visual language that could stretch across multiple products without feeling repetitive?
Those questions gave me a creative direction before I had a single answer. They also became the filter for every idea that came after.
Research
Framing the Problem with How Might We
Before sketching anything, I used the How Might We framework to reframe the problem as an opportunity. How might we make the onboarding steps feel less overwhelming? How might we use metaphors to greet, inform, and gently guide new users forward? How might we create a visual language that could stretch across multiple products without feeling repetitive?
Those questions gave me a creative direction before I had a single answer. They also became the filter for every idea that came after.
Research
Framing the Problem with How Might We
Before sketching anything, I used the How Might We framework to reframe the problem as an opportunity. How might we make the onboarding steps feel less overwhelming? How might we use metaphors to greet, inform, and gently guide new users forward? How might we create a visual language that could stretch across multiple products without feeling repetitive?
Those questions gave me a creative direction before I had a single answer. They also became the filter for every idea that came after.
Collaborating With the Lead Technical Manager
I worked closely with the Lead Technical Manager to develop ideas, themes, and storyboards before anything went to stakeholders. Those conversations were invaluable. They helped me understand the technical reality of what users were actually stepping into, what the product did, what the first few actions looked like, and where new users most commonly got stuck.
Going in that deep before picking up a pencil meant the metaphors I proposed were grounded in how the product actually worked, not just how I imagined it might.
Collaborating With the Lead Technical Manager
I worked closely with the Lead Technical Manager to develop ideas, themes, and storyboards before anything went to stakeholders. Those conversations were invaluable. They helped me understand the technical reality of what users were actually stepping into, what the product did, what the first few actions looked like, and where new users most commonly got stuck.
Going in that deep before picking up a pencil meant the metaphors I proposed were grounded in how the product actually worked, not just how I imagined it might.
Collaborating With the Lead Technical Manager
I worked closely with the Lead Technical Manager to develop ideas, themes, and storyboards before anything went to stakeholders. Those conversations were invaluable. They helped me understand the technical reality of what users were actually stepping into, what the product did, what the first few actions looked like, and where new users most commonly got stuck.
Going in that deep before picking up a pencil meant the metaphors I proposed were grounded in how the product actually worked, not just how I imagined it might.
Collaborating With the Lead Technical Manager
I worked closely with the Lead Technical Manager to develop ideas, themes, and storyboards before anything went to stakeholders. Those conversations were invaluable. They helped me understand the technical reality of what users were actually stepping into, what the product did, what the first few actions looked like, and where new users most commonly got stuck.
Going in that deep before picking up a pencil meant the metaphors I proposed were grounded in how the product actually worked, not just how I imagined it might.
Design Solutions
Storyboarding and Sketching
With the problem framed and the technical context understood, I moved into storyboarding. I mapped out each onboarding moment as a small story. What is the user doing, what do they need to understand, and what feeling should they walk away with?
From there I sketched concepts and validated them with the Tech Lead before committing to anything. Fast, rough, disposable sketches that answered one question at a time. Does this metaphor land? Does this visual communicate the right thing? Is this too abstract or just abstract enough?
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
With the problem framed and the technical context understood, I moved into storyboarding. I mapped out each onboarding moment as a small story. What is the user doing, what do they need to understand, and what feeling should they walk away with?
From there I sketched concepts and validated them with the Tech Lead before committing to anything. Fast, rough, disposable sketches that answered one question at a time. Does this metaphor land? Does this visual communicate the right thing? Is this too abstract or just abstract enough?
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
With the problem framed and the technical context understood, I moved into storyboarding. I mapped out each onboarding moment as a small story. What is the user doing, what do they need to understand, and what feeling should they walk away with?
From there I sketched concepts and validated them with the Tech Lead before committing to anything. Fast, rough, disposable sketches that answered one question at a time. Does this metaphor land? Does this visual communicate the right thing? Is this too abstract or just abstract enough?
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
With the problem framed and the technical context understood, I moved into storyboarding. I mapped out each onboarding moment as a small story. What is the user doing, what do they need to understand, and what feeling should they walk away with?
From there I sketched concepts and validated them with the Tech Lead before committing to anything. Fast, rough, disposable sketches that answered one question at a time. Does this metaphor land? Does this visual communicate the right thing? Is this too abstract or just abstract enough?
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 core creative challenge was finding metaphors that made technical concepts feel intuitive without dumbing them down. A proxy manager sending a request and returning a response. Waiting for your first API call. A successful extraction completing.
These are precise, technical moments. But they also have a shape to them, a journey, a cause and effect that can be visualized. I proposed several metaphors rooted in that logic, ones that spoke to what was actually happening under the hood but communicated it through something a brand new user could immediately understand and feel.
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 core creative challenge was finding metaphors that made technical concepts feel intuitive without dumbing them down. A proxy manager sending a request and returning a response. Waiting for your first API call. A successful extraction completing.
These are precise, technical moments. But they also have a shape to them, a journey, a cause and effect that can be visualized. I proposed several metaphors rooted in that logic, ones that spoke to what was actually happening under the hood but communicated it through something a brand new user could immediately understand and feel.
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 core creative challenge was finding metaphors that made technical concepts feel intuitive without dumbing them down. A proxy manager sending a request and returning a response. Waiting for your first API call. A successful extraction completing.
These are precise, technical moments. But they also have a shape to them, a journey, a cause and effect that can be visualized. I proposed several metaphors rooted in that logic, ones that spoke to what was actually happening under the hood but communicated it through something a brand new user could immediately understand and feel.
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 core creative challenge was finding metaphors that made technical concepts feel intuitive without dumbing them down. A proxy manager sending a request and returning a response. Waiting for your first API call. A successful extraction completing.
These are precise, technical moments. But they also have a shape to them, a journey, a cause and effect that can be visualized. I proposed several metaphors rooted in that logic, ones that spoke to what was actually happening under the hood but communicated it through something a brand new user could immediately understand and feel.
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 collaborated with the Product Team's Lead Technical Manager to develop ideas and storyboards for stakeholders. Once concepts were validated, I used Adobe Illustrator to create clean vector illustrations that followed Zyte's brand guidelines. Illustrating for animation means designing elements as separate layers for movement, not just for looks.
After exporting the SVGs, I animated them with SCSS and jQuery to guide the user's eye naturally. The live CodePen embeds here are my own work.
Graphic Design and Code
From SVG to CSS — Animating in Code
I collaborated with the Product Team's Lead Technical Manager to develop ideas and storyboards for stakeholders. Once concepts were validated, I used Adobe Illustrator to create clean vector illustrations that followed Zyte's brand guidelines. Illustrating for animation means designing elements as separate layers for movement, not just for looks.
After exporting the SVGs, I animated them with SCSS and jQuery to guide the user's eye naturally. The live CodePen embeds here are my own work.
Graphic Design and Code
From SVG to CSS — Animating in Code
I collaborated with the Product Team's Lead Technical Manager to develop ideas and storyboards for stakeholders. Once concepts were validated, I used Adobe Illustrator to create clean vector illustrations that followed Zyte's brand guidelines. Illustrating for animation means designing elements as separate layers for movement, not just for looks.
After exporting the SVGs, I animated them with SCSS and jQuery to guide the user's eye naturally. The live CodePen embeds here are my own work.
Graphic Design and Code
From SVG to CSS — Animating in Code
I collaborated with the Product Team's Lead Technical Manager to develop ideas and storyboards for stakeholders. Once concepts were validated, I used Adobe Illustrator to create clean vector illustrations that followed Zyte's brand guidelines. Illustrating for animation means designing elements as separate layers for movement, not just for looks.
After exporting the SVGs, I animated them with SCSS and jQuery to guide the user's eye naturally. 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 is one I'm genuinely proud of because it sits at the intersection of everything I love doing. Research, illustration, design, and code, all working together toward one goal to make a user feel welcome in a product that could have felt intimidating.
It also taught me that the best onboarding doesn't explain everything. It explains just enough, in just the right way, to give someone the confidence to take the next step on their own.
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 is one I'm genuinely proud of because it sits at the intersection of everything I love doing. Research, illustration, design, and code, all working together toward one goal to make a user feel welcome in a product that could have felt intimidating.
It also taught me that the best onboarding doesn't explain everything. It explains just enough, in just the right way, to give someone the confidence to take the next step on their own.
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 is one I'm genuinely proud of because it sits at the intersection of everything I love doing. Research, illustration, design, and code, all working together toward one goal to make a user feel welcome in a product that could have felt 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 is one I'm genuinely proud of because it sits at the intersection of everything I love doing. Research, illustration, design, and code, all working together toward one goal to make a user feel welcome in a product that could have felt intimidating.
It also taught me that the best onboarding doesn't explain everything. It explains just enough, in just the right way, to give someone the confidence to take the next step on their own.
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.