Interview: How Code and Theory built NY.Gov

Ben Moss.
April 15, 2016
Interview: How Code and Theory built NY.Gov.

Successful web design hinges on good research, targeting the right demographic, identifying key problems and developing appropriate solutions.

But how you start when your target demographic is literally, everyone? How do you structure a site when it serves a vast array of disparate needs? How do you set about designing a site for a whole state? When they were approached to design NY.Gov for the state of New York, these are just some of the challenges Code and Theory faced.

We sat down with Matthieu Mingasson, Code and Theory’s Director of Creative Strategy, to ask him a little about how typical workflows stand up to the demands of such large-scale public projects.

Planning challenges

Webdesigner Depot: When you sat down for your first meeting, what’s the first question you asked? Where do you start with a project of this scale? Matthieu Mingasson: Reimagining the way that constituents interact with local and state information requires a good understanding of the audience specificities and business requirements. We started with a set of questions that would help us to understand the needs and expectations of New York State constituents when it comes to interacting with their government, and more specifically the government’s website. i.e:
  • What do New York Constituents need from their State Government?
  • How do they generally interact with the NY.gov website?
  • What are the main needs per segments?
  • What are the main pain points that need to be addressed?
Understanding user needs and business goals is a critical phase of any project. It can spread across several weeks, during which we meet the main stakeholders and representative users. WDD: New York State has close to 20 million residents, how do you set about prioritizing the needs of an entire state? MM: It was a difficult task, indeed, as we had to define a solution that worked for everyone. [pullquote]we defined…24 reasons why users visited the site…solving these queries would help more than 70 percent of the traffic[/pullquote] Since the beginning our approach was to identify user needs based mainly on data. This made the prioritization much easier. We did a search query analysis to help us identify what people searched for when visiting the existing site. From this analysis we grouped keywords based on affinity, and we defined a group of 24 reasons why users visited the site. We approximated that solving these queries would help more than 70 percent of the traffic. We also worked closely with Rachel Haot's team, (former) Chief Digital Officer of New York State to define areas where we could innovate and provide value to our users. This is demonstrated in our news distribution, emergency pages, and local resources provided in the site. WDD: What was the planning phase like? Did you run workshops with key stakeholders for example? MM: We had a 10 week definition phase. During the first 5 weeks we conducted user research, stakeholder interviews and data analysis. By the first five weeks we had collected all the information we needed, and started defining our creative strategy. We had strategic check-ins with the client. We had usability research sessions as early as possible; testing our assumptions with visual design comps. ny-gov-1

Handling public sector clients

Webdesigner Depot: Was there a lot of red tape to cut through? Matthieu Mingasson: Not at all. We worked with an extremely collaborative and available team. Governor Cuomo has a very talented team in charge of digital operations. We had full collaboration from agencies, technology and the new editorial team set in charge of maintaining ny.gov. Our challenge was mainly focused on how we could make the site more accessible to our users, which was very rewarding. WDD: How does crafting an experience for such a huge client differ from regular projects? MM: Our approach is very similar when working with big and small clients.The difference between a large and a small projects essentially comes down to time and depth dedicated to research and problem solving for complex system design. [pullquote]The difference between a large and a small projects essentially comes down to time and depth dedicated to research and problem solving for complex system design[/pullquote] Our methodological framework allows us to design anything, large or small. One of the critical aspects of our approach is speed. We strongly believe in keeping a small, lean team to help us move faster. We also like working with constraints. We always make sure we have a definite launch date against which we can build our project plan. For NY.gov, the process was very collaborative thanks to the amazing collaboration from the State team that was committed to launching the site on time. WDD: Were there existing brand guidelines in place, or did you work on the identity as well? MM: The brand guidelines were being redefined in tandem with our product development. We saw this as an opportunity to contribute to those guidelines. It is challenging to go back to changing the logo of the site. But this also gave us a lot of room to explore the brand and identify its digital presence. After this project we had the opportunity to prepare the digital guidelines not only for NY.Gov but for all the different agencies in the State. We had to closely follow accessibility guidelines in order to be able to design for everyone, and this was a challenging but rewarding experience. WDD: How did you coordinate content delivery from so many different departments? MM: After we identified key services we prepared “one stops” for each to lead agency site owners. In some instances agencies needed to collaborate to create the content. We created content guidelines for them to follow, and provided with a collaborative documentation for them to work from. We asked the agencies to work directly from a shared documentation allowing our team and the NYS team to monitor and advise the agencies. Later we included all the “white listed cards” results—these are explanations on how to accomplish something within a card that usually deep-links a user to an agency site. These “white listed cards” also had their own content guidelines. The agency content owners helped us collect and categorize all this data by using a google form.

Building NY.Gov

Webdesigner Depot: Do you live in NY state? Did that affect your process? Matthieu Mingasson: We all live in New York City but our team was very international. We had a German-Canadian, French, Russian, Mexican, Indian and also Americans from diverse states in the core team. We believe that having an outsider view helped us identify trends and challenges that locals may have missed. We had to make sure to interview many of our users from upstate to help stay in touch with other mindsets. But, we knew our design needed to be universal and speak to everyone. WDD: You have a drop down menu on mobile, supplemented with a hamburger menu at key points; was that a decision based on user testing? MM: Our goal was to build a system that could be adopted by a large number of agencies from New York. For this we had to establish a system of navigation and contextual elements. The universal navigation, the bar that clearly communicates to the user they are in a trusted site with resources and service information, uses the dropdown menu. The hamburger is brought in contextually for agency navigation. You can see an example in the Office of Governor Andrew Cuomo’s website (governor.ny.gov). This site extends the system we have created for NY.Gov and applies it to other New York State Agencies. ny-gov-2 WDD: You built the site in Drupal, what made that the right choice for this project? MM: The NY.gov project was the first site of a growing eco-system. From the very beginning we knew the centralized technology services agency was planning to have a common CMS platform for more than 150 websites. Drupal’s inherent extendibility is a perfect match for this challenge. WDD: Was there anything you really wanted to include that the client vetoed? MM: Not really. But we did build one of our favorite features that did not perform well on user testing so we had to remove from the site. This was an expandable universal navigation: In the dropdown panel users could preview and explore the most popular services, programs and news; users didn't want to preview the content, they wanted to click and go to the page.

The results

Webdsigner Depot: Have you analysed how real people are interacting with the site? Are they using it as expected? Any surprises? Matthieu Mingasson: We do, all the time. We see our friends looking up how to get a driver license or when an emergency happens, like the snow storm this January, ny.gov becomes the main source of information. Our biggest surprise was the universal navigation, and realizing how much people love being able to find events, job listings, and local information around them. [pullquote]when an emergency happens, like the snow storm this January, ny.gov becomes the main source of information[/pullquote] WDD: If New Jersey calls tomorrow and says it needs a website, what are the biggest challenges it will face? MM: Executive sponsorship and commitment is key to being able to launch a project like this. To overcome challenges of a government organization, the key is assigning a small but dedicated leadership team to collaborate with an agency. The best results come when our clients understand, accept and facilitate this change process. Transparent collaboration and openness is key to success. Thanks to Matthieu for taking the time to answer our questions. Featured image uses Marco Varisco’s New York State Capitol image.

Ben Moss

Ben Moss has designed and coded work for award-winning startups, and global names including IBM, UBS, and the FBI. When he’s not in front of a screen he’s probably out trail-running.

Read Next

20 Best New Websites, May 2024

Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…

Exciting New Tools for Designers, May 2024

This year, we’ve seen a wave of groundbreaking apps and tools. AI is reshaping the industry, enhancing productivity,…

Using AI to Predict Design Trends

Design trends evolve at a blistering pace, especially in web design. On multi-month projects, you might work on a…

15 Best New Fonts, April 2024

Just like web design, type design follows trends. And while there’s always room for an exciting outsider, we tend to…

3 Essential Design Trends, May 2024

Integrated navigation elements, interactive typography, and digital overprints are three website design trends making…

How to Write World-Beating Web Content

Writing for the web is different from all other formats. We typically do not read to any real depth on the web; we…

20 Best New Websites, April 2024

Welcome to our sites of the month for April. With some websites, the details make all the difference, while in others,…

Exciting New Tools for Designers, April 2024

Welcome to our April tools collection. There are no practical jokes here, just practical gadgets, services, and apps to…

How Web Designers Can Stay Relevant in the Age of AI

The digital landscape is evolving rapidly. With the advent of AI, every sector is witnessing a revolution, including…

14 Top UX Tools for Designers in 2024

User Experience (UX) is one of the most important fields of design, so it should come as no surprise that there are a…

What Negative Effects Does a Bad Website Design Have On My Business?

Consumer expectations for a responsive, immersive, and visually appealing website experience have never been higher. In…

10+ Best Resources & Tools for Web Designers (2024 update)

Is searching for the best web design tools to suit your needs akin to having a recurring bad dream? Does each…