Onboarding Users Seamlessly.
Enhancing user understanding of Hermae’s functionalities and maximizing feature interaction.
Hermae’s AI assistant streamlines the onboarding process for teams by analyzing design system documentation, particularly Storybook links. Storybook, a tool for building and organizing UI components, can be complex to navigate, especially for new team members. Hermae addresses this by scanning and interpreting these links, providing quick access to design components, UI patterns, and relevant documentation. This reduces the time spent on manual learning and helps everyone hit the ground running.
The onboarding experience demonstrates Hermae's value, showcasing its ability to simplify workflows and build confidence in users. Teams benefit from improved efficiency, instant access to resources, and faster onboarding, enhancing collaboration and productivity from day one.
WE ASKED OURSELVES...
How can we design an onboarding process for Hermae that effectively introduces users to its functionality, showcases a wow-factor, and maximizes the utilization of the AI Assistant within the workflow?
01
THE IMPORTANCE OF ONBOARDING
1. FIRST IMPRESSIONS 😄
Users love first impressions. The onboarding experience is what users are first welcomed with. A well-designed onboarding experience sets a positive tone from the jump.
2. REDUCING USER CONFUSION 📉
New users can easily feel overwhelmed by unfamiliar interfaces and features. A structured onboarding processguides them through essential functionalities, ensuring they understand how to use the product effectively.
3. MAXIMIZING VALUE ✨
Effective onboarding highlights the value and benefits of Hermae’s features, helping stakeholders see the immediate and long-term advantages of using the AI Assistant.
02
THE CURRENT ONBOARDING PROCESS (THE PROBLEM)
Onboarding experiences are often passive and unengaging, missing opportunities to excite and motivate new team members. Without interactive or dynamic approaches, organizations risk failing to make a strong first impression, which can affect long-term retention and satisfaction.
Onboarding can involve repetitive tasks, manual data entry, and unnecessary administrative steps. These inefficiencies not only delay productivity but also takes away from more meaningful onboarding activities, such as team integration or skills development.
03
UNDERSTANDING THE FLOW
Hermae’s onboarding process begins with users inputting the URL of their design system’s Storybook, enabling the AI assistant to analyze and understand the structure and components of the system. After entering their email address to create an account, Hermae fetches metadata from the organization’s website to provide context and ensure accurate association between users and their teams. The AI processes the Storybook URL, organizing and extracting relevant details, and generates a personalized welcome message with insights and resources to help users get started.
Finally, users authenticate through AuthKit and are redirected to a collaborative dashboard, where they can interact with the AI assistant to access design system resources and ask questions, streamlining workflows and enhancing team productivity.
This onboarding flow showed us how to simplify a complicated process and make it easier for users to get started. By automating tasks like processing design systems and setting up accounts and organizations, we created a smoother experience that feels seamless and intuitive. It also highlighted how Hermae’s AI can immediately provide useful insights and resources, helping users feel supported right away. Overall, it gave us a clearer picture of how to make the system more efficient and user-friendly while enhancing collaboration across teams.
04
THE RESEARCH PROCESS
We first decided to research more into the importance of user engagement during onboarding. We analyzed 3 UX articles about leveraging user engagement and retention in platforms.
1. GUIDANCE & SUPPORT 🤝
By offering guidance and support, effective onboarding can significantly reduce user drop-off rates.
2. USER DROP-OFF 👋
Long loading states and loading imagery can cause user drop-off. When users encounter long loading times, they can become frustrated and lose patience, leading them to leave the app or website.
3. COMPLEXITY 🧩
Complex onboarding steps can overwhelm users, leading to higher drop-off rates. Simplifying the process by reducing the number of steps, providing clear instructions, and using intuitive design elements helps users understand and engage with the product more effectively.
COMPETITIVE ANALYSIS
We then reviewed a few competitors to understand how they approached similar challenges, gathering insights into their strategies and identifying areas where we could differentiate and improve. Here's what we learned:
By providing hands-on demonstrations, such as Duolingo's introductory lessons or Notion's pre-populated templates, users can quickly understand the platform’s core features without feeling overwhelmed.
Competitors ensure users experience the platform’s benefits early, whether through showcasing rewards (Duolingo) or offering ready-to-use resources (Notion templates), encouraging them to continue exploring.
05
IDEATION
One of the main goals for our solution was to add a "wow-factor" that would really highlight what makes Hermae valuable. With that in mind, we wanted to create an onboarding experience that felt engaging and interactive. We also thought it would be cool to show the AI learning the design system in real-time, so users could see how it works and understand its capabilities right from the start.
Although the timeline was tight, we stayed focused on the user. We started by brainstorming the onboarding process and pinpointing common challenges, such as a non-interactive process or an overly complex flow.
While we couldn't conduct A/B testing, we continuously refined the onboarding flow based on internal feedback from key stakeholders, including engineers and PMs. We simplified the onboarding steps to focus on getting users up and running as quickly as possible.
06
FINAL DESIGNS
After identifying key challenges in traditional onboarding, such as a lack of engagement and time-consuming processes, we focused on designing an onboarding experience that was interactive, efficient, and impactful. The final designs for Hermae’s onboarding highlight dynamic user engagement to motivate new team members while streamlining workflows to eliminate unnecessary steps.
By integrating Hermae's AI assistant, the process becomes both intuitive and efficient. New users are introduced to the platform through a clear and visually engaging interface, motivating them to quickly navigate resources like design system components and Storybook links. This approach not only reduces onboarding time but also fosters a sense of confidence and excitement from the start .
Ultimately, the designs address the pain points of traditional onboarding by providing a solution that is easy to use, visually appealing, and capable of leaving a lasting positive impression on users.
07
REFLECTION & LEARNINGS
Working under a tight timeline required us to make decisions quickly and prioritize simplicity. One of the key lessons I learned was the importance of clear communication and setting realistic goals when time and resources are limited. This project taught me how to focus on delivering an MVP that meets user needs while staying flexible to future iterations.