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.
UX Designer
SEIU 775 BG
Web
UX/UI Design, Wireframing, Prototyping
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 tasks that could be accomplished within the old system.
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.
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:
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:
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.
Information Architecture diagrams for the three main user groups
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.
I created designs and prototypes for all 14 MVP user tasks, however 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 contributing to the reported pain point of “having to scroll through a lot of information.” These were:
Caregiver profile search page in the current system
Caregiver search results in the current system
I sketched a handful of ideas for redesigning the top half of the page—which contained the search input fields—while 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
For the first iteration of wireframes, I reverted to designs that displayed the search criteria requirements 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 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.
Three variations of the caregiver search input fields, as part of my first round of wireframes
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:
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.
Second iteration of the caregiver search page (empty state and search results returned state)
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:
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.
The following changes were made in the final iteration:
%20Final-min.png)
Final iteration of the caregiver search page (empty state and search results returned state)
-min.webp){kind=spacer}
Unfortunately, this project was cut short before I could perform usability testing on my final designs 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.
[year]