Releases: 18F/18f.gsa.gov
Updated styleguide, related posts functionality
This release contains mostly refactoring and fine-tuning.
The largest update was to the site style guide, which documents how to use U.S. Web Design Standards and 18F Brand to maintain the site. Special thanks to @jenniferthibault for providing wonderful critique throughout this overhaul. 😄 #2357 #2365
Another thing it addresses is a previously unnoticed bug with related blog posts. A new plugin was written to override the existing functionality. #2369
Other updates:
New What we deliver, Contact, and Join pages
This release contains a significant amount of new content, as well as some fine-tuning of content and methods.
New pages:
- [
/what-we-deliver/](https://18f.gsa.gov/what-we deliver/) page with new project card layout #2282
Migrated pages:
- join.18f.gov to
/join/page (including an open position for Product Manager) #2326, #2243, #2335 /hire/to/contact/.
New content:
- New footer, without newsletter, since the newsletter is in the contact page now #2287
New methods:
- Added the gem
jekyll_oembedto streamline the process of embedding link content #2323
New About page and project pages
This release unveils a wave of new pages to the site. Pages that were added:
- About page with new layout, featuring a sticky side nav
- New project page layout, and updated URL,
/project/-->/what-we-deliver/ - Consolidated two site layouts,
profile-introandprofile-image, intoprofile-intro - updated site to reflect Federalist move to GovCloud
- compressed images throughout the site to improve loading time
Update gems and add incremental regeneration
The primary change in this release is an update to all outdated gems #2209, including jekyll and jekyll-archives, so that the site now supports incremental regeneration.
Additionally, we:
New homepage and better testing
This release includes content and design changes to the homepage (#2197)! Here's what & why:
- We've moved the "featured project" lower down the page and featured 3 projects instead of 1, in hopes of helping users understand more of our work without getting confused by having just one project up top
- We've changed the initial content to tell people more directly what we do, and our main call to action button now invites them to get in touch
- We've revised and redesigned the explanatory text on the homepage to give examples of the kinds of projects we help agencies with
This also includes a number of changes to clean things up or support the homepage changes:
- adds codeclimate coverage report #2182
- adds more rspec tests #2173
- changes to typography: for instance,
<h2>tags are slightly larger and<h3>tags smaller - removed references to
pa11y-ciaccessibility tool - added jekyll frontmatter tests #2187
- removes many deprecated frontmatter attributes
- removes hero image from Hire page #2213
- fix markdown syntax errors throughout the site #2172
- project intros for College Scorecard #2104 and Every Kid in a Park #2105
- tweaks project page styling
Update WDS to v0.11.0 and change markdown renderer
This release includes a Draft U.S. Web Design Standards update, a new markdown renderer, and a whole batch of fixes and testing work:
- Update the WDS to v0.11.0
- Changes our markdown renderer from redcarpet to kramdown
- Markdown and markup fixes in old blog posts
- Improve unordered list styling #2139
- Improve blockquote and pull quote styling #2140
- Removes duplicate hero images for many old blog posts
- Starts a styleguide that lives at /styleguide/
- Adds rspec ruby testing framework and some tests for ruby plugins #2153
- Updates CONTRIBUTING.md text for filing pull requests #2012
- Adds a codeclimate config #2157
Bughunt and AccessLint
This release addressed a few bugs and added the automated accessibility scanner, AccessLint, to our CI.
Specifically, this PR:
Clarity on homepage; looking forward at "Hire" content, front end design
Summary
This sprint included a lot of research and development work. Research focused on testing the work of the last two sprints against the hypotheses around what our users wanted. Development focused on refining existing styles and getting features ready for new content. Additional work was done toward making the site more maintainable in the long term.
Research findings indicated that while our work was good, the homepage was still not serving our users as well as expected. Initial testing of the content on the “Hire Us” page indicated there is much more we can be doing to help our users feel comfortable recommending 18F or going with us on their next project.
Problem: We don’t know how well the mailto links work for business referrals
The only way we directly collect business leads through the website is through a mailto link on a the Hire 18F page. We knew that email address got a lot of traffic but had no way of knowing how much of it we could attribute to the success of content on that page.
What we did
Elaine and Corey dug through Google Analytics, and with the help of Atul Varma, made a Dashboard to expose how many clicks every mailto link on the site received. This same dashboard also shows the previous page path so we can know, at a glance, what page people are coming from when they get to the featured project page (right now, FEC).
Research findings: Homepage
Hero still confusing
When we rolled the FEC-centric hero graphic onto the homepage, the hypothesis was that by designing around the work we did, people would be less confused about our relationship with the partner agency. We tested the homepage since adding the new graphic and learned that it’s still confusing.
Revised introductory language works
We also learned that the new language describing who we are and what we do was working for people. People still had questions about our relationship with GSA and what our name means, but could accurately describe what we do in their own words. One user described us this way:
I think of it as very complementary to GSA, figuring out ways to help customers to be fearless about technology. You are the technical experts and you can help folks better use technology and make connections digitally.
People still want examples of our work
Even though the FEC project didn't work as a hero feature, our users still want examples of our work to complement their better understanding of what we do.
What we're doing about it
With those findings in mind, we’re exploring new sitemaps and homepage designs that put information about who we are and what we do more up front, letting people learn the examples of our work as they go deeper into the site. Austin put together some invision sketches of what the homepage might look like, and Corey led a workshop to help us figure out what the information architecture should be. We won’t be deploying these changes for at least two more sprints since they are fundamental re-thinkings that require careful design. You can, however, see the work on a Federalist preview branch if you like and, of course, follow our progress on our Waffle board.
Research findings: Hire 18F page
We learned that the content on the hire us page is not working the way we need it to. The design of the page works but research participants found the content unwelcoming. In particular, language about limited resources restricting what projects we can take on was, in the words of one user, "a turn-off...We all have limited resources." Other issues with this page included a weak call to action that didn't indicate a point of contact. Users also struggled to identify themselves, or someone else at their agency, as someone who could or should contact 18F about a potential project. Finally, there was a confusion over the word "hire" itself. Users thought it meant "get hired by 18F" and not "pay 18F to do things."
What we're doing about it
We’re simplifying the content and creating an email template for leads to use in contacting us. The goal is to write new copy that addresses the problems we learned about in this research. We have not launched anything yet but going forward we are working on all of this in a Federalist preview branch.
Maintainability
The team is committed to ensuring the long-term maintainability of its codebase over time. Moving to the US Web Design Standards, and following the 18F visual identity guidelines, were the first steps in this effort. The next is writing up a style guide for the site itself, showing how we're implenting the standards in individual components, and how each element on a page should be rendered. The team is practicing "styleguide driven development" — as new elements are styled on the site, they are first added and styled in the styleguide. You can see the styleguide in progress on its Federalist preview branch.
Navigation and Bug Hunt
Problem: Users have difficulty finding valuable information on the website.
Solution:
- New navigation architecture #2043
- Adds subnav in /hire/ (Functionality is present but the pages will remain hidden until we have the right content.) #2043 #2078
- removes code rot (navbar.yml) #2043
The team also did a bug hunt this sprint. In one day the following were addressed:
Authors and project pages
This release is focused on helping users find information that exists on our website, and revising or creating new content to meet the needs of federal employees looking to work with 18F.
Content
Problem
People using 18f.gsa.gov want to learn what we do. Apart from a few disparate blog posts, we don't do a great job of helping our users accomplish that goal — in some cases the content was misleading.
What we did
- Based on feedback that the old hero image was leading people to think we were part of the National Park Service, or worked with children, we created a hero graphic featuring the FEC project. Rather than a graphic or photo about the project, this is a graphic that embodies the project.
- After learning that the original design took users away from 18f.gsa.gov, and coupled with the need for examples of our projects, we created a project page for the FEC. The page is the same graphic from the hero, a brief introduction to the work, and an archive of blog posts. We chose FEC because we have written many blog posts about it and the work encompasses a wide range of 18F's capabilities.
- We plan to rotate the featured project on a regular basis and have already started designing the next project's graphic and planning the content for the page.
Chapter skills involved in this work
- Visual design
- Front end design
- Front end development
- Content design
Authors
Problem
The way we handled authorship and bylines was an inconsistent user experience that sometimes sent people away from 18f.gsa.gov.
What we did
-
To address the inconsistent user experience, and ensure we didn't lose users, we created an archive template and page for every author, regardless of their status on the 18F team. Previously, bylines would link to a team member profile for 18F team members. Other authors had one of three options: 1) the byline would link away from 18F to learn more about the author, 2) the user would be taken to a different page within 18f.gsa.gov that had nothing to do with the author, or 3) nothing. Option three was most common for non-team member authors. This problem would get worse over time as terms expired.
Author archives now roughly match the look of the chronological and tag archive pages with the author's name in the header, an indicator of whether they're a guest or alum, and then a list of blog posts with the title, excerpt, and (if listed) the preview image. Here's an example for a team member, a guest author, and an alum.
Chapter skills involved in this work
- Backend development
- Front end design
- Front end development
- Content design
Research
This sprint worked off the findings from the previous sprint. We are researching content and usability in every sprint. Our results are logged on our research branch.
In that research we discovered:
- We need more tangible examples of the work we've done for others.
- Users want to know more about what we do, and how they can get started.
- Links out of the site are confusing and getting back to home is difficult.
We are potentially losing users before they are done learning about us. This is especially problematic when taken to guides that explain how to work with us.
Other changes
- Delete a redundant data file (previously at
_data/authors.yml). We also fixed a bug that was causing some author archive pages to 404. - Switching to a version of a plugin 18F maintains in order to get more control over bug fixes.
- Updated documentation
Moving forward
Creating the project pages is a step in the direction of providing clear examples of our work. Research since this release has shown that our homepage content an imagery is working but our users still want examples of our work. We are working on identifying a range of projects that demonstrate the different ways federal partners can work with 18F.
Once our users know whether we can help them, they need to know how to get started. Going forward, we are taking a second look at the intake, partnerships playbook, and IAA guides to ensure their accuracy and eventually import them into the site. On top of the content design work, this will continue to require front end development and design support.
18F Team members involved with this release:
@coreycaitlin
@gemfarmer
@mugizico
@ericronne
@elainekamlley
@awfrancisco
Follow our work at 18F/18f.gsa.gov or in #18f-site on Slack. We'll also be doing a bug hunt on Black Friday. More updates next week: Same Bat time, same Bat channel.