AHIP

America’s Health Insurance Plans (AHIP), a leading national trade association representing the health insurance community, recently worked with Viget to overhaul their website to better serve their customers in this incredibly complex space. We conducted a three month discovery process which included research and strategy, UX and visual design, and technical discovery. This was followed by a separate five month process including CMS configuration, front-end build, and third-party integration.

In the first project, my role was to conduct technical discovery, and in the second project I was technical lead.

Development Process

With multiple developers on the project, it was important to approach the work with a clear division of responsibilities. We also gave CMS setup and basic template integration a multi-week head start, followed by UI development and third-party integration. This allowed our development process to flow well and enabled the site to take shape structurally, independent of any UI development work.

Third Party Integration

During the initial technical discovery phase, several third-party service integrations were identified as areas of complexity: an existing single sign-on provider, as well as Algolia for site search. We secured extra development resources for these areas and I oversaw the efforts related to these integrations.

Craft CMS

Employing a clean slate approach to content modeling and front-end development, Craft CMS makes no assumptions about how content should be organized or consumed. Additionally, having a fully fleshed out content model from the phase-one project, provided a perfect blueprint for configuring sections and fields in Craft.

Front-End Interactions

For handling JavaScript interactions on the front-end, we chose Stimulus because of its lightweight “just enough” approach. It’s designed to enhance static or server-rendered HTML by connecting JavaScript controllers to elements on the page using simple data attribute annotations. This gave us a simple and consistent pattern to follow for adding interactivity to the front-end without much complexity.

Tailwind CSS

For styling on the front-end, we needed an approach that provided design system like constraints, yet be flexible enough to would allow the AHIP site to be extended over time, without the common problem of CSS stylesheet growth and bloat. Tailwind CSS solves this problem with its utility-first approach by providing all the necessary UI building blocks.

<dl class="space-y-24">
  <dt class="text-gray-dark uppercase">
    {{ heading }}
  </dt>
  {% for item in items %}
    <dd>
      <a href="{{ item.url }}" class="text-blue-dark focus:underline hover:underline">
        {{ item.title }}
      </a>
    </dd>
  {% endfor %}
</dl>

Key Takeaways

1. Conducting an initial technical discovery process up-front was key for determining scope for third-party integrations, and uncovering potential complexity.
2. A staggered timeline enabled an efficient development process by starting with a focus on structure, followed by UI development work.
3. For JavaScript functionality, the Stimulus framework provided simple and consistent patterns to follow without adding complexity.