U.S. Library of Congress
Stakeholders (Project Team)
Contractors:
• UX Designer (me) • Design Manager • Accessibility Manager • Project Manager • Development Engineering Manager
Federal:
• Project Manager • Design Manager • Business Analyst • Multiple Federal managers and contributors
The Product
The Library of Congress (LOC) is more than just the biggest public library in the world. They also accept, approve process, and manage all U.S. copyrights and copywriter material.
The Problem
LOC had a vastly outdated application with zero accessibility and not mobile responsive - among many other concerns. The legacy application was limited to how many works a person or company could register online (up to 12) and anything over the set limit they must download, print, hand-complete, and mail the application via USPS. This process was slow and prone to errors (bad handwriting) and made user interaction and customer service challenging to say the least.
Our contractor team was brought in to design and build a custom SaaS application for external and internal users. In addition to being a UX Designer, I also participated in User Testing and met regularly with the Accessibility team to make sure we followed 508 ADA and WCAG standards.
Legacy Application Portal
My Role
The project had been going on for one year before my joining. Hired as the third UX Designer, for my Sketch, UX/UI, and 508 ADA experience. In collaboration with the Federal LOC UX manager our contracting team worked closely with Federal client to design, provide best practices, research, giving constructive criticism and feedback, industry standards, and our user experience. My goal and the team’s goal as contractors were to give guidance and aim to achieve a positive and successful project launch. Lastly, we worked in an Angular environment and when it made sense incorporated Material Design components.
Planning & Pre-Design Research
We held daily scrums, weekly grooming sessions, and weekly meetings with various SME’s, Business Analyst, Developers, the Project and Product Managers to review, ask questions, learn internal LOC best practices and habits, receive feedback, and provide design updates and status. Regular meetings were held to understand the pain points and needed areas of improvement. In parallel I took the lead and initiative to do research and provide documentation on industry standards for notifications and alerts. Provided this research to the client and they used it to help them decide which approach was acceptable. We (UX and the larger team) held occasional white boarding sessions to define process before wireframes began throughout each Sprint and next steps.
Discussing what user path a copyright remitter falls in, to submit a copyright work if part of a larger organization vs. a individual remitter.
More white boarding to go over flow and process.
Researched and created notifications for review (using the USWDS: The United States Web Design System)
Research on Error message Toaster stacking
Research for tool-tips and inline help notification (used USWDS: The United States Web Design System)
The Solution
The new Copyright.gov was being built with Angular and some Material Design components to make the site responsive. Provided a modern and standardized web application within the pre-existing LOC style-guide and branding. Since Library of Congress is federal, we also relied on the US Web Design System for standards and advice. Being an MVP project, the project and technical manager had to decide which features would make the initial design and development and which would go into the backlog for post-launch.
508 ADA was extremely important, I worked very closely with the accessibility team to receive any advice on my designs to make sure they could be developed for all users.
Participated in Usability Testing, that was held with various copyright users onsite and around the U.S. via video conferencing.
I/we had in depth discussions with Subject of Matter Experts to learn their thoughts on areas of improvement, their experiences with customer issues, internal and external usage, answer their questions and provide direction.
Wireframing
We held daily scrums, weekly grooming sessions, and weekly meetings with various SME’s, Business Analyst, Developers, the Project and Product Manager to review, ask questions, receive questions, internal LOC best practices and habits, receive feedback and request, and provide design updates and status. To understand the current pain points and needed areas of improvement. In parallel I took the lead and initiative to do research and provide documentation on industry standards for notifications and alerts. Provided this research to the client and they used it to help them decide which approach was acceptable. We (UX and the larger team) held occasional white boarding sessions to define process before wireframes began throughout each Sprint and next steps.
Wireframe display the document submittal page and related options.
Notifications window, accessed by selecting the bell icon. I went through several iterations after multiple discussions with the Accessibility team. We had to restructure the columns for accessibility. After research I suggested using these time-stamps, because they use minimal space and placing the icons in a separate column for accessibility. The Copyright admins will receive multiple notifications, they needed a way to access all these notifications regardless of time and date sent.
Legacy document upload page, added the arrows to highlight areas I felt needed a better UX.
One of many form pages in the work submission journey.
Users will receive a PDF receipt to their email, this is one of two options I created for the Federal team to choose from.
My suggested fix to the left wireframe. Placing important, but non-pertinent information in a Tooltip, this option clears space on the page while still providing the same information.
Research
The team conducted used preset personas to guide the design and decision process. In addition — User Research was performed with private citizen users to ask questions and gather their feedback on our designs and proposed development. This Usability Testing feedback was critical in moving our designs and development to the next phase where some of this feedback was used for further iteration. The user research was video recorded to share with the Federal client for additional discussion.
In my personal research I went to several partner, federal design standards for research, and best practices.
USAJobs.gov (for federal government log-in process)
USWDS – United States Web Design System (designsystem.digital.gov | federal design system)
Nielsen Norman Group (nngroup.com | notifications, validators, and alerts)
Web Server for Chrome and Angular NPM site (push notifications design and testing)
Material Design, Bootstrap (component discovery and more)
Yelp!, Yahoo, Facebook, etc. (compared industry leaders notifications and messaging)
The Process
Every detail was thoroughly discussed and researched before final approval.
Usability testing with external user via video conference, to gather feedback and suggestions.
Personas used as guidance to direct the design, research, and requirements process.
Final & Approved Designs
All mocks were done using Sketch and Photoshop and with Material Design as guidance for components and overall design system. Although I left before the application was completed, we made a lot of progress in my time there. The usability labs were successful and great learning sessions, the federal client was happy with all progress and it coming to fruition on schedule and ahead of expectations. All designs and work were completed within their assigned Sprint with client approval. I feel strongly that my contribution helped push the application forward and helped in creating a standardized and unified site with a positive and sensible user experience and a modern and up-to-date UI. The below designs are where things were when I left, I cannot confirm they are still implementing these designs.
Every detail was thoroughly discussed and researched before final approval. Thank you.
508, WCAG and ADA Web Standards — What Are They?
I wrote the below post for my contracting companies (Artemis Consulting) website. The CEO asked if I could write something for their blog and I was happy to contribute. The post of on the history of and what is Accessibility.