Increasing jobseeker satisfaction by 81% with an all-new interactive employment roadmap.
Timeline
Nov 2022 - Sep 2023
Platform
Responsive Website
Role
Product Designer
Front End Developer
Toolkit
Figma
React
TransCanWork (TCW) is a nonprofit organization that provides job-hunting resources and support for trans, gender-diverse, and intersex (TGI) jobseekers. They also create safer and more comfortable work environments from the ground up by offering training and certification to employers, equipping them with the tools they need to help improve TGI representation in the professional sphere.
To create this website, I worked with a team of UCLA students consisting of 1 product manager (Nasser), 2 fellow designers (Jiyeon, Megan), and 10 developers (Aaron, Alan, Angela, Dan, Diya, Jiamin, Kaylee, Kevin, Ryan, Solia)!
The method TCW used for keeping track of a jobseeker's progress was a cumbersome, multi-page Google Sheets document. For navigators (professionals assigned to jobseekers to guide them along their journey), repeating this workflow for many different clients was tedious and susceptible to human error. For jobseekers, the process was not very interactive or transparent—jobseekers had no way to even see their own progress, contributing to higher rates of burnout and even quitting!
In order to maintain jobseeker engagement and motivation in what can be a demoralizing process, our main goal was to make the external-facing app for clients as fun and visually striking as possible.
At its core, we wanted the website to serve as an easy way for jobseekers to track their progress towards finding employment. Simultaneously, we also sought to standardize content in a way that would make internal management simple for TCW administrators.
Since TCW doesn’t have any dedicated developers or designers on staff, designing a flexible and thoroughly fleshed out product was critical to ensure the product's long-term usefulness.
How might we improve the job hunting experience by representing it in a structured, yet interactive and engaging way?
To kick off our research, we conducted an analysis of three websites which offer services similar to that of TCW’s: JibberJobber, Youth@Work, and Job Search Journey. We were then able to identify commonalities between the sites which suggested features we should incorporate in our own product, as well as things we noticed that we'd want to avoid doing.
Next, my team and I interviewed several TransCanWork employees to better understand the issues they were facing. Our conversations confirmed from firsthand sources that TCW’s process took a great deal of agency out of jobseekers' hands, while simultaneously forcing lots of manual work and organization onto navigators.
Lastly, we synthesized our findings from both the competitor audit and the preliminary user interviews to identify common themes and trends. The result was this web of ideas:
During our inquiries with TCW navigators, we found out that jobseekers only get to meet with their navigators once every 2 weeks, at most. Between sessions, jobseekers had no way of accessing the information on their own progress that navigators were seeing. To make matters worse, they lacked easy communication with their navigators, leading to an uninteractive and isolating experience.
While TCW’s spreadsheets were the very backbone of their work, they also contributed to a slow, tedious workflow since each jobseeker had their own individual spreadsheet. Our research revealed that navigators could expect to have upwards of 100 clients at a time. Having no compartmentalized way to represent all this data was slowing down the process for everyone involved.
It would be a quicker process if clients could see their file without having to wait for the next availability to book a whole meeting with me.
My team began the design process by mapping out a simple user flow based on the three kinds of TCW users: administrators, navigators, and jobseekers (my main population of interest for this project). This grounded us with a home base from which we could ideate possible solutions that worked to the benefit of all types of TCW members.
At this stage, in collaboration with the lovely folks over at TCW who acted as our liasions, we made the decision to represent jobseeker milestones in the form of a pirate roadmap! We felt that doing so would help facilitate a motivational sense of progression towards a goal, while also giving the platform an engaging and never-before-seen spin. The theme was inspired by Our Flag Means Death, a rom-com about LGBTQ pirates that had just come out (no pun intended).
From this point on, I assumed full ownership over this portion of the project. I began by creating a rudimentary sketch, giving each island its own unique, alliterative name for that extra charm factor!
Moving onto mid-fidelity designs, my first order of business was to replace the blobs with actual islands! Each of the 10 islands represents a section of the TCW's old spreadsheet for mangaing jobseekers, but in a reimagined and user-friendly way. Since this would be an external interface, my main goal during this phase was to create a unique visual theme and alliterative name for each island.
Fast forward several more iterations (although I wish I could show you the whole process!)—the next major update came after showing some preliminary designs to TCW. Per TCW's feedback, I adjusted the roadmap details popup to align more with their brand, and modified the data within them to reflect their new data models. I also continuously built upon the roadmap's visual design to give jobseekers the most fun experience possible!
At this point, the app was ready for testing with some real users. My team and I recruited a mix of jobseekers and navigators, with different levels of experience with TCW, to try out the new roadmap. A session would consist of a series of scenario-based tasks, follow-up questions and feedback, and a questionnaire to help quantify the success of the design.
The Menu button on the top-left, which served solely as an alternative way of navigating between islands, was only complicating things without providing any additional accessibility. After some discussion, my team and I opted to replace the extraneous menu with a calendar of TCW events, to give convenient access to a common resource and help reduce cognitive load.
Even in our relatively small testing pool, we saw participants joining the call from tablets and mobile phones. Certain parts of our prototype weren’t equipped to handle these touch interactions, which only emphasized that we couldn’t bank on every user accessing TCW through a computer (an assumption we'd previously made).
After what feels like countless iterations, the employment roadmap became what it is today! Small details were added throughout to improve the experience of using it. For example, the dotted line to the red X provides a sense of direction, helping to demystify what is often a confusing process. In addition, islands will start black-and-white, then fill in with vibrant colors once their corresponding milestone is completed, to make progress feel more rewarding and interactive.
Clicking or tapping on an island reveals a popup with details about the milestone it represents. They can include forms to fill out, checklists to mull over, resources to check out, and more! These popups make it possible for jobseekers to instantly view and manage tasks without having to wait weeks for their next navigator check-in. As requested by TCW, bits of pirate lingo are also sprinkled throughout!
For the first time, TCW jobseekers can create profiles to show off their personality. Full profile customization, including avatar and banner image selection, provides jobseekers full control over their job-hunting voyage. The profile page also acts as a portal to easily contact your assigned navigator, if the need arises.
As popularly requested during our user testing, jobseekers can also access their roadmaps from the convenience of their phones! The roadmap responsively condenses into a linear, scrollable design, intentionally crafted to take full advantage of smaller screens while still providing the feeling of navigating a map. This way, we provide a flexible and joyful experience on the go.
For a project of this scale, it was crucial to create an organized style guide that would ensure consistent design and implementation. Playful fonts and full color palettes were individually chosen for each island to create the most engaging and nautical experience possible. And it's not just for show: by creating and adhering to this style guide, I expedited my design speed in Figma by an estimated 75%!
The new website’s worlds apart from the old spreadsheet… It looks so much better, and it’s a lot easier to navigate!
When I was first entering the design industry, I never imagined I’d one day be creating a pirate map for job-hunting. This project, with all its flashy colors and illustrations, was much different from the minimalistic designs I was used to.
However, doing something a bit outside of my design comfort zone was incredibly refreshing and eye-opening. Not only did I get to create a gamified client interface—a rare opportunity in and of itself—in the process, I was introduced an entire world of design trends and styles that I had yet to previously delve into. Now that I've gotten a taste, I've found myself much more willing to experiment and take risks in my design work!
This project helped me realize that in many ways, design is more about working smart than working hard (although I'd like to think I am doing both!) This manifested itself in my work with TCW when I decided to componentize everything I could, from input fields to decorational shipwrecks. Doing so ended up saving me hours of time, allowing for a more quality end result.
My only regret is that I wish I’d started sooner—I only bit the bullet and componentized all of my work around the third iteration—but now I know what to do for whatever project I take on next!
... And a big thank you to the TransCanWork team for holding the most wonderfully chaotic work sessions, for implementing all the crazy designs I came up with without a complaint, and for always being up for a discussion about whether Helen Keller really flew a plane.