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.
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!
- Introductions
- CodePen exercise
- Case study intro
- Template workshop
- Q&A
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.
- Brianna Naolu
UX Designer, Bixal - Demi Johnson
UX Designer, Bixal - Philip Levy
Director of Experience Design, Bixal
We help civic tech teams accelerate learning, reduce risk, and improve outcomes by making ideas more tangible more quickly using rapid web prototyping.
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.
- 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.
- 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.
- Rapid prototyping
- Lean research
- Content and data repositories
- Template frameworks
- Facilitation
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.
How might we get people to the complaint form as soon as possible with the least amount of confusion?
- Test the current screener.
- Brainstorm ideas in Figma using USWDS components.
- Build new screener using USWDS, Jekyll, and GitHub Pages.
- Conduct user testing and consider feedback.
- Repeat Steps 2-4 as necessary.
- 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: HHS OCR Complaint Portal Assistant
After: USWDS Screener Prototyping Tool
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.
Here are the tasks we'll try together:
- 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.
Here are some other things you can do once you get the hang of it:
- Add new questions.
- Edit home, exit, or success page content using markdown.
- Advanced: Change the styling of layouts using USWDS utility classes.