- UI Design
- Web Application
- Drupal
2019-2021
Govinfo.gov
This was my first federal contract. I helped take a product overhaul from it's initial launch into the next iterations based on the client's vision. The project blended my background in academic research with software development and UX design. I had a unique combination of talents they needed to push the product further and it helped me grow significantly as a designer.
Project Background
This product is one of the U.S. Government’s official repositories for regulatory and agency data. 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 identify new feature opportunities and build them.
Noted Successes
I spearheaded prioritizing which features to design and develop during backlog grooming sessions with a project manager, getting a feel for the engineering culture and how I could boost the product’s usability while lining up with the client’s long-term product goals. Reduced backlog and a quicker turnaround on new front-end features were immediately noticeable to both the client and engineering team. The site also now has more robust page metadata that helps it’s repositories stand out with organic search and librarian research tools.
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, then took feedback from their help desk and training sessions to figure out the best next steps. This involved a lot of discovery 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
The client identified for must-haves: more robust and improved metadata, a citation tool for our librarian and researcher users, and improved look/feel for their re-usable Backbone.js component library.
The site’s responsive design, such as the typographic system and how search features showed up on smaller screens, needed a designer’s eye to be more accessible.
I needed to learn their CI/build process so I could implement code changes in absence of a dedicated 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 appealing 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 prototypes to help federal clients have more of a vision for product enhancements. 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. I focused not only on the design cohesion, but also Section 508 accessibility which hadn’t been a primary focus before.
I became well integrated with the engineering team and sought out for my design expertise and front-end development knowledge, bridging the gaps and becoming indispensable for the client.
Findings
The development ecosystem had to be considered in design choices. I wasn’t used to in previous roles where resource allocation wasn’t a huge factor in the product lifecycle.
They didn’t have a style guide or library to pull from, so I spearheaded documentation in Fractal.js, a front-end design style guide system, to capture what code changes were being made and how it related to our components.
The team had one design system shared across two products, and this made it easier to keep choices straight for future enhancements as well as uniform components to pull from.
