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

Slide 2 of 21

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

—@naval on Twitter

Next slide
Slide 3 of 21

Agenda

  • Introductions
  • CodePen exercise
  • Case study intro
  • Template workshop
  • Q&A
Next slide
Slide 4 of 21

Introductions

Next slide
Slide 5 of 21

Who we are

  • Brianna Naolu
    UX Designer, Bixal
  • Demi Johnson
    UX Designer, Bixal
  • Philip Levy
    Director of Experience Design, Bixal
Next slide
Slide 6 of 21

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 21

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 8 of 21

CodePen Primer

Next slide
Slide 9 of 21

Exercise

  1. Grab our CodePen boilerplate.
  2. Rebuild this practice page using USWDS components (Reference page).
  3. Add your own variation using other components or styling.
  4. Share your link in the chat.
Next slide
Slide 10 of 21

Case study: HHS Complaint Form Screener

Next slide
Slide 11 of 21

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 21

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

Next slide
Slide 13 of 21

Before

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

After

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

Template Workshop

Next slide
Slide 16 of 21

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 17 of 21

Going further

Next slide
Slide 18 of 21

Takeaways

Why rapid web prototyping?

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

Next steps

Next slide
Slide 20 of 21

Resources

Next slide
Slide 21 of 21

Thank you!