Over several months, Code.gov’s team began a deep dive into the user experience (or UX, as designers and developers refer to it) of our website. You can get a look at some of this UX research here and here from our blog, but what we discovered in our various test audiences is that our website, while functional, was in need of improvement. Truth be told, we were ready for a redesign. There was nothing wrong with how people interacted with our website, but there is something to be said for refreshing our platform every so often. With tools emerging like the U.S. Web Design System 2.0, the opportunity to create a new look was hard to avoid. So we put our creative heads together for the next edition of Code.gov.
What Did Testing Tell Us?
When you are looking at how you do things online, you find yourself asking tough questions about your site’s design. Yes, you can get many things right but there’s nothing wrong with being your own harshest critic. We discovered in our testing a few areas in need of improvement:
- Branding. Code.gov was something of a trailblazer in its initial launch, but unfortunately that trailblazing strayed a bit from the branded color palette of its now host agency, GSA.
- Linking Conventions. From the Guidelines for GSA’s Digital Presence, “Every GSA domain must develop and post a clear and comprehensive policy for linking to other websites… at a minimum, these policies must be available from a Web Policies and Important Links page.” Code.gov fell short on this policy and needed an update reflecting its effort to comply.
- Layout. As mentioned earlier, the USWDS 2.0 offers a new design system taking advantage of a grid approach to design. The previous version of our website did not adhere to this, and this re-design is a first step in rectifying that.
While Code.gov was given kudos for an ease in navigation, there were many elements that prevented our website from succeeding as we desired. Sure, people could get around our site, but content was going missed on account of limitations from layout and accessibility was an issue. We could do better.
Welcome to Code.gov 2.0
With the results of our testing serving as a foundation for this redesign, we began work on making our website still easy to navigate and access. We began with removing the prominent flag banner, which many research participants said was distracting and didn’t add value to the site. We then moved forward in introducing improvements to this new and exciting version of our website.
- Improved Branding. Code.gov’s color choices and design reflect a streamlined layout. While our new color palette is similar to previous versions of our website, it now aligns to the USWDS color palette and we have incorporated the Source Sans Pro font family (from Helvetica Neue) in order to align with both GSA and the USWDS. We still kept, though, our distinctive TT Lakes font family for headers and subheaders throughout the site.
- Section 508 Compliance in Version 2.0. With the improved branding that includes a new color palette and typeface, Code.gov was able to improve its color and contrast combinations and align with the USWDS color palette in order to meet 508 compliance standards.
- Logo Update. Finally, the original Code.gov logo was updated to reflect our new color palette. The updated Code.gov logo remains simple in design while not detracting from other featured logos such as the GSA Star Mark when in use.
- News and events. As part of our continuing effort to foster community, we are now showcasing news and events. Upcoming hackathons and release notes are just a couple examples.
We are thrilled to begin this new chapter of innovation and creativity with you. Our new approach to a definitive online presence provides Code.gov with a differentiated visual identity system to complement updated content and streamlined user resources. By no means, though, does this mean that this website is “done” and will not change. We have said before that “Technology is always in a state of flux…” and we believe in always improving our platform in order to provide a better experience for you. We will continue to review and update key elements of our website as the Internet evolves. This redesign is part of “America’s Code” so that we can offers everyone a chance to fulfill a civic duty on a digital platform, one line of code at a time. We want to hear your own feedback to this new look at Code.gov so share your thoughts with us by email at email@example.com, Twitter, LinkedIn, or in the Comments section below. We hope to meet you online, to answer whatever questions you may have for us; and we look forward to talking with you.