Labor & Industries Apprenticeship Tracking (2019–2020)
The Apprenticeship Registration and Tracking System, often abbreviated ARTS, is an application that is part of the Washington Department of Labor & Industries website. It provides the public a way to learn about apprenticeship programs, apply to those programs, or look up information about apprentices and apprenticeships.
I began working as a designer on this project after it had started, and I worked with developers to improve the user interface, conducted in-person usability testing, and created a more streamlined user experiences for the site’s users.
- visual design, UX design, user testing
I was contracted to improve the design and usability of this complex application. Because I came onto project later in its development timeline, a lot of design decisions had already been made by the developers who were in the thick of building it, whether they understood they were making those choices or not. My primary goal was to improve the UI and UX where I could, without requiring a massive rebuilding of the existing structure.
The biggest issues I found were a problem that I like to call “database-as-UI.” This is when your database tables all get translated onto the page still in their raw table format, with all the headings, and the columns, and the table ID numbers. In some ways it makes sense, because all the data is ordered in the tables, so why fix what isn’t broken? The problem is that tables are notoriously not mobile-friendly. Even small tables can look crowded on a mobile screen, and in this case the tables looked crowded even at a roomy desktop resolution. It's also easier to draw attention to the important pieces of that data and minimize the less relevant parts when it can be laid out with a designer’s eye. Something had to be done.
There's also a lot to do in this application, and there was very little order to what users saw on the screen. Some action items were very important and didn't have enough emphasis. Other actions could be grouped together to give each other context, or to reduce redundant writing. Overall, everything looked the same.
Lengthy forms are commonplace on government websites. While scrolling isn't inherently a problem, it was easy to look at the existing forms and feel like they went on and on. There were opportunities to reduce the mental processing that each individual form field required. Ideally, I would shorten these forms as much as possible, but in the cases where I couldn’t do that, I needed to add structure.
A lot of this update was about creating structure.
For the main dashboard page, seen at the top of this page, I created a structure that made things easier to find. The user has many actions they can perform, so I grouped those together in broad categories. In particular, there are four primary action items, so I made those items impossible to miss at the top of the screen. I also designed icons in different colors to quickly differentiate them at a glance. In fact, I added all of the icons on this page to aid in quick comprehension throughout the application. As a bonus, they provide a bit of visual interest.
In a best case scenario, I would have reformatted the tables into something more overtly mobile-friendly, like a card pattern, but it was too late for this application. Instead I sought out ways to simplify the layout by reducing the number of columns and bring additional context to the content by grouping closely related parts together. By doing those two things, I was able to add some breathing room to all that text, along with a few other tricks, like using icons as shorthand and playing with alignment to add even more context between columns.
For the forms, I created a three-point structure to help users complete them as quickly as possible. This is most obivious in the desktop layout, where I structured the form into three columns. The left-most column had section information, like a category title and help text. This broke up the lengthiness of the form into digestible pieces. Then I spread the form fields into two columns, striking a balance between sensible layout and keeping the form from getting too long and scrolly. It just makes sense to have the first name next to the last name, for example.
Possibly one of the biggest changes I made was to create badges that communicate status information with new icons and colors (in addition to the existing text labels explicitly saying what the status is). You can see these in the Apprentice Lookup and Update screen, above. These changes make it easy to scan a table and find active apprentices, those who have passed their probation, who the outliers are, and other useful things like that. As another bonus, the pops of color help liven up the design, as well.
In addition to the application itself, I revamped the public apprentice details page template. I reused patterns developed on the internal application, including the status badges and the lozenge shape containing the apprentice’s tracked hours. This creates a visual consistency across the entire apprenticeship system, whether you’re coming at it from the outside or within.
Here, I also started using a pattern here that I call an "action," simply a straightforward icon-link pair that could stand alone, yet had a self-evident purpose. Sort of like a button, but not a button. It’s a useful UI pattern that had not yet appeared in the client's themes, and, like the status badges, it would become a tool that I have since revisited and improved while working on other projects with them.
When I revealed an early draft, the project manager whispered, “This… is a Ferrari.” I’ll take that to mean he liked it! Cheekiness aside, I got to test this design a few times in recorded usability studies and overall the response was positive. There will always be room for improvement, but suffice to say, this was a big upgrade from the previous version.