Discover the power of open source
Code.gov is a platform that shares federal government source code for agency reuse and public consumption, driving innovation as well as time and cost savings resulting from code collaboration and reuse.
I was a Civic Digital Fellow on the Code.gov team, focusing on front-end development and design. For the first nine weeks of my summer internship, I worked on Code.gov’s integration of the U.S. Web Design System 2.0 to improve website usability and accessibility. This first project was a part of Code.gov’s implementation of the website modernization requirements of the 21st Century Integrated Digital Experience Act (21st Century IDEA). Read more about this project and see the changes live on Code.gov.
For the last week of my summer internship, I worked on designing and prototyping a new website on open source using Figma to support Code.gov’s community outreach and educational initiatives. This second project is detailed in the following section.
Code.gov’s Outreach Site Design
Problem
One of Code.gov’s goal is to become the go-to place for federal agency program managers and developers when they are looking for more information on how to create and manage open source projects. Additionally, Code.gov seeks to provide information related to open source for general consumption as well. The Code.gov team has written an array of content related to open source, from how to document open source projects to cultivating collaborative coding communities. However, this content largely exists in many different repositories on GitHub (such as code-gov and code-gov-open-source-toolkits) in Markdown files. This makes it hard for users to find these guides and resources and renders it inaccessible to the general public as it assumes a working knowledge of how to navigate GitHub. The Code.gov team wanted to establish a separate outreach site that would live on a subdomain of Code.gov that would serve as a hub for information about open source, rather than the actual code (which is housed on the current site).
Role
I spearheaded a week-long design sprint, outlining the type of content that could live on Code.gov’s outreach site, how existing content could be organized for easier discovery by users, and what the different pages could look like.
Process
To identify what content could live on this site, I dug through Code.gov’s GitHub repositories to find content with information about federal source code and open source software, excluding the actual code. I identified three main groups of content:
- News: this includes blog posts on what the Code.gov team is working on, stories on open source projects by other federal agencies, and information about upcoming events
- Guides: content written by the Code.gov team for federal agency program managers, the general public, and developers on learning more about open source projects and how they can be created and managed
- Resources: links to external sites that include open source playbooks, software for automation, and documentation examples from the private industry
The three main groups of content then became the main navigation for this new site. For subcategories, I then looked through Code.gov’s UX personas, which identify Code.gov’s main audience, and categorized the content by audience group. I added in the general public as an audience group to align with Code.gov’s goal of also being a resource for the general public to learn more about open source code. This site’s target audience includes federal agency program managers, the general public, and developers.
For the visual and experience design, this new site needed to fit with Code.gov’s existing style guide and the U.S. Web Design System components.
Design
Homepage
The homepage design showcases featured news and events as well as easy access to guides and resources for open source projects.
Guides
The guides are an introduction to different topics about open source, ranging from how automation can be used in an open-source project to how to foster positivity and collaboration in an open-source community. Guides can be filtered by user: “developers,” individuals who are building and maintaining open source projects, and “federal agencies,” individuals who are looking for more information on the benefits of open source software and how their agency can be compliant with the Federal Source Code Policy.
When a user clicks on a guide, they are brought to a page that focuses on the topic they selected to learn more about. The sidebar showcases related articles the user can read after finishing this guide for easy discovery of other guides. At the bottom, there is a feedback section so the Code.gov team can gain some extra insights on the impact of these guides and where there is room for improvement.
Blog
The blog features news and stories about the open source world from the Code.gov team and their partners. Featuring five posts per page sorted in chronological order, the blog page provides updates on what the Code.gov team and their partners are working on. The “Popular Posts” section allows users to discover the most-read blog posts over time.
When a user clicks on a blog post, they are brought to the story. The sidebar showcases related posts the user can read and highlights the tags on the current story so users can discover others under the same category. Rather than having an infinite scroll in which the next story loads immediately when the user reaches the bottom of the page, this design gives users the option to continue reading with previous and next buttons at the end of the post.
Resources
Resources are broken down by topic, including general resources that provide an overview to help any open source project succeed, to tools for source code automation, to resources to evaluate code quality. The “Resources” page summarizes the tools and software that the individual guides feature, allowing an easier option for those who are more interested in hands-on applications to improve or help jumpstart their open source projects rather than learning about the topic for the first time.
