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

Slide 2 of 23

It isn’t 10,000 hours that creates outliers, it’s 10,000 iterations.

—@naval on Twitter

Next slide
Slide 3 of 23

Event prep

  • 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. Bring us your questions!
Next slide
Slide 4 of 23

Agenda

  • Team background
  • Case study: HHS Complaint Form Screener
  • Template workshop
Next slide
Slide 5 of 23

Background

Next slide
Slide 6 of 23

Bixal

A mission-driven organization determined to have a positive impact on the lives of people everywhere.

Next slide
The Bixal website on a black iPad Pro sitting on white table along with a notebook, a cup of coffee, eyeglasses, and an Apple Pencil.
Slide 7 of 23

Who we are

  • Brianna Naolu
    UX Designer, Bixal
  • Kayla Chumley
    UI Designer, U.Group
  • Philip Levy
    Director of Experience Design, Bixal
Next slide
Slide 8 of 23

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

Next slide
Slide 9 of 23

Why it’s relevant

21st Century Integrated Digital Experience Act (21C IDEA):

  • Modernize websites
  • Improve customer experience
Next slide
Slide 10 of 23

Case study: HHS Complaint Form Screener

Next slide
Slide 11 of 23

Overview

The form before the form:

  • Forms are common in government, but they can be done poorly.
  • Picked complaint form screener to experiment with.
  • Prototyped and tested 3 iterations in less than 4 weeks.
Next slide
Slide 12 of 23

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

Next slide
Slide 13 of 23

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.
Next slide
Slide 14 of 23

Scope

  • Custom questions
  • Simple logic flow
  • Linked resources
  • Step indicator
  • U.S. Web Design System
Next slide
Slide 15 of 23

Before

Next slide
A screenshot of government website form with a wall of words and a multiple choice question buried at the bottom.
Slide 16 of 23

After

Next slide
A handsome-looking, responsive website with a singular multiple choice question at the forefront of the page.
Slide 17 of 23

Template Workshop

Next slide
Slide 18 of 23

Steps

  • Create a GitHub account or log in.
  • Make a copy of our repository.
  • Publish the site using GitHub Pages.
  • Configure a few site settings.
  • Edit question content.
  • Change homepage image.
Next slide
Slide 19 of 23

What to try next

  • Add new questions.
  • Edit home, exit, or success page content using markdown.
  • Advanced: Change the styling of layouts using USWDS utility classes.
Next slide
Slide 20 of 23

Takeaways

Why rapid web prototyping?

  • Accelerate learning
  • Reduce risk
  • Improve outcomes
Next slide
Slide 21 of 23

Next steps

Next slide
Slide 22 of 23

Resources

Next slide
Slide 23 of 23

Thank you!