WIL Catalog
A web app that connects employers with emerging talent through work-integrated learning opportunities.
The client
TalentED | Calgary Economic Development
User types
Admin, Post Secondary Institution, Employers
The goal
Redesign the existing Wordpress WIL catalog to improve functionality including filters and search to make it easier for employers to find suitable students. In the existing catalogue employers must manually browse through pages and pages of programs to find something suitable.
Currently, TalentED admin are responsible for creating all catalogue listings. We designed and built a new front end for PSIs to create their own program listings.
One of the biggest points of frustration is the time consuming process of creating listings and finding listings. How we resolved this will be detailed below.
This is the catalogue being replaced. It offers information including program name, WIL category, pay type (if any), time commitment, terms, and the institution. The search bar searches too broadly to return relevant results. The employer lacks much agency when browsing. The employer must browse hundreds of listings to find a relevant program. If they do, they can post a job through the TalentED portal.
An important goal for the new catalogue is to give employers more tools to find suitable programs. And make it a little more attractive.
The new catalogue page | grid view
After several iterations the final form of the catalogue looks like this. It features program tiles, robust filter tool, a generally neutral palette and TalentED’s Cornell Red, Rose Madder Red, and True Black.
Key features
Improved search bar
The search bar is tuned to look at specific data sets rather than search universally as the original catalogue did. Constraining the search bar results aims to pull more meaningful results.
Filters
The new filter set gives employers another tool for finding specific results including WIL categories, available terms, paid or unpaid programs, etc. This filter works dynamically so results automatically and immediately update as options are selected/unselected.
Bookmarks
To help employers keep track of interesting programs we have implemented bookmarks. Once a listing is bookmarked it is added to a tab (see picture below) which can be opened and closed, with a special feature that will be detailed below!
The bookmark tab
When employers bookmark listings, they are added to the bookmark tab which contains up to 5 listings.
Key features
Generate job listing
Implementing NOC codes has afforded an interesting and time-saving tool for employers. As long as listings have NOC codes assigned to them and are bookmarked, an employer can click the Generate Job Listing button and AI will analyze all NOC codes across the bookmarked listings. In about 8-12 seconds, a job listing will be generated that the employer can copy and paste wherever they want.
The existing TalentED site hosts an employer portal and flow for posting jobs. Having a job listing based on the programs the employer has identified speeds up the process for the employer posting a job.
Program description
When an employer clicks a summary tile, it opens a modal showing more details about the program.
Key features
Program details
Clicking on a listing opens its description modal offering all available details including job posting deadlines, description of the program, duration of the program, financial commitment, contact information, and any relevant links associated with the program.
Export
Employers may export program information via PDF or Excel.
NOC details
If a program has NOC codes assigned to it, employers can hover over the “i” icon to open a tool tip displaying the main duties associated with that role. This aims to give employers a better idea of the kind of skills they could expect from students in the program.
PSI (Post Secondary Institution) program table
PSIs can now make their own programs so TalentED doesn’t have to. TalentED still needs to be involved in a review process before PSI-created listings are published to the WIL catalogue.
Key features
Program table
The program table displays all the listings made by the program and some relevant data. PSIs can view the program details, edit programs, and delete programs. The table can be searched and sorted to help PSIs locate programs.
Statuses
A status system makes it quick and easy for PSIs to identify where programs stand.
Publish/Unpublish
Once listings have been approved by TalentED staff, the PSI can then publish that program to the WIL catalogue. The choice being up to the PSI is important since they will want to submit programs in advance of wanting them available to employers depending on when they can offer students. PSIs also have the option to unpublish live listings.
Create program
PSIs can make new programs by clicking the Create program button.
The program form
PSIs create programs from their program table. The single form captures all the information needed for the catalogue as well as information TalentED needs for internal purposes.
The program form
PSIs create programs from their program table. The single form captures all the information needed for the catalogue as well as information TalentED needs for internal purposes.
Key features
Details
PSIs can review their programs’ details.
Actions
PSIs can perform a handful of actions from their program view page.
- Preview listing opens the program modal just like how the employer would see it from the catalogue.
- Edit allows the PSI to edit the program listing (once a program is live they cannot edit it unless they unpublish it first and have it re-reviewed and approved by TalentED admin.)
- Submit will send the listing off to the TalentED backend where they can view the listing and approve it. This sends an email notification to the TalentED admin that a new program is available. Once approved, the PSI receives an email notification of the approval (or denial).
- Duplicate will create a copy of the program and it open it in edit mode. Many programs have very similar details so duplication saves PSIs a lot of time.
- View activity log allows the PSI to see the history of the program like creation date, any edits made, submission date, and approval/denial dates.
And it’s
mobile friendly!
User testing
Pixeltree’s product designer and senior developer met with two groups of user bases; the PSIs (post secondary institutions) and employers who have used the existing WIL catalogue to source students for work placement.
The main purpose of meeting with these two groups was to find out the most meaningful data they both need and how to marry the two into a cohesive app that serves both user types. The system needed to be flexible enough to accommodate the needs of both parties.
Pixeltree had two meeting dates with these groups; on both occasions we met with PSIs in the morning and Employers in the afternoon. We shared mockups to get feedback. Implementing NOC codes was born out of meeting with Employers since it’s a standard many of them use to create job descriptions and identify prospective hires. Initial impressions were great and we came with with new ideas and adjustments.
In the second round of testing we did a walkthrough of how PSIs create programs and onboarded the PSI testers into the staging environment to give it a test drive. Impressions were great and we came away with some UI tweaks and ideas for features in future iterations.
Employers were shown the completed WIL catalogue in a live demonstration. They were excited about seeing the NOC codes in action, job descriptions being generated, and the robust filter system. Feedback was very positive and we came away with ideas for future features.
We followed up with surveys for both user bases to collect notes on their experiences navigating the app, any frustrations, and general open-ended feedback.
