Designing Union Member Management Software from the Ground Up
I worked with a development agency as the sole UX/UI designer to create a from-scratch member management platform for the elevator worker's union of Ontario. I designed the entire UI, led the UX strategy and information architecture, and did walk-throughs of the designs with the client to gather feedback.
The administrators of the union had been using old and bare-boned software for member and job management. The agency I worked for was building them a brand new platform and wanted the design and functionality of the software to be driven by UX considerations.
Because I hadn’t seen or used union member management software before, I had to look elsewhere for design inspiration. The complex searchrequirements made me think of health insurance provider search engines, and I used those as references for how to organize search filters and search results.
Member Search Flow
First, I designed the member search flow. This required the ability to directly search for a member, filter the search, and sort the results. The results had to include a photo of the member, information that was searchable and directly corresponded to the search filters, and links to perform actions using that member's data.
My solution was to have each member result display as a slim card that could accommodate both a photo and condensed member information but also not take up too much space to allow for easy scrolling through the results. I created tags for the filterable member info that displays along the bottom of the card. To go to the members profile, you click on the card.
The search result card design was a huge hit with the administrators. Previously, member search results included no photo and very little information aside from the member name.
Member Profiles
The member profile had to include not only the member's personal information, but also their work history, accounting information, schooling, beneficiaries/contacts, and any miscellaneous documents related to them.
I designed each of those categories as tabs that the user could quickly switch back-and-forth between while the most critical member information and actions remain at the top.
For some of the tabs, I organized the data into tables for ease-of-use and legibility.
When someone with administrative privileges uses the platform, they are able to edit the information and data.
The individual member page in Edit Mode
Tracking Member Education Status
The next flow is for schooling. Each member must complete a certain amount of classes in order to go from elevator 'Apprentice' to 'Mechanic.' The administrators need to be able to keep track of and edit the classes, instructors, and students. The instructors need to access the classes they teach and enter rosters and grades.
I again used tables to display the schooling data and included a search bar for the roster table so that users can quickly search and add students. Users can also make notes about each student and see profile photos of the students directly on each class page.
Adding a New Member
Administrators needed to be able to add new union members and manually fill out their information so that it can be stored in the system.
The ‘Add Member’ CTA is directly to the right of the member search bar
Third Party Access
Third party dispatchers need specific access to the platform in order to pull members from the 'out of work list' and send them to jobs.
I designed the dispatch flow as a simplified member search that, once an unemployed member gets selected, then goes to an auto-filled (with that member's information) dispatch form for printing and faxing.
Responsive Design
Because the IUEC Local 50 administrators, instructors, and dispatchers use both desktop computers and tablets, I made the designs responsive.
This is the member search and info flow for tablet screens. The same amount of information is displayed, but the tables are horizontally scrollable and the nav bar is now a modal accessed by a hamburger icon.