Hearth AI

See how Serif helped Hearth AI craft a human-centered platform with intuitive UX and strategic design. A case study in product innovation.

Introduction

Hearth AI is redefining how people connect and manage relationships by building a smart, agentic tool that acts as an extension of its users. At its core, Hearth helps individuals maintain meaningful connections, keep track of key details, and ensure nothing important falls through the cracks—empowering users to focus on building relationships, not managing logistics. Hearth is a seed stage company.

My Role

When I joined Hearth AI, the product was in its early stages, with an innovative vision but significant challenges in translating that vision into a cohesive and impactful user experience. My role was multi-faceted, leading design and product strategy while partnering closely with the CEO to:

  • Define and refine core product roles
  • Create intuitive designs that aligned with the company’s ambitious vision
  • Lead user research efforts to ground decisions in user needs and behaviors

This case study will focus on three critical initiatives:

  1. Iterating the onboarding experience to deliver immediate value
  2. Defining core AI Agent competencies that maximized user impact
  3. Building a scalable design language to ensure consistency and efficiency across the product

Through these efforts, I helped lay the foundation for Hearth AI’s continued evolution as a powerful, user-focused tool.

Onboarding Experience

The Problem

When I joined Hearth AI, the product had no onboarding experience in place. New users were dropped into the interface with little guidance, which left them unsure of how to get started or realize the product’s potential. This lack of structure resulted in a slow time-to-value and low engagement from first-time users.

Solution

I designed the product’s initial onboarding flow from the ground up, focusing on educating users about Hearth AI’s capabilities and walking them through key features. While the first iteration was effective in introducing the product, feedback from user sessions revealed that it wasn’t delivering the "magic moment" quickly enough. Users often felt overwhelmed by information and disconnected from the value the tool could provide.

To address this, I led multiple iterations of the onboarding experience, shifting our focus to:

  1. Quick Wins: Giving users an immediate taste of Hearth AI’s power by allowing users to interact directly with the agent from the start
  2. Personalization: Customizing the experience so users could see their goals and data reflected in the tool early on
  3. Iterative Testing: Continuously refining the flow based on real user feedback to strike a balance between education and immediate impact
Screenshot of onboarding workshop in FigJam
Workflow mapping in FigJam
Low fidelity wireframes of onboarding
Low fidelity mocks of the opening login page

User Research Insights

  • Confusion in Early Onboarding: User testing revealed that new users were unsure how the tool could fit into their workflows, which informed clearer microcopy and a more focused setup flow
  • The Need for Tangible Outputs: Users were most engaged when onboarding included tangible outputs they could act on immediately, such as their first AI-generated task or reminder
High fidelity mockup of onboarding
High fidelity mocks of the first version - originally one of many steps, we eventually boiled this down to just this screen for initial inputs
High fidelity mockup of onboarding
First version of user education - we replaced this with chat interactions with the agent in order to focus the core value proposition

Key Changes

  • Designed the Initial Onboarding Flow: I created the first-ever onboarding process, introducing users to Hearth AI’s core capabilities step-by-step and ensuring they felt supported in their first interaction
  • Streamlined Subsequent Iterations: I replaced static, educational screens with interactive elements that showcased the product’s value through action. For example, based on the user’s LinkedIn profile, the agent suggested a relevant contact group which became the basis for their first experiences in the product
  • Incorporated Personalization: Introduced a dynamic setup process to tailor the tool to individual users’ needs, allowing them to interact with their own contacts rather than trying to educate with dummy data
  • Reduced Time to Value: Moved the most impactful feature demonstrations to the beginning of onboarding, ensuring users reached their "aha" moment within the first step

The video above depicts the final version of the agent interaction - we continuously got verbal “woah”s during onboarding, and users immediately “got it” when they started using the product

Results

  • Faster Onboarding Completion: Reduced onboarding time significantly, without sacrificing personalization or depth
  • Increased Engagement: More users began leveraging core features immediately after onboarding, such as setting reminders or creating notes, driving a measurable increase in retention

Starting from a blank slate allowed me to create a structured, user-focused flow that evolved with the product. By embedding user feedback into every iteration, we built an onboarding experience that felt intuitive, personalized, and impactful from the very first interaction.

Core AI Agent Competencies

The Problem

When I joined Hearth AI, the product's AI agent was ambitious but loosely defined. It aimed to assist users in managing relationships and staying organized, but the lack of clarity around its primary functions created challenges for development, usability, and user adoption. Without a clear focus, the agent risked trying to do too much while delivering limited tangible value to users.

The Goal

We needed to identify and refine the agent’s core competencies to deliver maximum impact to users. This meant determining which actions would provide the most immediate and meaningful value, ensuring the agent could function as a dependable, high-impact tool for its users.

The Solution

Through extensive user research, competitive analysis, and internal workshops, we narrowed the focus to four core pillars:

  1. Contact Creation – Helping users effortlessly organize and enrich their network
  2. Note Taking – Enabling seamless capture of important details during interactions
  3. Search – Providing fast, intuitive access to user-generated and AI-synthesized information
  4. Setting Reminders – Keeping users on track with timely follow-ups and actionable insights

I took the lead in building out the workflows for each of these competencies, ensuring they were intuitive, impactful, and aligned with user needs.

High fidelity mockup of home page
“Command center” showing top priority reminders - AI agent interactions created these reminders manually, in addition to automatically generating reminders based on your relationships
High fidelity mockup of contact view
Contact view with prominent notes created. Users could chat with the agent to create notes via web app, iOS app, or SMS texting the agent
High fidelity mockup of home page
Search results view show key information about each contact for scannability. Users would chat directly to create a new search

Key Changes

  • Prioritized Through Research: Conducted interviews and usability studies with early adopters to identify the features users found most valuable. This insight directly informed our decision to focus on these four competencies
  • Streamlined Workflows: Designed and iterated on user flows for each competency to ensure the AI agent could execute tasks seamlessly. For example:
    • Contact Creation: Users could add contacts manually or by sharing a social media profile link, with the agent conducting enrichment to complete the rest of the profile
    • Setting Reminders: A natural language interface allowed users to create reminders effortlessly, turning vague intentions like “follow up next week” into actionable tasks
  • Ensured Consistency: Aligned the design and interaction patterns across all four competencies to provide a cohesive and intuitive user experience
  • Supported Technical Implementation: Partnered with engineers to translate workflows into scalable designs that could be implemented efficiently

User Research Insights

  • Users valued low-friction interactions, preferring automation or lightweight inputs over complex configurations. For example, contact creation workflows included pre-filled suggestions based on past interactions
  • Many users struggled with tools that lacked context-awareness, which led us to prioritize features like reminders and search that dynamically responded to user data
  • Simplified actions were key—users wanted the agent to handle repetitive tasks, but the workflows still needed to allow for manual adjustments when needed

Results

  • Higher Engagement: Users were more likely to interact with the agent regularly, one of our key activation metrics
  • Focused Development Roadmap: By defining and refining these competencies, the engineering team could focus on delivering depth and quality within these areas, improving the overall product experience

Defining the core competencies for Hearth AI’s agent was a pivotal step in transforming it from a generalist tool into a purpose-driven assistant. This project highlighted the value of focus: by honing in on what users needed most, we created workflows that were not only useful but also delightful. Balancing automation with user control was another key lesson, ensuring the agent felt both powerful and adaptable. These competencies laid a strong foundation for Hearth AI to grow and deliver on its vision of helping users build and maintain meaningful connections.

Scalable Design Language

The Problem

When I joined Hearth AI, the product’s design system was inconsistent and fragmented. Each feature was built in isolation, with custom components and ad-hoc styling that lacked cohesion. This approach created several challenges:

  • Inconsistencies in User Experience: Visual and interaction patterns varied across the product, making it harder for users to learn and navigate the tool
  • Inefficient Design Process: Developers frequently recreated components, leading to wasted time and resources
  • Scalability Issues: As new features were added, the lack of a unified system made it increasingly difficult to maintain quality and consistency

The Goal

To create a cohesive design language that:

  1. Unified the product’s visual and interaction patterns
  2. Streamlined the design-to-development handoff process
  3. Provided a scalable foundation for future features and iterations

The Solution

I led the effort to develop Hearth AI’s first scalable design language and UI system, building on the existing design foundation while introducing consistency and structure. This involved:

  1. Auditing the Existing Product: Conducted a thorough review of all screens and components to identify redundancies, inconsistencies, and pain points
  2. Defining Core Principles: Established a set of guiding principles for the design language—such as simplicity, clarity, and approachability—to ensure every element felt cohesive and aligned with the brand
  3. Building a Component Library: Created a library of reusable components (e.g., buttons, modals, input fields) that adhered to consistent styling and interaction patterns
  4. Documenting the System: Compiled detailed documentation for the design language, including usage guidelines and component specs
  5. Collaborating with Developers: Partnered closely with engineers to ensure components were implemented consistently and efficiently across the front end
Style guide and color palette
Sample of the color palette developed

Key Contributions

  • Simplified Visual Hierarchy: Redesigned screens to reduce visual clutter, making key actions more prominent and improving overall usability
  • Reusable Components: Built flexible, scalable components that could adapt to various use cases while maintaining a consistent look and feel. For example, the button system supported multiple styles (e.g., primary, secondary, tertiary) and was used across all workflows.
  • Color and Typography Standards: Established a color palette and typography scale that ensured readability, accessibility, and brand alignment.
  • Interaction Consistency: Defined interaction patterns (e.g., hover states, animations) to create a seamless experience across all features.
Sample of design system
Example button component including three styles and four states
Sample of design system
Example modal component, providing the building blocks for many product features
Sample of design system
Example specialized component - the chat input, with color and icon indicators of active state

Impact on the Team

  • Accelerated Feature Development: The reusable component library reduced the time needed to design and develop new features, enabling faster iteration cycles
  • Improved Collaboration: The documented design system provided clarity for developers, reducing miscommunication and ensuring smoother handoffs
  • Onboarding New Team Members: When the team brought on a full-time designer, the design system served as a critical onboarding tool, helping them quickly get up to speed and contribute effectively

Results

  • Cohesive Experience: Users reported feeling more confident navigating the product, as the consistent patterns reduced cognitive load
  • Faster Development: Reduced the design and development timeline for new features
  • Scalable Foundation: The system has supported multiple product iterations without sacrificing quality or cohesion

Building Hearth AI’s scalable design language and UI system was a critical step in enabling the product to grow effectively. This project reinforced the importance of investing in foundational design work early, as it not only improved the user experience but also empowered the team to work more efficiently.

Conclusion

Working with Hearth AI was a rewarding experience that showcased the transformative impact of thoughtful design and strategy. From building the first onboarding experience to defining the core competencies of the AI agent and creating a scalable design language, my contributions helped shape a product that is intuitive, impactful, and aligned with user needs. These efforts drove improvements in user satisfaction, engagement, and retention while enabling the team to iterate quickly and efficiently. Together with the CEO and the broader team, we laid a strong foundation for Hearth AI to achieve its vision of helping users build and nurture meaningful connections. This project not only delivered immediate wins for the product but also set the stage for sustainable growth and continued innovation.