- UI Design
- Web Application
- Drupal
2019-2021
Govinfo.gov
I helped take a product overhaul from it's initial launch into the next iterations based on the client and agency's vision. The site soon became a better resource for congressional researchers and librarians, with a boost in overall traffic and more citations from the tools and metadata changes we integrated.
Recently upgraded from an older product, Govinfo was in need of further enhancements that didn’t make it in the initial launch. The former designer had left the contract and with my background in front-end development I got a unique opportunity to develop new feature ideas and build them out in their Drupal and Backbone.js environments.
Design Process
Discovery
The client had a rough roadmap for enhancements to take the initial MVP further. I reviewed their backlog to see what were priorities and used some of the research from the previous UX designer, and took the feedback from their helpdesk and training sessions to figure out the best next steps. This involved a lot of stakeholder meetings, while also getting a feel for the client’s dynamic - I soon learned federal government projects have longer timelines and plenty of power structures to navigate.
Findings
More robust and improved metadata, creating a citation tool for our librarian and researcher users, improved look/feel on components that didn’t get more attention during the beta, and refinements to their responsive design were what I defined as my initial focus. We broke out improvements over releases and rigidly defined sprints, and the engineers began teaching me their CI/build process so I could implement code changes in absense of a front-end developer.
Ideation
Each sprint I had a session with rough wireframing for new features and diagrams to get a feel for how users searched within the system. I learned more about how librarians and researchers utilized the system’s APIs and metadata, which would inform the new citation tools and search improvements. I also experimented with some emerging patterns and standards from the U.S. Web Design system after it had started reaching product maturity.
Findings
While they didn’t want to utilize the USWDS components yet, enhancements could follow in the spirit of it. Design garnishes to make the site more modern and apppealing were approved by way of typography, more responsive navigation menus, verification modals, and smooth animation sequences for interactive elements.
Design and Development
I did interactive Adobe XD prototypes (this was before Figma was government approved) to help federal clients have more of a vision for product enhancements, but also created static code prototypes for communicating with engineers. After getting sign off it was up to me to collaborate with the technical folks to write Backbone.js code and navigate their development ecosystem to add new features and components. We focused not only on the design cohesion, but also Section 508 accessibility which hadn’t been a primary focus before.
Findings
The development ecosystem had to be considered in design choices which I wasn’t used to in previous roles. I also spearheaded documentation in Fractal.js, a front-end design style guide system, to capture what code changes were being made and how the related to our components. We had one design system shared across two products, and this made it easier to keep our choices straight for future enhancements. Soon I was well integrated with the engineering team and sought out for my design expertise and front-end development knowledge, bridging the two gaps and becoming indispensible for the client.