UX Designer | Human Computer Interaction

IBM & GSA Design Team
Accessible, responsive, open-sourced design system and website transition support
UX Design Consultant 2021-present

Required Skills:
-
working with development, business, Service Designers, and federal teams
-
user testing prototypes
-
creating new components
-
maintaining design system in Figma
-
becoming subject matter expert
Purpose

SAM.gov is a site managed by the General Services Administration that allows users to register to do business with the U.S. Government, search records, reports, opportunities, and publicly available award data, as well as view and submit reports.
They were scheduled to undergo several large transitions in function and style that I was able to assist with.

Design System
The GSA design team maintains a design system using USWDS and custom components. I joined as an IBM UX design consultant to help with the transition from their beta website to the new design system.
We maintained and created components and mockups for SAM.gov as they made major transitions in their function and look-and-feel to create consistent and accessible branding and UI/UX.

SAM Design System is 508 compliant.

Process
Collaboration: GSA maintains a massive team of developers, BAs and designers, all working in an Agile SAFE manner.
I worked on the Design Systems Team, with one to two other designers as well as developers.
We received design stories bi-weekly, and had weekly design reviews with the client. We demo-ed to the client and developers at the end of each sprint.
I was able to work directly with BAs and developers from other teams as well to solve design dependencies.

SAM Design System is responsive.
SAM Design System is responsive.
SAM Design System is responsive.
Entity Registration
After the initial launch of the updated SAM.gov, there were many issues around the process of Entity Registration. I was the designer on an emergency taskforce where I collaborated with developers, BAs, and product owners to rapidly iterate on new designs for this workflow.
.png)
Migrating the Design System from Sketch to Figma
I lead the initiative to move our design system libraries from Sketch to Figma.



Entity Registration Modularization
Users have a very difficult time registering entities on SAM.gov. After the initial emergency redesign and some additional research, we decided that it would make sense to modularize the process. This effort became a major focus of my work with GSA. I worked on all of the initial module designs and research.
I took on the subject matter expert role among the designers for Entity Registration. After creating initial wireframes and mockups, I worked with Service Designers to test and iterate.
As my seniority increased, I collaborated more and more with devs and business executives on multiple MVP releases.
Registration Opportunities:
Documentation: Users struggle to know what documents they need to have on hand.
Anxiety: Users are very stressed about making mistakes due to the legally binding nature of the registration.
Linearity: Users often get stuck in the current, linear registration, unable to move forward until they hear back from relevant departments and stakeholders.
Help Desk: The client wanted to cut back on help desk expenses as much as possible.
.png)
Module Dashboard
We quickly understood that we would need a dashboard to act as a home base for the entity registration process. I iterated on wireframes and worked with service designers to test the design before creating hi-fidelity mockups.
Individual Modules
A complex process, entity registration required the creation of several modules.
I worked with design and business leaders to determine how best to organize these modules based on the existing registration as well as legal and back-end constraints.
Registration Challenges:
Old, entangled back-end processes and data repositories
Mixture of power users and users with no experience and poor technical abilities
Complications involving legal ramifications and restrictions as a government website
Iterative MVP Roll Outs
Created a staged approach to rolling out the modules, enabling dev teams to untangle existing code and structures over time.
Help implementation:
We worked with content and service design to create a framework for implementing help and instruction revolving around a contextual help slide-out component.
Registration Future State:
Invisioned a future state where the registration experience could be customized based on initial questions to provide the appropriate amount of help for the user as well as adjusting the flow and simplifying questions based on their entity type and desired completion speed.


User Feedback
The GSA team also collected extensive feedback from our in-website form as well as user testing.
I designed many clickable prototypes to be used in user interviews, and made changes to mockups that improved our users’ experience.
Working with a growing design team
I became the most senior designer on the team. In order to help new teammates, I created an onboarding slide deck.
We gained a team of Service Designers, with whom I worked on the Entity Registration Modularization effort.
I continued to be the main point of contact for questions from designers, service designers, and entity registration development teams.

Business Information
Business Information is the first module of the registration process. Because it involved validating user documents as well as a search feature, the module was complex to design.

Other Designs
Comments Component

I researched best-in-class examples and good practices to develop a UI for a comment component.

Horizontal Filters Component
I saw the need to adapt our vertical filters component into a horizontal one for in-page filtering.