Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Build a prototype

Prototypes are useful to inform a new concept, identify how to refactor an existing product feature, service, or process, and help uncover current development unknowns.

Use prototypes to:

  • Align the team (“What problem are we solving?”)
  • Further specify elements of the design (“Should it look like this, or that?”)
  • Demonstrate that your ideas are technically possible
  • Explore/set up the deployment process
  • Demonstrate a collaborative design process
  • Reduce risk
  • Validate a design hypothesis

Prototypes can range in fidelity from basic paper prototypes to fully functional software. The idea is to build something that will help you answer your questions with the least investment. Prototyping can take many different forms depending on what you are trying to do. For example:

  • Paper sketches are fast to make and to change, and easy for the whole team to participate in designing
  • Wireframes are preliminary blueprints that can help teams align on structure, placement, and hierarchy for a product or service
  • Static visual mock-ups can help communicate and test things like brand identity and tone
  • Clickable prototypes can help test usability by finding out if users can complete the needed tasks

Communicating with prototypes

Prototypes provide realistic depictions of a user experience, so it’s important to carefully consider the elements that go into yours. Prototypes can help you convey several things:

1. Elements of the design system

Visually the prototype can include design patterns, color palettes, and font styles to communicate the general look of the final design system. This provides an opportunity for discussion if anything in the aesthetic style needs to be refined or is missing.

2. Information architecture

The information hierarchy gets communicated in the prototype. Global navigation menu, contextual navigation, and content hierarchy and structure are laid out in the prototype. Using real content is important, rather than grabbing placeholders like lorem ipsum, so the product team can determine if the proposed content works in the proposed design layout. Testing assumptions or hypotheses with real content will validate and identify if the content is appropriate and if changes are needed.

3. System behavior

A prototype is a great way to communicate system behavior through interaction design. Adding drop-down menus, transitions, and/or gestures doesn’t just make the prototype slick; depicting interaction behaviors helps engineers assess the work to implement the design and identifies potential blockers. Also, usability tests will uncover if any of the interactions pose problems for your users or could be served better by a different design.

Building prototypes with Federalist

Federalist is a product built by 18F to help manage and deploy static websites. While many organizations may use Federalist to host and deploy their production code, Federalist is also a great tool for automatically creating and deploying preview versions of websites.

If your project is hosted on Federalist, you may configure the platform to build a custom version of the site for every branch on Github. This makes it easy for designers to make changes in their content and code and see what they would look like as rendered HTML. Federalist is set up to constantly monitor Github for any changes so when you create a new git commit Federalist will start building a new version of the site.

Federalist also provides a number of templates you can use to kick start your new project or idea. The templates are built with the U.S. Web Design System so you have a library of additional components at your disposal.

Getting started with Federalist

When you’re ready to get started with Federalist, you’ll want to jump into the #federalist-support room on Slack and ask the team to add your Github account to Federalist.

Once they’ve added your account, you can sign in by authorizing access to your Github account and checking out the Using Federalist guide.

Authorized prototyping tools

Depending where you worked prior to joining 18F, you are probably accustomed to having some flexibility around your design toolset. Working for the government means only using tools that have been granted an Authority to Operate (ATO): due to security compliance, we are only allowed to use GSA IT-approved tools.

Don’t fret! 18F has done a great job of getting us licenses to standard prototyping tools. To request licenses, review the 18F Handbook. Ensure you review the usage parameters for each tool.

The team is always exploring other tool options for the 18F toolbox. You can investigate whether someone has already submitted an ATO for a new prototyping tool in the #design or #ux slack channels, or you can look it up at GEAR, the IT standards list.

U.S. General Services Administration Logo 18F Logo

18F UX Guide is a product of GSA’s Technology Transformation Services, and is managed by 18F.

Looking for U.S. government information and services?

Visit USA.gov