Skip to content
This repository has been archived by the owner on Dec 20, 2023. It is now read-only.

Update context for external links and update some of the privacy and security language #329

Merged
merged 14 commits into from
Jan 11, 2023
9 changes: 5 additions & 4 deletions _pages/about.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ description: "How 18F user experience (UX) designers improve interactions betwee

## What this guide is

Like [our Content Guide](https://content-guide.18f.gov/how-to-use-this-guide/), the 18F UX guide is written for our internal designers, but we hope it’s a useful reference for anyone. Our working assumptions for this guide include that 18F UX designers are expected to possess, among other things:
Like [our 18F Content Guide](https://content-guide.18f.gov/how-to-use-this-guide/), the 18F UX guide is written for our internal designers, but we hope it’s a useful reference for anyone. Our working assumptions for this guide include that 18F UX designers are expected to possess, among other things:

* design research skills
* the ability to skillfully navigate organizational relationships
Expand Down Expand Up @@ -44,16 +44,17 @@ This guide is divided into three sections:



If you have any suggestions or want to get involved, read [our contributing page](https://github.com/18F/ux-guide/blob/main/CONTRIBUTING.md#non-18F-contributors); find us on our TTS Slack in either #ux, #ux-guide, or #g-research; or [create an issue in GitHub](https://github.com/18F/ux-guide/issues).

If you have any suggestions or want to get involved, read [our contributing page on GitHub](https://github.com/18F/ux-guide/blob/main/CONTRIBUTING.md#non-18F-contributors); find us on our TTS Slack in either #ux, #ux-guide, or #g-research; or [create an issue in GitHub](https://github.com/18F/ux-guide/issues).


## Reusing this guide in other organizations

As a work of the federal government, this project is in the public domain within the United States. Additionally, we waive copyright and related rights in the work worldwide through the [CC0 1.0 Universal public domain dedication](https://creativecommons.org/publicdomain/zero/1.0/legalcode).
As a work of the federal government, this project is in the public domain within the United States. Additionally, we waive copyright and related rights in the work worldwide through the [Creative Commons CC0 1.0 Universal public domain dedication](https://creativecommons.org/publicdomain/zero/1.0/legalcode).

This guide is written for internal use and is shared in the spirit of open source. This guide is a product of what we’ve learned from doing UX research and design in government over the past few years, in collaboration with GSA’s Office of General Counsel, Privacy Office, PRA (Paperwork Reduction Act) Desk Officer, and our partners within GSA and throughout other agencies.

Feel free to [fork this guide](https://help.github.com/articles/fork-a-repo/) on GitHub and personalize it for your organization; we trust you’ll change it in whatever ways are best for you. If you have a suggestion, spot an error, or otherwise want to make constructive contribution to this guide, head over to [our contributing page](https://github.com/18F/ux-guide/blob/main/CONTRIBUTING.md#non-18F-contributors).
Feel free to [fork this guide via GitHub](https://help.github.com/articles/fork-a-repo/) on GitHub and personalize it for your organization; we trust you’ll change it in whatever ways are best for you. If you have a suggestion, spot an error, or otherwise want to make constructive contribution to this guide, head over to [our contributing page hosted on GitHub](https://github.com/18F/ux-guide/blob/main/CONTRIBUTING.md#non-18F-contributors).

## References

Expand Down
36 changes: 18 additions & 18 deletions _pages/design/build-a-prototype.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@ sticky_sidenav: true
subnav:
- text: Communicating with prototypes
href: '#communicating-with-prototypes'
- text: Building prototypes with Federalist
href: '#building-prototypes-with-federalist'
- text: Getting started with Federalist
href: '#getting-started-with-federalist'
- text: Building prototypes with Cloud.gov Pages
href: '#building-prototypes-with-cloudgov-pages'
- text: Getting started with Cloud.gov Pages
href: '#getting-started-with-cloudgov-pages'
- text: Authorized prototyping tools
href: '#authorized-prototyping-tools'
---
Expand All @@ -26,52 +26,52 @@ Use prototypes to:
- Explore/set up the deployment process
- Demonstrate a collaborative design process
- Reduce risk
- Validate a [design hypothesis](https://methods.18f.gov/decide/design-hypothesis/)
- Validate a [design hypothesis [18F design methods]](https://methods.18f.gov/decide/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](https://methods.18f.gov/make/wireframing/) are preliminary blueprints that can help teams align on structure, placement, and hierarchy for a product or service
- [Wireframes [18F design methods]](https://methods.18f.gov/make/wireframing/) 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](https://methods.18f.gov/make/prototyping/) 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:
[Prototypes [18F design methods]](https://methods.18f.gov/make/prototyping/) 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](https://methods.18f.gov/decide/design-hypothesis/) with real content will validate and identify if the content is appropriate and if changes are needed.
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 [18F design methods]](https://methods.18f.gov/decide/design-hypothesis/) 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](https://methods.18f.gov/validate/usability-testing/) will uncover if any of the interactions pose problems for your users or could be served better by a different design.
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 [18F design methods]](https://methods.18f.gov/validate/usability-testing/) 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
## Building prototypes with Cloud.gov Pages

[Federalist](https://federalist.18f.gov/) 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.
[Cloud.gov Pages](https://cloud.gov/pages/) is a product built by 18F to help manage and deploy static websites. While many organizations may use Cloud.gov Pages 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.
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](https://federalist.18f.gov/pages/using-federalist/templates/) you can use to kick start your new project or idea. The templates are built with the [U.S. Web Design System](https://designsystem.digital.gov/) so you have a library of additional components at your disposal.
Cloud.gov Pages also provides a number of [static-site templates](https://cloud.gov/pages/documentation/templates/) you can use to kick start your new project or idea. The templates are built with the [U.S. Web Design System](https://designsystem.digital.gov/) 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](https://chat.18f.gov/) and ask the team to add your Github account to Federalist.
## Getting started with Cloud.gov Pages
When you’re ready to get started with Cloud.gov Pages, you’ll want to jump into the [#federalist-support room on Slack](https://chat.18f.gov/) and ask the team to add your account account to Cloud.gov Pages.

Once they’ve added your account, you can [sign in](https://federalistapp.18f.gov/) by authorizing access to your Github account and checking out the [Using Federalist guide](https://federalist.18f.gov/pages/using-federalist/).
Once they’ve added your account, you can [sign in](https://pages.cloud.gov/) by authorizing access to your GSA Account and checking out the [Using Cloud.gov Pages](https://cloud.gov/pages/documentation/).


## 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)](https://before-you-ship.18f.gov/ato/): due to security compliance, we are only allowed to use GSA IT-approved 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, an approval granted after a thorough review of the secuirty and privacy of a tool. Due to the sensitive nature much of the data we encounter of government work, 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](https://handbook.18f.gov/design/#tools). To request licenses, [review the 18F Handbook](https://handbook.18f.gov/design/#tools). Ensure you review the usage parameters for each tool.
Don’t fret! 18F has done a great job of getting us licenses to standard prototyping [tools as listed on the TTS handbook](https://handbook.tts.gsa.gov/design/#tools). To request licenses, [review the TTS Handbook](https://handbook.tts.gsa.gov/design/#tools). 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 these (18F/GSA access only) [#design](https://gsa-tts.slack.com/messages/design) or [#ux](https://gsa-tts.slack.com/messages/ux) slack channels, or you can look it up at (18F/GSA access only)[GEAR](https://ea.gsa.gov/#!/itstandards), the IT standards list.
2 changes: 1 addition & 1 deletion _pages/design/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,5 +8,5 @@ sidenav: design
sticky_sidenav: true
---

This section covers prototypes, how they inform our work and what prototypes help us convey. It contains resources to get started prototyping with our website publishing platform, [Federalist](https://federalist.18f.gov), as well as information and resources related to the U.S. Web Design System, —the set of website standards agencies should use per the 21st Century IDEA.
This section covers prototypes, how they inform our work and what prototypes help us convey. It contains resources to get started prototyping with our website publishing platform, [Cloud.gov Pages](https://cloud.gov/pages/), as well as information and resources related to the U.S. Web Design System, —the set of website standards agencies should use per the 21st Century IDEA.

8 changes: 4 additions & 4 deletions _pages/design/use-a-design-system.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,12 @@ A design system can help your team prototype faster, scale, manage front-end des

## The U.S. Web Design System

[21st Century IDEA](https://digital.gov/resources/21st-century-integrated-digital-experience-act/) requires agencies to comply with the [website standards](https://designsystem.digital.gov/website-standards/) created by TTS. The website standards say agencies should use the [U.S. Web Design System (USWDS)](https://designsystem.digital.gov).
[Digital.gov states that the 21st Century IDEA](https://digital.gov/resources/21st-century-integrated-digital-experience-act/) requires agencies to comply with the [website standards](https://designsystem.digital.gov/website-standards/) created by TTS. The website standards say agencies should use the [U.S. Web Design System (USWDS)](https://designsystem.digital.gov).

Many teams at 18F begin by [installing](https://designsystem.digital.gov/documentation/developers/) the USWDS package and adding additional components and styles to fit the needs of their application.
Many teams at 18F begin by installing the USWDS package and adding additional components and styles to fit the needs of their application. The [USWDS provides installation instructions to get started](https://designsystem.digital.gov/documentation/developers/)

Design systems like USWDS are more than buttons; USWDS extends to provide guidance and example code for all kinds of components, so you don’t have to start from scratch.

You may end up using the USWDS to handle a lot of the basic decisions (like [grid systems](https://designsystem.digital.gov/utilities/layout-grid/) and [form fields](https://designsystem.digital.gov/components/form-controls/)), so you can focus on the components that are specific to your use case (like file upload boxes and progress indicators).
You may end up using the USWDS to handle a lot of the basic decisions (like [USWDS layout grid](https://designsystem.digital.gov/utilities/layout-grid/) and [USWDS form fields and fields](https://designsystem.digital.gov/components/form-controls/)), so you can focus on the components that are specific to your use case (like file upload boxes and progress indicators).

The best place to get started with the USWDS is by heading to [designsystem.digital.gov](https://designsystem.digital.gov) and jumping into the (18F/GSA access only)[#uswds-public Slack channel](https://gsa-tts.slack.com/app_redirect?channel=uswds-public). There you’ll find instructions on how to use the USWDS no matter what technology stack you’re using, as well as [Sketch files](https://designsystem.digital.gov/documentation/designers/) to work with when you’re not designing in code.
The best place to get started with the USWDS is by heading to [designsystem.digital.gov](https://designsystem.digital.gov) and jumping into the (18F/GSA access only)[#uswds-public Slack channel](https://gsa-tts.slack.com/app_redirect?channel=uswds-public). There you’ll find instructions on how to use the USWDS no matter what technology stack you’re using, as well as [Sketch files provided by the USWDS](https://designsystem.digital.gov/documentation/designers/) to work with when you’re not designing in code.
Loading