Design

The Design team at 18F includes content, user experience, front end, and visual designers as well as researchers, editors, prototypers, illustrators, and wordsmiths.

18F Design provides design as a service to the rest of the organization, including:

  • Research. We help people to identify, target, and solicit feedback from real users, stakeholders, subject-matter experts, etc.
  • Content strategy. We help people clarify their tone and voice, and explore the breadth and depth of their content.
  • Information architecture. We help people state their intent and disclose information in an intuitive way.
  • Interaction design and front end development. We work with people to wireframe and prototype simple, beautiful, usable interactions.
  • Visual design. We help people more clearly communicate through visualizations and illustrations as well as solid graphic design knowhow.

Documentation

Suggested reading

Communication

Find us in Slack:


Joining the Design Team

Welcome to the 18F Design team — we’re happy you’re here! We’ve compiled a set of helpful tips to get you started. We’ll update this guide as we receive feedback, so don’t be shy to share your thoughts.

First week

You might not have much assigned work during your first week here. That’s okay and expected. If you’ve gotten all the government onboarding items done and a project still hasn’t landed, the design team has a long list of internal projects that aren’t funded but that will help us all work better together. Talk to your design lead (more on that, below) to get more information about these internal projects and how you can get involved.

Who we are

The Design team at 18F includes content, user experience, front-end, and visual designers. We are researchers, editors, prototypers, illustrators, and wordsmiths. We come from a variety of backgrounds, including government, non-profits, consultancies, corporations, and academia.

For more information, see this full list of skills by staff member.

Structure

As per the org chart, 18F Design is itself composed of the user experience (UX) design, visual design, frontend design, and content design teams. Members of the Design team are active participants in the frontend and research guilds.

As these teams have grown in size, we’ve introduced design leads to facilitate communication. Design leads work both internal to the Design team and external to 18F as a whole to address administrative questions, talk through scope concerns, and coordinate resourcing. In your first week, you’ll be assigned a design lead from your own discipline.

Members of the Design team are also assigned three- or four-person critique groups. These groups meet once a week (barring more urgent project activities) to discuss work in progress and help the Design team maintain its storytelling and presentation skills. Critique groups also have leaders, and their groupings change periodically. If you’re interested in taking a turn as a critique lead, contact the Director of Design.

Design leads

Design leads are tasked with helping to create, maintain, and grow the positive and collaborative culture of 18F Design, especially as we experience sustained growth. Their responsibilities include:

  • Assist the Design Director in onboarding new members to the team.
  • Work with members to articulate their professional goals.
  • Conduct performance reviews in conjunction with the Design Director.
  • Conduct regular 1:1 meetings with their team members.
  • Be available to members of their team to discuss and give feedback on goals/OKRs.
  • Flag developing concerns or issues for the Design Director.
  • Assist the Design Director with project staffing decisions.
  • Attend regular Lead group meetings.
  • Pass individual/aggregate feedback from the facilitator teams to the Design Director.

Design leads are selected through nominations and interviews according to team needs. While there is no additional compensation for being a design lead, it’s an opportunity to help make team members’ time at 18F great.

Leads and management

See the org chart.

What we do

18F Design provide design as a service to the rest of the organization, including:

  • Research. We help people to identify, target, and solicit feedback from real users, stakeholders, subject-matter experts, etc.
  • Content strategy. We help people clarify their tone and voice, and explore the breadth and depth of their content.
  • Information architecture. We help people state their intent and disclose information in an intuitive way.
  • Interaction design and frontend development. We work with people to develop prototypes and wireframes, discover and implement new technologies to produce simple, beautiful, usable, interactions.
  • Visual design. We help people more clearly communicate through visualizations and illustrations as well as solid graphic design knowhow.

How we work

Rituals

Most of the design team works on a mix of partner-agency projects and internal initiatives. As you’d guess, everyone’s weeks look a little different. That said, there are recurring weekly meetings and commitments we all have on our calendars.

  • Mondays: half hour design team huddle. Each Monday at 3:00 pm ET (12:00 pm PT), the whole team meets to discuss project status, policy updates, and general design-specific news. Our huddles typically follow the same format: the Director of Design will start off with general announcements and a reminder about completing timesheets. Afterward, team members give quick updates on how projects are going. This is optional — if nothing much changed on the project in the last week, you don’t have to say anything. You don’t need to request to be added to the design huddle agenda — if you’re starting a new grouplet, seeking research volunteers, and so on, you can make your pitch or request when it’s your turn to share. That said, if you have a larger request (or one that might be in some way contentious), ping the Director of Design first.
  • Tuesdays: 18F all hands meeting. Every Tuesday at 12:30 p.m. ET (9:30 a.m. PT), the entire 18F team meets to cover product launches, introductions of new team members, projects we’ve just taken on, policy changes, and other broadly applicable news. Please talk to your Design lead if you’d like to be added to the all-hands agenda. If the topic you’d like to discuss is of interest only to the Design team, consider sharing it at the weekly Design huddle rather than the all-hands meeting.
  • Once a week: meet with your lead. Once a week, you’ll have a short check-in with your Design lead at a time that’s convenient for both of you. The purpose of this meeting is both administrative and personal. It’s how the team leadership keeps on top of project timelines and activities to coordinate resourcing. It’s also a time to talk through any project concerns, figure out how to wrangle the federal bureaucracy, and talk about how to make 18F work better for you.
  • Once a week: meet with your critique group. Once a week, you’ll meet with your three- or four-person critique group to talk about creative questions and share work. Critique teams decide internally how often and how long they want to meet.

Communication channels

Tools

Here are some common tools we use, how we use them, and how you can get access to them. If you can’t find the information you need in the chart below, get in touch with your design lead; they’ll be able to point you in the right direction.

And one more thing: before you start using any new tool that asks for access to files/browser data, please check the full list of approved tools. If what you want to use isn’t there, you’ll need to ask in #infrastructure first. New tools often create hard-to-anticipate security problems.

Drawing lines on a screen

  • Adobe Creative Cloud: CC licenses are expensive, so please don’t request access unless you really do need it for your work. The wait is variable — it depends on whether our batch purchasing has caught up to our hiring.
  • InVision: For prototyping.
  • OmniGraffle: The wait is variable — it depends on whether our batch purchasing has caught up to our hiring.
  • Sketch: You can get started with a trial version immediately. Upgrade to the full version whenever you get the license.
  • Screenhero: Screenhero allows remote editing of the same desktop document. Slack acquired Screenhero, so you can access it through the Slack website. No license needed.

Unless otherwise specified, see Software to get a license for any of these.

Project management

Research

  • Please read Doing Research at 18F for more information on the tools and techniques.
  • Google Analytics: More info here.
  • For cardsorting and navigation tree testing, we have access to Optimal Workshop via OPP. You can get started immediately.
  • Surveys: Internal to 18F, we often use Google Forms. However, government employees outside 18F often can’t access Google Forms on their work computers. So when addressing our agency partners, we often need to use other options — being careful, of course, to avoid asking for personally identifiable information. Ask #research for recommendations.

Workshops

  • Mural.ly: Research analysis and workshops. Get more info here. Access is immediate, but you’ll need to get permission from an admin to create rooms.

Word processing

  • Microsoft Office: We use this rarely and only for collaboration with those partner agencies who rely on it. Follow the instructions to get a license.

Assets

We default to free and open-source assets, unless there is a very, very good reason to do otherwise (and you’d better be prepared to defend that reason). Luckily, there are a lot of great resources for us to choose from.

  • Frameworks: the Draft U.S. Web Design Standards is a visual style guide and set of components for U.S. federal government websites. It includes guidance for fonts, colors, and UI components. We don’t mandate using this, but it’s a good place to start.
  • Type: We don’t mandate using typefaces from the Draft U.S. Web Design Standards, but it’s a good place to start. Google’s collection of open-source typefaces is also helpful.
  • Icons:
    • Each 18F presentation theme has a master page that holds a small selection of commonly-used icons from the closed-source picons collection. Post to #18f-branding if you need to use more/different ones…and be prepared to explain why!
    • For a larger (and open-source!) set of icons, Font Awesome is a starter kit. The Noun Project has a number of open-source icons as well. If you want to start using non-free ones, you’ll need to jump through some hoops — yes, even if the icon only costs $1.99. You’ll need to get official emailed permission from the product owner, then check #team-ops for further instructions.
  • Images: Most images published by government agencies are in the public domain and thus free to use.

Appendix

Designing in the open

18F values transparency. We try to design in the open, which means trying to make as much documentation and decision-making as possible accessible to the public. Designing in the open means that expectations from private sector about confidentiality, disclosure, and intellectual property don’t hold true here.

Here are some of our rules of thumb:

1. Share your work early and often

Sharing your in-progress work with team members and stakeholders is one of the most powerful techniques we have — it’s central to building trust with stakeholders. At 18F, we like to team up and work a problem through multiple angles to get to the best solution swiftly.

Since GitHub is one tool we’ve chosen to facilitate public dialogue, consider also making your work available to the public (if project appropriate) by posting work-in-progress there. Before creating a public GitHub repo or otherwise sharing project-specific information, check with your project lead; they’ll let you know what information can be shared publicly.

2. Be mindful of Personally Identifiable Information (PII)

PII is any piece of data, singly or in combination, that can identify unique individuals, such as full name, email address, or even phone number. While working in the open, be mindful of discussing agency partners, collecting any PII, or accidentally disclosing PII to the entire internet. Different agencies and organizations may have different levels of sensitivity and exposure concerns about types of personal information (identifying or not) you collect and how you use it. Check with your project lead before sharing information to avoid missteps and delays; what has been approved by the GSA may not already have been approved by partners. Be mindful as you post meeting notes or sidebar conversations in Slack channels, and be aware of the potential level of visibility this information will have once you post it in Slack.

Bottom line: If you have questions about sharing information, ask.

3. Not everything has to happen in public

The Freedom of Information Act (FOIA) guarantees that, as federal employees, all of our communication via government email, Slack, and chat can be made available to the public at some point in the future. You should assume that, at some point in the future, anyone might be reading what you wrote in any of these channels. However, in the context of day-to-day work, different tools offer different levels of access. Here’s a quick reference to who can see what, when.

  • Only viewable by addresses: Slack DMs, Slack private groups, Email
  • 18F only: open Slack channels
  • 18F plus invited guests: Slack channels labelled XXX-otheragencyhere or XXX-partners
  • GSA only: Google Drive- you can share files outside GSA, but exercise caution!
  • Across the government: mailing lists
  • The entire Internet: Slack channels labelled -public, Invision and Mural.ly (if linked via GitHub), and GitHub (with the exception of private repos)