Skip to main content
Coforma
Illustration showing three  dotGov icons: the United States Capitol building in a heart, and a clover-like shape of bubbles with human silhouettes inside coming together, and three pieces of paper with different symbols
Equity

Connecting the Design Community to a Dialogue on Public Good

We built a modern, accessible website to host AIGA DC’s largest digital event: DotGov Design Conference, connecting their creator community to critical conversations about designing for public good.

The Challenge

Client Name(s):
AIGA DC, DotGov Design
Delivery Date:
April 9, 2021

AIGA DC and the DotGov Design committee needed an online hub for the 2021 DotGov Design Conference.

DotGov Design, an initiative of AIGA DC, empowers and supports government designers through advocacy, professional development, and a regular conference. In the spring of 2021, with their conference fast approaching and save-the-date messages already out, the volunteer conference committee and leadership realized their site solution wasn’t accessible.

With just one month before registration would open, they sought support in the creation of a multipage website that would serve as the online home of the event and meet their requirements:

  • Proactively accessible, beyond compliance

  • Safe and secure

  • Leverage a conference brand developed by DC designers

  • Built dynamically, to be easily managed and scaled

Four dotGov icons: chat, lightbulb, pencil and ruler, and the United States Capitol building in a heart
Susan Taylor
When faced with the challenge of creating an accessible website that would appeal to our designer audience, Coforma saved the day with a thoughtful and functional solution. Not only were we thrilled with the result, but the process of working with the Coforma team was an absolute pleasure.
Susan TaylorDotGov Design Conference ChairAIGA DC

Our Approach

Knowing our short timeframe, we expanded existing brand assets into a design system and developed accessible patterns and components that could be easily connected to a content management system (CMS).

Coforma set out to help build an accessible, appealing, informative site that highlighted amazing speakers, inspired people working in the government space, and educated those who aspire to make the world a better place through government projects.

DotGov Website Homepage

We created new components and pages using the existing DotGov Design brand elements, and populated the site with clear content that allowed a diverse set of visitors to peruse conference offerings with ease and delight. Reusable site components will allow the DotGov Design folks to focus on planning high-quality content with its slate of impressive speakers and featured panelists each year.

DotGov's digital design system including buttons, form fields, icons, layouts, and more

An Accessible Experience

Our DotGov Design partners provided a logo, background pattern, and font for the site. Coforma’s design team built on those with a color palette with accessible contrast (AAA), a legible body font pairing, style guidelines, and implementation with testing. We worked closely with AIGA DC’s accessibility expert to finalize font sizes and line lengths.

Accessible-first

  • No tab stops out of view

  • Mobile navigation drawer using focus trapping

  • When the navigation drawer is open the content behind it is inert

  • Register button on every page that is accessible to the rotor menu on all devices

  • Heading sequence as appropriate

  • and much more...

Webpage scores

  • First byte time: A

  • Keep-alive enabled: A

  • Compress transfer: A

  • Cache static content: A

  • Effective use of CDN: A

Lighthouse Scores

  • Performance: 98

  • Accessibility: 100

  • Best Practices: 93

  • SEO: 100

DotGov Design Conference logo

The DotGov Design Conference logo was developed by DC DotGov members. We honored their design while expanding the design system.

Extending the Brand

We combined brand elements with thoughtfully constructed messaging and content to reiterate what’s important to DotGov Design—inclusion, collaboration, designing for public good, and meaningful, cutting edge approaches to improving and innovating within the civic design space.

Grid of red and blue outline icons, with friendly round edges

We created custom icons that built on the existing brand elements provided in thoughtful ways.

Custom Icons

We created an illustrative icon set that built on and expanded the existing brand elements provided in thoughtful ways.

Button and tag components, showing red and outline styles in all states (default, hover, active, focus)

Button variants that utilize design tokens, so they can be globally redesigned for future conferences.

Design Components for Tomorrow

Having just completed its second conference cycle in 2021, DotGov Design is in its infancy. In the years to come, the conference’s volunteer board will be able to use the CMS pages, layouts, content blocks, and forms to communicate and process registrations for future events—inclusively.

Project Team

  • AshleighAshleigh AxiosExperience Lead
  • ArdenArden KlemmerDesigner
  • JaredJared CunhaFront-End Engineer & Accessibility Specialist
  • AngelaAngela HopkinsContent Strategist
  • YoniYoni KnollBack-End Engineer

Technology

  • Figma for a branded design system

  • Adobe Illustrator for custom iconography and expanded logo variations

  • Google Fonts for typography

  • DigitalOcean for web hosting

  • BuddyWorks to support DevOps

  • Wagtail for the CMS

Practices

  • A systemized approach to design to allow for faster development and scaling

  • Accessible-first

  • Mobile-first

  • Co-design with stakeholders

  • Automated and manual testing