Wednesday, 25 August, 2021

Quahog: a design system & web platform for the State of Rhode Island

I haven’t been writing much in a while, and wanted to give folks a quick update on what I’ve been working on these past 15 months or so.

Over the past few years I’ve worked with Tom Viall, the General Manager of NIC Rhode Island, on pitching the state on a new web platform based in Drupal. Two years ago those plans finally started to gain traction. Right up until they ran headfirst into the brick wall of March 2020 and the beginning of the pandemic. But let me back up a bit and describe what we proposed.

I spent a couple years working with the State of Georgia’s Digital Services team on their Drupal-based web platform. During that time I gathered a lot of thoughts about what went well, and what I might do differently. Those decisions were based in some ways on evolutions in web technology and support, and others driven by likely team size. The Georgia project had a lot of folks involved, but I knew if we got the project off the ground in ‘lil Rhody, it was going to be a very lean affair.

The idea centered around complete content management system, theme, and package of functionality all tied up into a repeatable installation of Drupal that any agency could use. That meant the functionality had to be complete enough to satisfy the needs of many different agencies, the design had to strike the right balance of consistency and flexibility, and the network of sites as a whole had to work together as a cohesive collection of sites that would inspire confidence in and deliver services to the citizens of Rhode Island better than ever before. A tall order, but given what I’d seen in Georgia I knew it was possible.

The project came together between the State and NIC in late 2019, and I was slated to lead the project. I was responsible for the overall system architecture, creative direction on the design system, user research, strategy, and managing the development team. A lot to take on, but I knew that was the only way we could pull off the project with the budget and timeline presented. As the contract inched along, it looked like we’d be starting early 2020. Then, the day before the contract was slated to be signed, the first lockdowns were announced and everything ground to a halt. It took a while, but eventually we reworked the focus and timeline to center around COVID-19-related resources and we finally had a signed agreement to start work in June, 2020. The catch was we had to launch the COVID-related sites by the end of the year, giving us only about 6 months to get the platform designed and built, and launch the first three sites. (Spoiler alert: we did it)

I spent June and July writing up documentation, planning functionality, developing a content model, and conducting stakeholder and user research. At the same time I brought in the amazing team at Oomph, a Providence-based digital agency, to act as our development partner. To be honest that undersells the relationship: they contributed massively to the design effort, and have been a strategic partner at every step. We worked out a plan that would get us starting prototyping in August, based on the functional requirements and content model I’d been working on in July.

We also spent time documenting some of the guiding principles for design, accessibility, and performance. If there's one thing last year made exceedingly clear, it’s that government services must be accessible to all, no matter what. So many resources around the country, and indeed the world, simply were not up to the task. Information was out of date, informational websites crashed under load, and critical health guidance was unavailable sometimes for hours or even days at a time.

To ensure we were creating a platform centered around that idea of better digital equity, we new that not only did we need to meet stronger accessibility guidelines (in our case WCAG 2.1 AA), we also wanted to ensure that web performance was top-notch and respectful of all device and bandwidth scenarios. Since almost a third of the population access via mobile device only and often do not have broadband access at all, this was a critical aspect to consider.

Starting with a design system built in PatternLab, we created something that incorporates everything I’ve been working on and researching around responsive typography, variable fonts, user customization, light modes, and more. There are five different color themes (each with corresponding dark modes), all of which meet or exceed guidelines for color contrast and type sizes. User settings include light mode preference (explicit choice or ‘follow the system preference’); font-size, line-height, and word-spacing preferences, and multiple ways for agencies to support translation.

The design system is its own code repository, which is then pulled into a Drupal theme during the build process. This ensures that the design system itself can be used with other platforms and applications, but is still tied automatically into each site build. And all of the functionality is packaged up into a Drupal 9-based distribution and install profile which can be deployed with the click of a button on Acquia’s Site Factory platform. The icing on the cake? All three repositories are open source. Kudos to Rhode Island for taking such a bold step.

I’m happy to report that we did indeed launch those 3 sites by mid-December, 2020—and have since launched about 15 more, including the Governor’s and Lt. Governor’s sites. We have another 10 or so in development right now slated for launch next month. As much as possible, my role now that we're in more active migration mode has been to focus on helping the agencies with their information architecture and content strategy. We've also been iterating on some of the features and components now that we're seeing them in use. It's been a good strategy so far: build what we need, extend and iterate as necessary.

It’s been an absolutely incredible experience so far, and I’m incredibly proud of what we’ve done, especially in light of the size of our team. From the NIC site it has been myself, a project manager and two migration assistants, and the Oomph team. At Oomph, we had two back-end engineers, a front-end engineer, their design director, and a project manager. And at the state, it has been almost exclusively the head of web services and a project manager who has helped make possible meeting with a dozen agencies a week since last fall as we rotate through batches of migrations. All in all, a tiny team to deliver an incredible platform.

I’ll write more about some of the details, but as my time on the project is winding down, I wanted to capture at least some of what we’ve accomplished. If things continue at this pace, there will be 70 or so sites on the platform by the middle of next summer. I can’t wait to see how far it can go.

Some of the sites we’ve launched:

And here are some of the other places we’ve written or spoken about the project so far: