18f / join.tts.gsa.gov

Join TTS site

Adding a new job posting

To add a new job posting, first copy the template. The easiest way to copy it is to open this raw view, select all, and copy. Then create a new file by opening this link. On the page that opens, paste the template you copied earlier into the body. Add a filename (at the top), and then follow the instructions in the template.

If the job you're posting doesn't have opens or closes dates yet, leave them blank and you can add them later when you know. The job will show as "upcoming" until then. Once you add dates, you do not have to edit the job again to change it from upcoming to open to closed; it will updated automatically every night.

Tips that might be helpful

For the most part, the template should take care of all the formatting you will need to do. However, if you have an unusual job that doesn't fit neatly into the template, the site builder provides some tools that can be helpful when creating your custom job posting page.

Dates

• If you want to include the opening date of a job, you can write this into your markdown to have it displayed nicely-formatted, based on the opens data at the top of the file:

  {% include jobs/open_date.html %}

• Similarly, you can include the closing date. This one includes at 11:59 pm ET at the end:

  {% include jobs/close_date.html %}

• For other dates, you can get a nicely-formatted output using the "human_friendly" filter. Be sure the date you provide is in the YYYY-MM-DD format in order for this to work:

  {% 2023-01-01 | human_friendly %}

  ...outputs Sunday, January 1st, 2023

Alert boxes

• If you need to call a visitor's attention to some information, you can use a USWDS alert box. To make that easier, you can use this shortcut to put one on your page:

  {% include alert.html
       heading="Alert heading, in big bold letters"
       body="The main content of your alert. Something the user needs to see."
       type="(info | warning | error | success)"
       icon="(true | false)"
  %}

  The body portion is required. The rest may be omitted. If you do not include type, the alert will be an info box. These values are permitted for type:

  • info
  • warning
  • error
  • success

  If you do not include icon, the alert icon will be displayed. You can turn off the icon by setting icon="false".

API

The Join TTS site has a static API that provides a list of upcoming and open jobs. The static API is updated whenever the site is rebuilt, which includes when jobs are added or updated and the nightly automatic rebuild. As a result, the static API always reflects the same information as the site.

Automations

Open and closed jobs

The Join TTS site is automatically redeployed every night. As a result, jobs will automatically move from upcoming to open, and from open to closed, based on the opens and closes dates in the job. Once both values have been set, the job will go through the stages automatically. There is no need to manually update them.

Archived jobs

Once a job has closed, it will also be automatically archived. Archived jobs are moved from the /positions folder into the /archive folder. A job is archived by copying the job's BUILT directory from the _site/join/ directory into the /archive directory and adding this frontmatter:

---
layout: raw
title: "{{ the job title }}

Where {{ the job title }} is taken from the SOURCE file for the job. The automatic procedure runs every night and creates a pull request to make the archival permanent. It is not necessary to archive a job for it to be removed from the front page. Archival is just a tool to help keep the repo tidy and easy to navigate.

IMPORTANT NOTE: The BUILT job is used for the archive so we can be certain it won't change in the future if we need to change the behavior of layouts, includes, or other components of the site. Archiving the original source could result in archives having different information in the future than they had at the time the position was posted.

Development

Running locally

This site is built with Jekyll using the uswds-jekyll theme, so you'll find configuration information there.

Docker

Docker is the preferred method of working on this site.

1. Install Docker : Try typing docker version in your terminal to see if it's already installed. If it's not, Docker Desktop is an easy way to install.

2. Running the site: docker-compose up then open http://127.0.0.1:4000

3. Running tests: docker-compose run --rm web bundle exec rake test

4. Debugging

   • SSH into the Docker container with docker-compose run web /bin/bash

Without Docker

Some developers have trouble getting Jekyll to run in Docker on certain Macs. You may be able to run the site without Docker using Ruby directly. Getting the right version of Ruby setup is an exercise left to the reader, but it should be Ruby 2.7.*.

Once Ruby is installed, run the following commands from the project directory:

gem install bundler

# Install gems into a local directory, to avoid global
# pollution. The .vendor directory is ignored from git
bundler config set path ./vendor

# Install dependencies. This could take a while.
bundle install

bundle exec jekyll serve --host 0.0.0.0 --livereload

Assuming everything goes well, you'll be able to view your development version live at http://localhost:4000.

Project structure

Layouts

The default layout is provided by the USWDS theme and is used as the basis for the page and job layouts. There is also a raw layout which adds no markup and outputs the contents alone.

layout	use
default	The index.md page, represeting the landing page for the site
page	All pages in the pages/ directory. Adds a side navigation bar
job	All pages in the positions/ directory. Adds info sessions and a side navigation bar
raw	All pages in the archive/ directory. Does not add any markup to the provided content

Includes

There are three general-purpose includes and several more that are only meant to be used on job pages. First, the general-purpose includes:

• footer.html - Used by the USWDS default theme to add a site footer.

• meta.html - Used by the USWDS default theme to add meta content to pages.

• alert.html - Used to display a USWDS alert component. The body property is required, but the others are optional. type defaults to info and icon defaults to true.

  {% include alert.html
       heading="Alert heading, in big bold letters"
       body="The main content of your alert. Something the user needs to see."
       type="(info | warning | error | success)"
       icon="(true | false)"
  %}

There are also several includes that should only be used on jobs pages. These includes make assumptions that the page will have the frontmatter that is expected on jobs pages. They do not accept any arguments and take all of their input from the page variable.

• job/apply_button.html - Using the job's opens/closes dates and application link, displays a button linking candidates to the actual application page if the job is open. Otherwise displays a link to subscribe to the newsletter.

• job/appointment_type.html - Displays appropriate text according to the job's appointment type.

• job/close_date.html - Using the job's closes date, displays a nicely formatted date, with at 11:59pm ET appended to the end.

• job/full_info_on_usajobs.html - Displays text indicating that the full information for this job is or will be available on USAJOBS. If there is an application link for the job, it will be included in this text.

• job/info_sessions.html Using the job's info sessions data, if any, to display the upcoming info sessions for the job.

• job/key_objectives.html Using the job's key objectives, if any, to display those key objectives. This exists primarily to help enforce consistency.

• job/open_date.html - Using the job's opens date, displays a nicely formatted date.

• job/status_alert.html - Using the job's opens/closes dates, displays an alert banner announcing the job's current status (upcoming, open, or closed).

• job/salary_range.html - Using the job's gs property, or the provided values, displays the salary range for the job.

  {% include job/salary_range.html
       min="$10"
       max="$15"
  %}

  Both arguments are optional. If omitted, the salary range will be taken from step 1 and step 10, respectively, of the lowest and highest locality areas, also respectively. This is taken from the _data/pay_ranges.yml file and must be updated whenever GS pay tables are modified.

Filters

• human_friendly - this filter can be applied to Date objects to turn them into nicely formatted strings. E.g.:

  {{ 2022-07-19 | human_friendly }}

  produces Tuesday, July 19th, 2022

• open_positions - this filter can be applied to a list of job postings and will return only the job postings that are currently open

• upcoming_positions - this filter can be applied to a list of job postings and will return only the job postings that are upcoming

• job_posting_status - this filter can be applied to a single job posting and will return a string indicating the posting's current status: upcoming, open, or closed. This is derived from the opens and closes data in the posting frontmatter. If either is missing or not a valid date, the job is upcoming.

• future_info_sessions - this filter can be applied to a list of info sessions (such as general info sessions) and will return a list of info sessions that are either today or in the future.

• future_info_sessions_for_job - this filter can be applied to a single job posting and will return a list of info sessions for the job that are either today or in the future.

• string_is_link - this filter can be applied to a text string and will return true if the string begins with http:// or https://, or false otherwise.

Public domain

This project is in the worldwide public domain.

This project is in the public domain within the United States, and copyright and related rights in the work worldwide are waived through the CC0 1.0 Universal public domain dedication.

All contributions to this project will be released under the CC0 dedication. By submitting a pull request, you are agreeing to comply with this waiver of copyright interest.

Special Thanks

Special thanks to the team at 18F for their open and transparent model which benefits citizens, government and technology.

join.tts.gsa.gov's Issues

JoinTTS -> OPM -> Monster flow is confusing

Just got feedback from an applicant that the flow between systems is a bit confusing:

This is what the web http://usajobs.gov page says "You will leave USAJOBS and be sent to the Technology Transformation Service application system once you select "Continue to Agency Site."

When I click "Continue to Agency Site", I'm sent to an archaic looking monster US GSA website with on pithy error message "We were unable to complete your request at this time."

Presumably this is how it's meant to work (minus the error message), as indirect as it is? If that's the case, might be good to lay expectation out in the application documentation, or a "here's what's about to happen" in the How to Apply section of listings.

Visual design for interior pages

The site has 5 interior pages with information about how to apply, TTS offices, and working in the government. The pages are just text and can feel long and overwhelming.

We would like a new visual design that made the information easier to digest and understand. This could be a different design for each page or a template that could be applied across all pages. The pages have not previously been worked on by a visual designer, so the team is open to all suggestions.

The design should use the U.S. Web Design System and maintain the color palette and brand of the current site. The final output would a Sketch file that a front-end designer could then implement.

Improve hiring process page

Based on feedback from a potential applicant provided by @afeld : "I took a look at the 18F application process and I do admit it looked a bit daunting."

The process is daunting and we may even want it to appear so, though that was not the current intent of the page. We can make some minor changes to the page to reduce the potential anxiety that it may cause in applicants.

• Add some kind of thing that provides a simplified view of the process as a way of onboarding the potential applicant
• Make it clear that not all of the information on the hiring process is required reading or that it's not all required at the same time
• Add TLDR's to the major sections of the pages or something that does something similar

Hypothesis and research plan for content and design

Create a hypothesis and research plan to learn what type of content and information architecture will increase visits and help potential partners find our jobs and application process.

link to this repository from the site

Might want to note "this site is open source" or something - had to know where to look to find the repository. Thanks!

A way to house performance profiles so they are accessible to the public

Some way that we can host/house or current version performance profiles so that people can see the types of roles we've hired for in the past or people can use our profiles for their own hiring needs.

Probably just a new page on the join page with a curated selection of profiles and the appropriate contextual information.

Add analytics to the site

• Work with DAP to get analytics on the site

Background contacting applicants current employers

Issue: Candidates current employers are being notified by the background/security team that the candidate is currently in process for a new job. This is before the candidate has resigned, given notice, etc!!

We need to understand why this is happening and what can be done about it.

Regardless of the outcome of the discussion with HR, we will need to include some information about this so the candidates understand what is going to happen.

Add GSA logo, links to footer

Add the GSA logo, navigation links, links to GSA and other required information to the footer.

As a prospective applicant, I want to be notified of open positions

If there are no open positions (cc #1) or none of the open positions are relevant to them, there should be a way that people can subscribe to new openings. Might be as simple as "subscribe to 18F's mailing list / Twitter".

Address user feedback about 18F - Consulting Software Engineer Role Summary

While talking to a potential applicant for the 18F Consulting Software Engineer role, I received feedback on the "Role Summary" section of the job posting. The feedback seemed thoughtful and actionable:

• "More of a conversational tone would be good."
• "More specifics — what is a typical day like?"
• "One line about perks, one line about expectations... make it easy to read."

For inspiration about how to achieve a more conversational tone and make the job posting more readable, scannable, and attractive to candidates, we could look at the Careers page for Glitch, which I think does a good job in these areas: https://glitch.com/about/careers

Addressing this user feedback could involve working with the Writing Lab. Or it could involve gathering a group of interested engineers around a Google Doc to see what improvements we could make without expert outside help.

Edit office descriptions to speak to candidates

The current descriptions on the TTS Offices page provide a high level overview of the mission of each office, but they don't address questions about what it's like to work in that office.

Hypothesis: Editing each description to focus on the experience and work of staff will help potential candidates better understand the office and help them decide whether to apply. This description should focus on the project types, team structure, mission and cultural while remaining concise and providing a link for more information.

• Draft content
• Karen review
• Bill and Jenn review
• Publish

Launch MVP site

Launch the MVP version of our TTS join site.

• A way for people to know what TTS is
• A way for people to know that there are different parts of TTS
• A way for people to apply for TTS jobs
• A way for people to what the hiring process is

To-Do

• Register Domain
• Get on Federalist
• Create/Transfer initial site copy
• Create job posting template
• Copy Editing (Writing Lab)
• Create first live job posting
• QA site
• Confirm new process with Outreach

A way to make more of a job post content modular

We need a way to make more sections of a job post modular. By modular I mean that the content is inserted from another source based on some variable

Here are some sample use cases:

• Each job had a job announcement number. This number shows up in multiple places on the job post. We should be able to enter the number once and have it be populated wherever it needs to be
• The Duties section of a job is dependent on the GS level. There are 3 GS levels that we commonly use, so the Duties section should be automatically populated based on the GS level that's populated.

Some of this I think I can do on my own so will at least try:

• Introduce variables for the standard fields
• Use logic to control small sections of content
• Update includes files with the new variables

Find better solution for spacing

Issue: To create more spacing between the headers, I used a horizontal line. There has to be a better way to do this but we will need someone with html/css to help out.

Incorporate eng-hiring Resume Review content

The eng-hiring site has content around Resume Review:
https://eng-hiring.18f.gov/resume-review/

The Eng chapter used to do the reviews, but we don't any longer. We'd like to remove this content from the eng-hiring site, but received feedback that the info was useful and should be available somewhere.

This Issue asks you to review the content on the page linked above and to incorporate relevant information into the join.tts.gsa.gov site.

Gather and review existing hiring research

Though we'll be doing additional research during this project, it'd be good to gather and review any existing research on the TTS Join page, 18F join page, other recruitment materials, and feedback from candidates on the process.

• Gather research into a single folder
• Synthesize results with an eye toward applying it to this project
• Each member of the team individually reviews synthesis
• File new issues based on past research

Pick an implementation for GovDelivery

There are a number of implementations for how someone can sign up for the Talent newsletter. Andre and Jenn will go through them, pick the option that seems best, and implement it on the site after #171 is merged.

Options

Add sticky left hand navigation

Given the length and complexity of the content, it would be helpful to have a sticky left hand navigation so users could more easily navigate around the site.

Make the embedded youtube video look better

I stole this approach from https://github.com/GSA/centers-of-excellence as a way to have an embedded video instead of just linking.

Here are the relevant files:

• https://github.com/18F/join.tts.gsa.gov/blob/master/pages/index.md
• https://github.com/18F/join.tts.gsa.gov/blob/master/_includes/how_to_apply.md

Was hoping to have a way to make the iframe/embedded video look nicer on the page. Could include stuff like:

• making it larger, so it at least fits the width of the surrounding content
• centering it with the other content on the page

Also if there is a better way to embed video other than this approach, very happy to have it changed to that.

Clarify Selective Service requirement

The consulting software engineer position description currently includes the following as a Key Requirement:

Register with Selective Service, if you are a male born after 12/31/1959.

This line isn't entirely accurate, and it's causing transgender would-be applicants confusion and concern.

From sss.gov:

Individuals who are born female and changed their gender to male are not required to register. U.S. citizens or immigrants who are born male and changed their gender to female are still required to register.

Considering that the same page lists other reasons someone might be exempt, I suggest we change our standard line to:

• Register with Selective Service, if you are a non-exempt male born after 12/31/1959.

...link and all. Thoughts?

Add a way to advertise/link to opportunities at other agencies.

Thinking about the use case like EPA and their innovation fellowship.

Add a case study for each office

These examples can go on the TTS Offices page. The goal would be to help new visitors better understand the work and impact of each office. The hypothesis is that this will help them understand where they should apply and get them more excited about applying to TTS.

• Create list of existing case studies
• Clear list with office heads
• Write up summaries of each case study
• Clear summaries with Karen and office heads
• Publish

Optional

• Get design help for adding case studies

Join TTS page has grid that breaks responsive layout

Join TTS page has a grid that breaks the layout of the page when on mobile. Screenshot taken on Firefox in Inspect Mode.

Upcoming Statement

@rooneywp need to be two upcoming statements. Need to add one statement where we do not have the line "Applications will be open for submission on...". We could just remove that statement when creating the job template, but then we would need to remember to re-enter it with all that code.

thoughts?

Some way to let people know there are no open positions

Figure out where to put text about no open positions so people don't think that they are confused or can't find where the jobs are posted.

Add tests to run on pull requests

Currently, only a Federalist preview build runs on pull requests. A back-end developer or someone else with the relevant experience should evaluate if we should add additional tests to run on all pull requests before we merge them.

Gather site screenshots of TTS and sibling brands

To compare and contrast TTS with the sibling-level sub-brands

• 18F
• The Office of Products and Programs (OPP)
• Centers of Excellence (CoEs)
• Presidential Innovation Fellows (PIF)

And TTS with its parent brand - General Services Administration.

The purpose of gathering screenshots is to give the team a better idea of where TTS Join site should differ while maintaining the same family branding at least.

• Typography
• Color Palettes
• Design patterns and hierarchy

Adding Events page

are we still doing events with USDS and are we involved in any other events? A good way to advertise these would be to add an events page to our join page. May also want to consider adding any events where we have TTS people speaking

Add content about accommodations to Join TTS

Let's add language to Join TTS about accommodations. This content will:

• Help individuals with disabilities understand what to expect from the hiring process
• Signal to individuals with disabilities that TTS is ready and willing to provide accommodations

Clean up the postings

We have made a number of optimizations and quality of life improvements on how we are managing the site. I need to go through all of the existing posting files and make sure they align with our new approach.

• Remove all duplicate files (There should only be one file for each role)
• Make sure the correct file is being used for the postings
• Fix all the file names and titles
• Make sure the frontmatter is correct for each posting
• Add all required redirects

Roles to be fixed

• Consulting Software Engineer
• Content Designer
• Product Manager
• Strategist
• UX Designer
• Visual Designer
• UX Design Lead
• Cloud Adoption
• Contact Center
• Customer Experience
• Data & Analytics
• Infrastructure Optimization
• PIF

Homepage content edit

Draft new homepage content aimed at meeting these goals.

• Concise explanation of what TTS is
• Highlight the video
• Move open and upcoming jobs up the page
• Additional explanation of upcoming jobs
• Clearer call to action and next step for candidates

Next steps

• Draft content
• Clear with Jenn and Karen
• Create research plan to test content

make this repository public

@rooneywp etc: Especially since we now show upcoming job postings, is there any reason not to?

A way to describe how to read a federal job announcement

Describe what's important about each section
How someone should use each section to help create an application

• Evaluation
• Qualification

Visual design for homepage

The current homepage is a basic 1 column text layout with a video. We would like a new visual design that helps inform visitors about TTS, open positions, and how to take the next step towards applying. We recently completed an artifact analysis of private sector career pages. The visual design could follow the recommendations from that research.

The design should use the U.S. Web Design System and maintain the color palette and brand of the current site. The final output would a Sketch file that a front-end designer could then implement.

Office buttons on homepage

@rooneywp two issues:

1. when you click the 18F office button it does not go to the 18F office section, rather it goes to the Front office section
2. We need a button for CoE

Drug Free Workplace language

Need to add language on site about GSA being a drug-free workplace

Bad Link on TTS Offices Page and Missing Links in CircleCI Check

There is an issue with the href in the sidebar on the TTS Offices page (tts-offices.md file) linking to Office of 18F.

There are also 7 failures that the HTML-Proofer in CircleCI caught.

bundle exec rake test
Running ["LinkCheck", "ImageCheck", "ScriptCheck"] on ["./_site"] on *.html... 


Checking 39 external links...
Ran on 44 files!


- ./_site/join/content-designer/index.html
  *  linking to internal hash #other-information that does not exist (line 191)
     <a href="#other-information">Other information</a>
  *  linking to internal hash #what-to-expect that does not exist (line 192)
     <a href="#what-to-expect">What to expect</a>
- ./_site/join/user-experience-designer/index.html
  *  linking to internal hash #other-information that does not exist (line 191)
     <a href="#other-information">Other information</a>
  *  linking to internal hash #what-to-expect that does not exist (line 192)
     <a href="#what-to-expect">What to expect</a>
- ./_site/join/visual-designer/index.html
  *  linking to internal hash #other-information that does not exist (line 191)
     <a href="#other-information">Other information</a>
  *  linking to internal hash #qualifications that does not exist (line 189)
     <a href="#qualifications">Qualifications</a>
  *  linking to internal hash #what-to-expect that does not exist (line 192)
     <a href="#what-to-expect">What to expect</a>
rake aborted!
HTML-Proofer found 7 failures!

Menu toggle button does not work on mobile or tablet views

Steps to reproduce:

1. Open the website on a phone, or reduce the width of the browser on desktop until the Menu button appears in the header.
2. Click the Menu button.

Expected behavior:

Clicking the button should toggle a menu open/closed.

Observed behavior:

A slightly darker overlay appears on the screen, but no menu appears.

Setup redirect for positions that are taken down

We need a way to redirect visitors from positions that have closed back to the home page at least. The use case being that if someone saved/bookmarked a link to a job posting, the could return to the posting without knowing that it was closed and get an error.

The solution is to use redirect from, but it needs to be implemented on this site.

Site rendering strangely for Galaxy S5

From Will Slack via Slack: "Looks like the join.tts.gsa.gov site isn't friendly for Galaxy S5"

Make the TTS Office section on the home page better

My solution was to use an html table for spacing and use buttons inside the table. There has to be a better way to do this.

The goal is to have a nice looking list of the offices so someone can see what offices are part of TTS and then they can click on the office if they want to learn more about it specifically.

Update Footer and add identifier

OSC requested we remove the black GSA starmark and update with the blue starmark. Also remove "Technology Transformation Services" shouldn't be next to starmark.

Also we need to add the USWDS identifier to this site

Print View is Poorly Designed

While looking thru the site, I figured it would be easier to print out a couple of the pages so I can take notes. However, the print view is wonky due to the An official website of the United States government header. The screenshot below does a better explanation of this issue.

The easiest solution for this would be to include a @media query for print in the site.scss file or create a print.scss. If I have time today/tomorrow, I may try to tackle this.

Bug 🐞 found in mobile breakpoints

Issue occurs between breakpoint 341px – 370px the page layout breaks, effects <main id="main-content"> content block.

• Observed on mobile (iPhone 6s)
• Reproduced using the web inspector in FireFox and Chrome.

Screenshots:

Impacts content area in orange.

Breakpoint: 342

Breakpoint: 369

Applicant Eligibility

Change verbiage under "Eligibility" section to be consistent with verbiage in job postings (excluding GSA employees) - "All United States citizens and nationals (residents of American Samoa and Swains Islands) and applicants must not be GSA employees or contractors.”

Create visual directions / patterns

This issue focuses on the potential visual directions / patterns, borrowing from USWDS v.2.

The tasks here will be:

• Create and share with JoinTTS team the directions
• Select the best direction (or if none, continue to iterate until a direction is selected)
  • Work on more visual applications / mockups to get a better idea
• Discuss any additional issues before proceeding to implementation

Remove Acq office from homepage and list of offices

The Acquisitions Office content should be worked into the 18F section where possible.

• Draft new version
• Karen review
• Publish

Example Resume Link broken

I was hoping to send in an application for the TTS soon, so I was browsing the resume section and got a security error. After a bit of research it looks like the link was a casualty of the domain change and should be changed to ({{site.baseurl}}/resume/) to correctly send people to the example by @amandacostello. I hope this won't be seen as obnoxious, but I figured I would throw a PR in like any other repo. Thanks!

Posting a job where the current 'states' are not applicable

We have another use case where we want to post a job on our site but the official announcement is being housed on USAjobs.

This is time sensitive so I'm going to try an interim solution of adding a state to accommodate, but this will need to be addressed with a better solution. The interim solution I chose is to add a new state called USA Jobs and it appears to be working.

Use Case: Posting a role on Join TTS that uses the USA Jobs site/process (applicable to roles that are career (e.g. Direct Hire)

Expected Outcome:
We have a job that's listed under open positions that contains the relevant information and links to the USAjobs site for the role where the user will see the official information and application link.

What's different:

• TTS does not own/host the official job content or application
• TTS Join Page post only needs to have the performance profile (summary + key objectives), intro paragraph (What is the CoE, etc), Basic Info
• How to Apply link directs the person to the USA jobs site

This is not a state (open, closed, upcoming), the states are still applicable to this use case. I think this is really related to hiring authority (excepted, direct hire, competitive, ses). For example, anything that isn't excepted service will have different posting requirements, process and information. In those cases TTS wouldn't own the content/posting/application, like we do for the majority of our roles because they are excepted service.