Hermae
Onboarding Flow
Hermae
Onboarding Flow
Designed Hermae’s onboarding flow to help engineers quickly understand the product’s value, resulting in a faster setup experience and stronger early engagement.
Designed Hermae’s onboarding flow to help engineers quickly understand the product’s value, resulting in a faster setup experience and stronger early engagement.
MY ROLE
MY ROLE
Product Designer
Product Designer
TOOLKIT
TOOLKIT
Figma
Figma
TIMELINE
TIMELINE
Apr 2024 - June 2024
Apr 2024 - June 2024
01. CONTEXT & IMPACT
01. CONTEXT & IMPACT
The work I did and the difference it made 👍
The work I did and the difference
it made 👍
I designed the onboarding experience for Hermae, an AI assistant that helps engineers understand their design systems faster. This was a contract project for an early-stage startup with a tight timeline, so we focused on keeping the flow simple with user and business goals always in mind. I worked closely with PMs, engineers, and another designer to build an experience that showed value right away and made the AI feel genuinely helpful from the start. The goal was to guide new users through connecting their company's design system, then land them in a dashboard where they could interact with the AI, explore components, and get answers fast. Here’s what that work led to:
I designed the onboarding experience for Hermae, an AI assistant that helps engineers understand their design systems faster. This was a contract project for an early-stage startup with a tight timeline, so we focused on keeping the flow simple with user and business goals always in mind. I worked closely with PMs, engineers, and another designer to build an experience that showed value right away and made the AI feel genuinely helpful from the start. The goal was to guide new users through connecting their company's design system, then land them in a dashboard where they could interact with the AI, explore components, and get answers fast. Here’s what that work led to:
Improved early engagement and user understanding
Improved early engagement and user understanding
Streamlined the process for new users to connect to their design system
Streamlined the process for new users to connect to their design system
Created an experience that showed value from the first interaction
Created an experience that showed value from the first interaction
02. OVERVIEW
02. OVERVIEW
Designing the first impression 😊
Designing the first impression 😊
Hermae is an AI assistant that helps engineers onboard faster by turning complex design system docs into simple, searchable answers. I designed an onboarding experience that builds trust and helps users get from “what is this?” to “this is useful” in minutes.
Hermae is an AI assistant that helps engineers onboard faster by turning complex design system docs into simple, searchable answers. I designed an onboarding experience that builds trust and helps users get from “what is this?” to “this is useful” in minutes.
03. THE CHALLENGE
03. THE CHALLENGE
Why we need better onboarding 🤞
Why we need better onboarding 🤞
Most onboarding flows are slow, unclear, and kind of boring. They take too long, don’t feel engaging, and often leave users confused about what to do next. New users aren't seeing the value fast enough, and the setup process doesn't feel intuitive or confidence-building.
Most onboarding flows are slow, unclear, and kind of boring. They take too long, don’t feel engaging, and often leave users confused about what to do next. New users aren't seeing the value fast enough, and the setup process doesn't feel intuitive or confidence-building.
04. RESEARCH
04. RESEARCH
User patterns from competitors 🧩
User patterns from competitors 🧩
I analyzed onboarding patterns from tools like Notion and Duolingo to understand how they create early engagement. I also annotated articles on user drop-off and the importance of interactive experiences to gain insights into user goals. Here's what I learned:
I analyzed onboarding patterns from tools like Notion and Duolingo to understand how they create early engagement. I also annotated articles on user drop-off and the importance of interactive experiences to gain insights into user goals. Here's what I learned:
User's drop off the product when there's no clear value early on
Interactive experiences make complex tools feel accessible
Overloaded flows and passive steps reduce user confidence
05. IDEATION
05. IDEATION
Mapping out the core flow 🗺️
Mapping out the core flow 🗺️
I brainstormed with the other designer, a PM, and engineers to map the core flow. One idea that stuck: show Hermae “reading” the user’s Storybook link in real time so they immediately see the AI in action. We simplified the flow down to just a few essential steps:
I brainstormed with the other designer, a PM, and engineers to map the core flow. One idea that stuck: show Hermae “reading” the user’s Storybook link in real time so they immediately see the AI in action. We simplified the flow down to just a few essential steps:
06. ITERATIVE REFINEMENT
06. ITERATIVE REFINEMENT
Shaping the experience together 💪
Shaping the experience
together 💪
We didn’t get everything right on the first try. Since this was a fast-moving contract project, we relied on tight feedback loops to keep things moving in the right direction. We shared early flows and wireframes during team meetings, walking through decisions with PMs, and engineers.
With each round, we refined things and simplified steps that felt unnecessary. A few things that changed along the way:
Split the onboarding flow into two key parts: the loading flow and the value flow
Moved account creation later in the flow so users could preview value before committing
We added subtle visual cues to help users understand when the AI was “doing something”
We didn’t get everything right on the first try. Since this was a fast-moving contract project, we relied on tight feedback loops to keep things moving in the right direction. We shared early flows and wireframes during team meetings, walking through decisions with PMs, and engineers.
With each round, we refined things and simplified steps that felt unnecessary. A few things that changed along the way:
Split the onboarding flow into two key parts: the loading flow and the value flow
Moved account creation later in the flow so users could preview value before committing
We added subtle visual cues to help users understand when the AI was “doing something”
07. FINAL DESIGNS
07. FINAL DESIGNS
The finished flow 🙌
The finished flow 🙌
The final onboarding flow is split into two parts: the loading flow and the value flow. The loading flow guides users through connecting their Storybook link while Hermae processes and reads their design system. During this phase, we focused on keeping things clear and visually active to prevent drop-off. Once the AI finishes loading, users enter the value flow—where they’re introduced to exactly what Hermae can do.
The final onboarding flow is split into two parts: the loading flow and the value flow. The loading flow guides users through connecting their Storybook link while Hermae processes and reads their design system. During this phase, we focused on keeping things clear and visually active to prevent drop-off. Once the AI finishes loading, users enter the value flow—where they’re introduced to exactly what Hermae can do.
The value flow
The value flow
The loading flow
The loading flow
08. REFLECTION
08. REFLECTION
What I learned 🤔
What I learned 🤔
This project taught me how to move fast while still staying focused on what makes a good user experience. Since it was for an early-stage startup, things were constantly shifting and we had to make quick decisions and keep things flexible. I learned how to balance user needs with business goals and make the flow feel simple without overthinking it. If I had more time, I definitely would’ve done more testing with a larger sample size and explored more iterations, but overall I’m proud of how we were able to create something that feels intuitive and showcases the value of the product.
This project taught me how to move fast while still staying focused on what makes a good user experience. Since it was for an early-stage startup, things were constantly shifting and we had to make quick decisions and keep things flexible. I learned how to balance user needs with business goals and make the flow feel simple without overthinking it. If I had more time, I definitely would’ve done more testing with a larger sample size and explored more iterations, but overall I’m proud of how we were able to create something that feels intuitive and showcases the value of the product.
