Designing A Training Management Tool

SEIU 775 Benefits Group is Washington state's second-largest educational institution by enrollment and provides training for hundreds of thousands of home caregivers annually.

This case study covers how I designed low-fidelity wireframes for the MVP launch of My Benefits Resources, a web app that allows users to enroll and manage training on behalf of caregivers.

Role

UX Designer

Company

SEIU 775 BG

Platform

Web

Methods

UX/UI Design, Wireframing, Prototyping

A computer monitor displaying a high-fidelity wireframe of the My Benefits Resources caregiver dashboard

Background

Becoming a home caregiver in Washington state requires the completion of several extensive training courses and a certification exam. After certification, caregivers are required to take 12 hours of training courses annually to maintain their status. While caregivers can enroll themselves in these courses, they sometimes need assistance from a third-party due to technical difficulties, language barriers, or because their employer manages all training for them.

Previously, SEIU 775 used a customized SalesForce plug-in to allow third parties (e.g., employer agencies, help center reps, etc.) to access caregiver training records. However, this plug-in was being discontinued and the Benefits Group needed a replacement. Years of customizing the plug-in to support multiple data pipelines and unique tasks meant that the Benefits Group was hard-pressed to find a suitable alternative that wouldn't require additional alterations.

For that reason, the Benefits Group decided to design and develop its own caregiver training management system, dubbed My Benefits Resources (MBR). Stakeholders wanted to start with the creation of a minimum viable product (MVP), which would need to support 14 distinct use cases that could be accomplished within the old system.

The Goal

Deliver designs for an MVP version of My Benefits Resources that accommodate key use cases while also addressing the needs and pain points of the main user groups from the old system.

My Role

I led the design of the information architecture, low-fidelity wireframes, and prototypes, collaborating with our UX Researcher and UI Designer throughout the project from July 2020 until July 2021. Unfortunately, this project was then put on hold by senior leadership and I was not able to see my designs built out by our Tech department.

My design process for this project is outlined below:

Discover

I began by meeting with a coworker who walked me through the existing training management system. This was my first time seeing it in action. In the process, I learned of the three main user groups within our system:

  • Employers: Agencies that employ caregivers and manage their training, client assignments, and more
  • Member Resource Center (MRC): An SEIU 775-affiliated support center that caregivers can contact to ask questions and get assistance with issues involving training, healthcare, and benefits
  • SEIU 775 Benefits Group (BG) Admins: Individuals across various teams within the BG who can perform services on behalf of other BG teams or caregivers

These three user groups also contained sub-groups, each with their unique permissions. Ensuring all groups and sub-groups retained their permissions in the new system was critical to a successful launch. I created a permissions spreadsheet and high-level information architecture diagrams to keep track of this.

Truncated chart of user permissions for user groups and their sub-groups. Access to use cases indicated by Y/N.

Define

While I worked on the User Permissions Spreadsheet and IA diagrams, our UX Researcher conducted user interviews. She was able to gain insights into the pain points, wants, and needs of the three main user groups. Armed with the permissions spreadsheet, information architecture diagrams, and these research findings, I was ready to start designing.

Design

This section will focus on my work on the "caregiver search" feature, which began with a review of the design and functionality of the current caregiver search page. I noticed several issues with the page design that I felt could be root causes of the “having to scroll through a lot of information” pain point. These were:

  • Displaying more information than needed in the moment
  • Excessive white space between page elements
  • Extraneous UI elements that fill the page with visual clutter

Caregiver profile search page in the current system

Caregiver search results in the current system

I sketched a handful of redesigns for the top half of the page that contained the search input fields, keeping the aforementioned issues in mind. In these sketches, I played around with various ways of reorganizing the input fields by grouping, hiding, or combining them. I also explored the idea of hiding the bulleted list of search criteria rules until a user clicks on a relevant field, since the list took up so much vertical page space and was worded in a confusing manner.

Initial sketches of search input field redesigns

Wireframes: 1st Iteration

For the first iteration of wireframes, I reverted to designs that displayed the search criteria rules up front and did not change the function or number of search input fields. This was because I didn’t want to commit to any major design changes until I could consult with the Tech team. Also, despite saving space, hiding the search criteria requirements until after an input is made seemed like an obstacle as it added another step. As an alternative, I rewrote the requirements to be more concise. I also tried placing the requirements next to the input fields that they pertained to so that users would only need to read the rules relevant to their use case.

Wireframes: 2nd Iteration

After showing these three different designs to my teammates, I received feedback and some updated requirements, which led to the following changes in my second iteration of wireframes:

  • Removed search criteria requirements as they will no longer apply in the new system
  • Removed search field categories and combined First and Last Name fields for a more compact design
  • Added additional search filters and option to reset search fields

I also redesigned the appearance of the search results by removing excess UI elements and white space. This made for an overall cleaner look and allowed me to add more columns to the results table, which I thought would help in the event that a search by caregiver name returned multiple direct matches.

We then conducted internal usability testing with 8 participants, using prototypes I created for each key task required for the MVP. All tasks related to the caregiver search feature were completed successfully by participants. However there were several interesting points of feedback and observation:

  • Users liked the added filters for Active and Inactive caregivers, but would prefer both to be enabled by default
  • One user did not notice the search result when it returned "0 caregiver(s) found"
  • The "Create a new learner" button is actually hidden below the fold when viewed on a smaller laptop screen
  • First and Last name should be separate search fields instead of combined into a single Name field

I was completely surprised by the "Create a new learner" button being hidden under the fold as I had not previewed my design on anything smaller than my external monitor up until this point. To address this, I switched to a layout that placed the search input fields and the search results side-by-side in my final iteration. I also moved the option to create a new learner into a separate navigational tab among other layout changes. This ensured that all elements of the page would be visible without the need to scroll, even on smaller laptop screens.

Additional MBR Wireframes

Reflection

Unfortunately, this project was cut short and I was unable to perform usability testing on my final designs with end users, or measure the impact that my designs made. If I had more time, I would be interested in conducting user research to evaluate the information architecture and user flows that I designed, as we did not receive any feedback regarding either of these topics during usability testing. Using a method like card sorting, where participants place individually labeled cards into groups according to criteria that make the most sense to them, could be a suitable option. Measuring the time to complete tasks in the old system versus the new system could be illuminating as well.

I also would like to investigate if we could address any other high level pain points on the caregiver search page. A majority of the pain points listed were experienced elsewhere within the system, such as the caregiver profile page. However, I'm curious if any users switch between additional browser windows or software to copy and paste information when searching for a caregiver. If so, it could be worthwhile to explore a responsive page layout that maintains optimal visibility for either search fields or search results when the window is resized.