Washington’s Department of Labor and Industries offers the ability for workers in various “program areas”—you can think of them like occupations—to keep track of their license or certification, to legally work contracts within the state. Initially, the plumbing program area needed an update to this service, which eventually grew to include all program areas.

During the course of this project, I modernized the design of application screens and content pages, brought them in line with the site's existing responsive framework, improved the user experience for logged in users, and dug into the code to make HTML and CSS improvements, and more.

Role: UX Designer
Duties:
  • visual design, UX design, user testing, UI development, front-end development, unit test writing
Manager: Robyn Garcia
Developer: Jeremy Schrader
Screenshot of the certification and licensing logged in screen.

Design

The Problem

The interactive portion of the project was in need of an update, both aesthetically and from a usability perspective. The development team was updating the application to a more modern framework and it was a good opportunity for me to explore how to make improvements to the user’s three primary goals: renewing their license or certification, printing their license or certificate, and keeping their address up to date.

Screenshot of the certification and licensing logged in screen.

The original, bare bones “profile” screen, once a worker had logged into the system. While technically it allowed them to manage their license or certificate, it did not offer much guidance.

The existing landing page was barren, with three lonely buttons in the middle of the screen. There were three key problems that needed to be solved:

  1. Users were often confusing the renewal and reprinting actions. While some text was available on the page, ostensibly to help clarify things, it was totally redundant, saying nothing more than what the buttons were already communicating.
  2. Users weren’t keeping their addresses up to date.
  3. Apprentices, in particular, struggled to fully understand their progress toward their journey-level status. That information just wasn’t available to them anywhere in this application.
Screenshot of the certification and licensing logged in screen.

Apprentices would receive an error about their educational status, but they had to go elsewhere to figure out what credits they still needed.

The Solution

I immediately saw an opportunity to turn that landing page into something that looked more like a profile screen. I added available details about the person who was logging in, including putting their address front and center, so they could clearly see when it was out of date. You can see the transformation in the screenshot near the top of this page.

I also added some clarifying text under the renew and reprint actions that explicitly told the user what they could expect when they went to manage their license or certification. This was validated during my live user tests, when all of my test subjects were able to quickly put themselves on the right path to complete their specific tasks without making mistakes.

For apprentices, I expanded the use of the renewal page to include progress tracking information, so they could better understand their progress toward becoming a journey-level worker in their industry. We eventually used this page for all workers in the system to track their progress if the system had that data available.

Screenshot of the certification and licensing logged in screen.

Apprentices can now see what educational requirements they have yet to meet before they can become a journey-level worker.

Other Improvements

I made other improvements throughout the application, cleaning up screens and minimizing the data-ink ratio as much as I could, in order to reduce the amount of reading, and increase comprehension. I also focused on the receipt pages. Often times the receipts included temporary licenses or certificates that would need to be presented when doing work. I wanted to spruce them up a bit and make them more presentable when they were printed out at home, so they could have a formal certificate.

An example receipt page with a temporary certificate included.

I also took some time to dig into the content side of things, re-writing pages in an effort to create a clearer understanding of the process, improve calls to action, and actually get users into the application from the external website. In live testing, users found it significantly easier to complete their tasks with these new content considerations in place.

UI Development

Finally, I even got to do some coding on this project. Because I’ve been building websites since the 90s, after my designs were passed on to the front-end developers, I switched into UI developer mode and helped them to fine-tune their HTML and CSS code, so that it would more closely match the designs I provided in the mock-ups. I helped lock in a detail-oriented, professional presentation. Because the new application was built using a responsive framework, I also wanted to ensure that new patterns I created broke down nicely in a mobile context.