rapid-prototyping-with-uswds-event

rapid-prototyping-with-uswds-event

Presentation slides and background information for our event, "Rapid prototyping for the web using the U.S. Web Design System"

#jekyll#uswds#github-pages#prototyping
Demo Download

Rapid prototyping for the web using the U.S. Web Design System Event

This project contains the presentation material and background information for our event, "Rapid prototyping for the web using the U.S. Web Design System."

We're making it available here for reference before, during, and after the event.

The presentation is built using USWDS with custom Bixal branding. If you're interested in this approach for your own presentations, check out our presentation template.

Event prep

These suggestions are all optional, but if you're interested, you may get more out of our time together if you do these things ahead of time:

  • Read a summary of the project we'll be covering.
  • Poke around the live site to see how it works.
  • Read the readme of the GitHub project.
  • Create a GitHub account.
  • Try following the instructions in the readme for using our project as a template for your own project. And bring any questions or issues you run into!

Agenda

  • Team background
  • Case study: HHS Complaint Form Screener
  • Template workshop

Background

About Bixal

Bixal is a mission-driven organization determined to have a positive impact on the lives of people everywhere. We do this by partnering with leading federal agencies to conceive and create powerful data-driven customer experiences to better serve the American public and communities around the world.

Who we are

  • Brianna Naolu
    UX Designer, Bixal
  • Kayla Chumley
    UI Designer, U.Group
  • Philip Levy
    Director of Experience Design, Bixal

Why we’re here

We help civic tech teams accelerate learning, reduce risk, and improve outcomes by making ideas more tangible more quickly using rapid web prototyping.

Why it’s relevant

As part of the 21st Century Integrated Digital Experience Act, government agencies are required to modernize their websites using the U.S. Web Design System (USWDS) to improve the public's customer experience.

Our objectives

  • Consult our federal partners
  • Support the growth of our business and practices
  • Contribute to the community

We want to empower designers to take ownership of prototyping in the web medium and enable them to better collaborate with developers through the common language of the U.S. Web Design System.

Principles

  • Speed: With more making and less meetings, we decrease time to tangibility.
  • Tangibility: By making prototypes, not promises, we increase our rate of learning.
  • Reusability: With a focus on frameworks, we can make everything we do faster.
  • Openness: By sharing our work, we can benefit from and contribute to the community.

What we do

  • Rapid prototyping
  • Lean research
  • Content and data repositories
  • Template frameworks
  • Facilitation

Case study: HHS Complaint Form Screener

Overview

A typical need we see in government is for people to fill out a simple screener before they complete a larger task. When these screeners are long, onerous, and confusing, they lead to wasted time and bad data.

Drawing inspiration from one of our HHS projects, we decided to build an accessible, plain-language, readymade template to allow for rapid iteration of a screener, before starting on any production code.

After making and testing 3 versions in less than 4 weeks, we demonstrated major improvements in user experience, accessibility, and usability that laid the groundwork for a better product.

Problem statement

How might we get people to the complaint form as soon as possible with the least amount of confusion?

Process

  1. Test the current screener.
  2. Brainstorm ideas in Figma using USWDS components.
  3. Build new screener using USWDS, Jekyll, and GitHub Pages.
  4. Conduct user testing and consider feedback.
  5. Repeat Steps 2-4 as necessary.

Scope

  • Custom questions: Set up any number of questions with their own answer text, related resources, and pathing based on responses. (Radio buttons only for now.)
  • Simple logic flow: For each answer, direct people to the next question, an exit page, or jump ahead to the success page.
  • Linked resources: Each question and exit page can include resource content stored in its own plain-text pages.
  • Step indicator: Show people where they are in the process, even if you're not building the whole thing.
  • U.S. Web Design System: Built on USWDS for the best in accessible, responsive, usable web experiences for government websites.

Before and after

Before: HHS OCR Complaint Portal Assistant

After: USWDS Screener Prototyping Tool

Template Workshop

Now you try! For this part of the event, we'll walk you through how to reuse our template for your own screener applications. All you need is a GitHub account to make a copy and swap out content — no coding required.

Steps

Here are the tasks we'll try together:

  1. Create a GitHub account or log in.
  2. Make a copy of our repository.
  3. Publish the site using GitHub Pages.
  4. Configure a few site settings.
  5. Edit question content.
  6. Change homepage image.

What to try next

Here are some other things you can do once you get the hang of it:

Resources

minimalacademicresumeportfoliodocumentationwikitailwindbootstrapdarkecommercegithub-pagesblog