Herald API

Herald is an Insurance Tech Series A startup that is transforming commercial insurance through their API platform. Under the mentorship of Gabriel Diaz, Senior Product Owner at Herald API, I gained valuable insights into both the technical and business aspects of an early-stage startup. This project's goal was to help enhance Herald API’s web presence through four overlaying components. First, a series of graphics is produced to support and explain complex topics that the API offers. These informative graphics were created to help improve developer understanding. Secondly, a general website audit was run that assessed user experience, navigation, accessibility, and performance. Thirdly, a detailed competitive analysis was run to compare Herald to other B2B websites and against their competitors. With all of these components, I developed some pages to help fill the gaps that Herald was facing, specifically with their brand recognition to build stronger customer trust. Together, all of these components crafted a strategic approach to improve Herald API’s market position.

Problem Statement

Herald faces three main challenges: some of its documentation lacks clear visuals for complex features, its website navigation is sometimes inconsistent, and its lack of case studies and success stories fails to show potential clients what it can do.

My solution to these challenges was creating clear visual documentation for the complex problems, standardizing UI design across the website, and building out pages for future case studies and testimonials.

Educational Content for Herald Docs

Developing imagery for the Herald website's "docs" section was an enlightening and iterative process. As a visual communicator, my goal was to create clear, informative graphics that would help developers understand the various sections of the API. This project had a focus on Webhooks. As the first step in the project, this was a great way for me to gain a better understanding of what Herald does as a company; which further helped me with the next steps in the mentorship.

The project began with meetings with my mentor to discuss the concept of Webhooks. These were crucial as they helped me grasp the Herald brand, their offerings, and laid the foundation for future projects. We explored how Webhooks work, their benefits, and how they differ from traditional polling methods.

After gaining a solid understanding, I started sketching initial concepts. The challenge was to make complex information into visually appealing and easily digestible graphics. I experimented with different diagram styles to effectively convey how data is circulated between clients, Herald, and the insurance companies. Through multiple iterations and feedback sessions with my mentor, we refined the imagery and created the visuals for webhooks. We focused on creating visuals that not only explained at a base level but also showed the advantages of using Webhooks in the Herald API.

The final set of images we settled on includes:

Overview of Webhooks in Herald's API
Webhooks vs. traditional polling
Webhook usage and flow diagrams
Webhook integration in API structure

These images aim to provide developers with a clear, visual understanding of Webhooks, making the documentation more accessible and user-friendly. Creating these visuals not only improved the docs webpage but also deepened my understanding of Herald’s core concepts.

Herald API Website Audit

This UX Audit of Herald API aims to evaluate and improve the Herald API website. My goal is to identify what works well and gaps that need improvement. Herald is a platform that provides an API that quickly compares commercial insurance quotes for brokers. The goal is to examine user experience, site navigation, usability, accessibility, content quality, and how it compares to competitors.

Target User Base and Goals

Target User Base: Herald primarily serves brokerage firms and their developers who need to compare commercial insurance quotes. The product is an API that connects users to multiple carriers and insurance products quickly.

User control and freedom: There are a few roadblocks when navigating around the site. The “Insurance API Index” page removes the navigation to get back to the main page or other pages of the Herald site. Having roadblocks like this can be frustrating for a user when pages aren’t consistent.

Consistency and standards: There have been a few consistency issues on Herald’s site. One is navigation, it was mentioned before when entering dead ends or roadblocks like the API Index navigation bar disappearing. Another instance is on the “News” page, the ‘Company’ dropdown has Partnerships but on “Changelog” it disappears.

Button Inconsistencies: There was a lot of capitalization inconsistencies in "Read More" buttons across all pages. The low contrast blue button presents accessibility concerns and should be adjusted to meet WCAG guidelines. The "Become A Partner" button animation is engaging but requires proper alignment on the page.

While Herald mostly has consistent design elements, addressing these minor issues will further improve the platform's cohesive user experience. The standardization of button styles, text capitalization, and navigation elements will enhance overall usability and professional appearance.

Competitor Analysis

The competitor analysis examines how similar companies in the B2B and API space present their services, with a particular focus on case studies, testimonials, and social proof. By analyzing competitors like Bundl, Limit, Sayata, and other notable B2B platforms, we aim to identify effective strategies and areas where Herald can improve its market positioning. This analysis compares value proposition, target audience, user experience, and content presentation.

Bundl's Key Features:

Quantitative achievements - showcasing measurable results
Diverse case studies across different industries
Detailed study pages with comprehensive information

Limit's Key Features:

Clear value proposition in their messaging
Emphasis on direct quotes from clients
Market transparency tool for better understanding

Sayata's Key Features:

Distinct market segmentation approach
Emphasis on user-friendly interface design
Prominent testimonials from satisfied clients

Based on the competitive analysis with Sayata, Limit, and Bundl, here are the suggestions I made to help improve Herald's site:

Enhance case studies and testimonials: Develop more detailed, industry-specific case studies and client testimonials, similar to Bundl's approach. This will provide potential clients with in-depth insights into Herald's capabilities and results.
Highlight quantitative achievements: Prominently display impressive statistics that showcase Herald's impact, similar to Bundl's "90+ Ventures Launched" and "€1.5bn+ New Value Created".
Improve user experience for non-technical users: While maintaining the API focus, consider adding more user-friendly features for non-technical users to broaden Herald's appeal.
Emphasize time-saving and efficiency gains: Highlight the time-saving and efficiency benefits that Herald's API can provide, similar to how Sayata emphasizes these advantages.
Highlight industry diversity: Showcase case studies from various sectors to demonstrate Herald's versatility across different industries, similar to Bundl's approach.
Improve social proof: Add more detailed client testimonials and emphasize partnerships with recognizable brands to build trust and credibility

Gap Analysis & Best Practices

Detailed Case Studies: Develop comprehensive case studies that include specific challenges, solutions, and quantifiable results. For example, Bundl provides in-depth case studies with project timelines, key metrics, and detailed descriptions of challenges and solutions.

Industry-Specific Examples: Showcase case studies from various sectors to demonstrate versatility across different industries, similar to Bundl's approach.

Quantitative Achievements: Prominently display impressive statistics that showcase your API's impact. For instance, highlight metrics like "65% reduction in quote processing time" or "40% increase in policy bind rate".

Client Testimonials: Include detailed testimonials from recognizable brands in the insurance industry. For example, feature quotes from executives at major insurance companies like Chubb.

Visual Elements: Incorporate visually appealing elements such as infographics, charts, or interactive success maps to illustrate your API's advantages and impact across different regions.

Filtering Options: Allow visitors to filter case studies by industry sector (e.g., Property & Casualty, Life & Health, Specialty Lines) to help them find relevant examples quickly.

Video Testimonials: Include short video clips of clients discussing their experience with your API to add a personal touch and build trust.

Integration Showcase: Highlight different ways clients have integrated your API into their existing systems, demonstrating flexibility and ease of use.

Visual Recommendations

Using Figma, I created several ideas to make Herald's case study pages more compelling and easier to use. The new designs feature a clean, organized layout with client success stories arranged in a grid. These pages stay true to Herald's brand while making it easier for potential clients to see the value of the services provided by Herald.

The landing page was designed to serve as a comprehensive hub for Herald's success stories, incorporating their established brand guidelines to maintain visual consistency across the platform. A grid layout, inspired by successful competitor implementations, provides an intuitive and engaging way to browse case studies. The design prominently features statistics and metrics that demonstrate concrete results, making it easy for potential clients to understand Herald's impact and value proposition. This approach not only showcases Herald's achievements but also creates a professional and user-friendly experience that aligns with its position as a leading API provider in the insurance industry.

The mockup of the Chubb partner page exemplifies how Herald effectively showcases strategic partnerships while maintaining brand integrity. The design carefully balances Herald's established visual identity with Chubb's brand elements, creating a cohesive narrative that highlights the strength of the collaboration. Key metrics and integration success stories are prominently featured to demonstrate the partnership's impact, while the strategic placement of calls-to-action throughout the page guides potential partners through a clear engagement journey. This approach not only validates Herald's position in the insurance API space but also serves as a compelling template for future partner showcases.

I also assisted in the development of the “Partnerships” to show who we work with and invite others to be one of our partners. The current website designer asked for my feedback on the page and it was designed well, but my recommendation was to add a call to action closer to the bottom, there was no way for a user to become a partner without scrolling back up. Having a clear CTA after scrolling down held the page together and gave them an option of where to go next.

Implementation Strategy

Our plan for improving Herald's case studies and social proof is to create an easy-to-navigate experience that clearly shows clients what makes Herald great. We will first focus on the larger name brands that will make the biggest impact in getting potential customers interested and engaged.

Featured Case Study: Hero section with key metrics, client quote, and solution imagery
Results Grid: Animated metrics display with 3-4 key statistics per row
Social Proof: Industry-grouped logo carousel with hover details
Integration Showcase: Timeline view with code snippets and demos
CTA's: High-contrast buttons with A/B tested copy

Conclusion

This project helped improve Herald API's market position through strategic improvements to its website. Through informative graphics, website auditing, competitive analysis, and added content, I improved both their documentation and user experience. The addition of case studies to their site and supportive visual elements has created a more accessible platform while building stronger customer trust and brand recognition.

What I Learned

This project taught me valuable lessons through hands-on UX design work, including creating informative API graphics, conducting website audits, analyzing competitors, and designing pages in Figma. These experiences helped me develop both technical and creative skills while working on real-world solutions:

Design Process

Design Approach: Design isn't a straight line - it's about creating, getting feedback, and making things better.
Working with Others: Learned how to take feedback and turn it into better designs.
Project Skills: Got better at managing complex projects and deadlines.

Industry Knowledge

Insurance Tech: Learned how insurance startups work and what makes them unique.
Technical Side: Better understanding of APIs and how they help insurance companies.
Startup Environment: Gained insight into startup operations, culture, and business development processes.

UX Skills

User Focus: Learned to balance user needs with business goals through user-centered design
Research: Gained practical experience in user research methods and applying findings
Tools: Developed expertise in Figma

My mentors helped me understand both the theory and practical side of UX design in a startup environment. Most importantly, this experience showed me that UX design is definitely the career path I want to pursue. I love how it combines creativity, problem-solving, and making things better for users.

Next Steps

Moving forward, I plan to continue doing work for Herald to help develop their website and imagery through:

Documentation Enhancement: Create and implement new visual assets, diagrams, and illustrations to make technical documentation more accessible and understandable.
Webpage Development: Continue iterating on webpage designs, particularly focusing on the case studies and partnership sections to maximize user engagement.
UX Optimization: Regularly assess and refine user experience through analytics, user feedback, and industry best practices to ensure optimal platform performance.
Content Strategy: Develop additional educational content and resources to support users in maximizing the value of Herald's API.
Visual Identity: Maintain consistency in visual elements while exploring new ways to present technical information effectively.