San Diego Workforce Partnership (SDWP) is a public-private nonprofit organization. Their My Next Move (MNM) initiative provides resources for job seekers who face unique challenges in finding their next job or forever career.
Their team knew they had compelling career materials. The problem was their visitors couldn’t find them.
SDWP also wanted to integrate the Japanese philosophy of ikigai more effectively into their MNM steps. Ikigai and MNM were, in fact, already woven into the fabric of SWDP’s career-finding approach.
Unfortunately, ikigai and MNM were confined to isolated pages, so the user hit dead ends instead of leveraging their helpful foundations. Same with the other MNM resources.
To boot, the organization identified several San Diegan populations with specific job search needs. The team asked for our help creating dedicated landing pages for each demographic.
So, what’s a Creative Services Department to do?
Industry
Cozy Services
The site’s information architecture started as a daunting challenge for job seekers. The homepage was barren, and the visually simple main navigation did little to support the user journey or tell a compelling story for the organization.
The seemingly most useful navigation item, “Job seekers,” led to a series of interactive cards that, while engaging, disconnected essential career planning resources and two vital narrative elements: MNM and ikigai.
The team had a great deal of helpful content. The problem was that it was confined to its own categories when it needed to be organized into a broader framework.
Given that we had to work with the current navigation and the interactive card layout, we focused our energy on tying together MNM and ikigai into an existing MNM landing page. We also implemented a familiar mental model to guide job seekers with clear steps to finding a fulfilling career, relevant training, or immediate job.
Somewhere within ikigai, the MNM pages, and the SDWP site was a cohesive narrative that would fuel a streamlined journey and vibrant design.
We started by addressing specific audiences, then recommended to SDWP that we also engage other populations as well. We integrated the MNM ethos, ikigai philosophy, and RIASEC approach as signposts throughout the experience.
Our efforts culminated in a radically new site unified around guiding frameworks of ikigai, RIASEC, and MNM, specifically addressing diverse career searchers’ needs.
Discovery
We gathered collateral from SDWP’s existing branding and goals for the organization and site. Our team analyzed this information to strategize a new design that reflected their ideals. From this, we brainstormed personas that the new site should address.
Our analysis showed that SDWP targeted three priority populations: job seekers, career changers, and career counselors. This distinction guided much of the information architecture to come.
Research
We conducted a thorough competitive analysis around existing tools for users’ career searches. The team also collected feedback on the existing website.
Then, we concluded that users had trouble finding content and needed a more guided experience.
Content structure
Before focusing on color and beauty, we worked through the pages’ visual structure. We laid out each one to address the demographics we identified through discovery and research and prioritize the content on the page.
We created schematic black-and-white mockup structural work, then tested the wireframes to ensure our layouts were clear, and users could quickly locate their career path information.
UI design
We wanted to make sure the design enhanced the wireframes’ efficacy. So, we ensured it supported the informational hierarchy, guided users to the right places, and conveyed effective content to accomplish these goals.
As we moved on from UX, we ensured the UI design enhanced SDWP’s brand palette to help users learn and recognize sitewide concepts, including ikigai and the RIASEC.
Discovery
The work was well received, along with our recommendations to engage specific audiences. So, SDWP asked us to address those demographics that we identified as another priority for them.
We did generative, qualitative research and found that users’ needs clustered around vets, justice-involved individuals, new Americans, teachers, teens and young adults.
Research
Our research began with interviews of the SDWP staff, who worked with these newly-identified core populations and could speak to their job-search pain points.
We identified a series of audiences from these interviews and batched them into an immediate priority group. Then we put more users into a second priority group to address in the following work phase.
“MNM...is enabling us to have the tools to make a big splash, which I’m very confident is coming.
Sarah Burns, SDWP Director of Learning
Content structure
These specific demographics had particular needs and situations, which various SDWP content could address. We drafted in-depth outlines that mapped the appropriate SWDP content to these populations, fueled and supported by the ikigai, RIASEC, and MNM frameworks.
We then used these outlines to go through the same wireframing exercise as the general audience to visually lay out the page content.
Design
From there, we designed the special populations’ pages, with curated resources structured around each user group’s pain points.
We also included a call-out box on each page so that users could access the ikigai/MNM framework.
The new website utilizes lively colors, clear visual cues, and a thoughtful strategy so users can easily navigate according to their career search needs. While the content caters to job seekers, career changers, and career counselors, specific populations within these categories can access their demographic-specific pages from the homepage.
After visiting the homepage, those same specific population users may directly access their relevant pages. They can now obtain neatly-bucketed resources that we arranged according to each population-specific pain point. Or, thanks to the ikigai call-out box, they have the option to explore the site through the MNM framework.
“The biggest impact isn’t just on our organization, but for the community, which is the goal of this site.— Sarah Burns, SDWP Director of Learning
We created a modern, lively, and user-friendly site. The ikigai and MNM steps are integrated with cues that orient and propel visitors through their career search.
Users may either sequentially explore steps 1 - 5 or navigate in whatever step order they like.
We also implemented a toolbox at the top of all pages as a core cross-browsing element to integrate relevant content for job seekers at every step of their journey.
The homepage introduces the ikigai and MNM frameworks. Visitors are welcomed with a logical sequence and visual markers to consistently remind them of where they are in their journey.
We aligned each step with job seekers’ various needs. Visitors can begin wherever they want to find relevant, organized materials that relate to wherever they are in their career search.
Step 1: Your purpose
First, there’s MNM step 1, which explains the ikigai approach for a career-related compass.
The user starts with this colorful interactive graphic. They can click on any circle and jump down the page, with sections that direct them toward the next step that follows the ikigai framework.
Step 2: RIASEC
To find out their interests, users can select MNM step 2, where we integrated the RIASEC framework. Visitors have the opportunity to assess their career interests and paths.
Here, a colorful hexagon icon establishes a visual cue to ground visitors in their identified interests as they move throughout the site.
From there, these familiar colors guide the users on the rest of their journey. Job seekers can identify and explore careers and industries aligning with their skills throughout this step and the next.
Step 3: Careers
For MNM step 3, visitors find a robust list of careers SDWP curated and identified as thriving and hiring. We made this resource searchable, leveraging those same color-coded RIASEC icons and filters in response to the user testing feedback.
Visitors can browse careers with excellent earning potential based on their interests, education, and industry. The cards concisely introduce career metrics and relevant information.
Notice how, throughout the cards, we’ve again utilized the RIASEC icons and colors so visitors can identify careers based on their strengths.
Step 4: Thriving industries
Users who choose MNM step 4 can easily browse thriving and hiring industries. A colorful series of cards help visitors quickly find jobs arranged according to their interests.
Here again, we reuse the same visual treatments from the RIASEC to guide the user’s eyes. This design lightens the cognitive load and improves the user’s experience.
To complement the scannability, we created more colorful cards with salaries, interests, and openings for those looking to learn about San Diego’s Thriving Industries.
Step 5: Programs and training
Finally, users that want training programs to support their career transitions can access step 5. This step provides skill-building initiatives for visitors who wish to hone their career acumen.
To boot, many of the trainings align with the specific audience pages. Visitors still determining their program of interest can then utilize the Program Matchfinder to find specific trainings that align with their goals and desires.
Many programs provide the skills needed for steps 3 and 4’s Thriving Careers and Industries. That way, visitors once again follow MNM’s thematic connectivity.
Step 1: Your purpose
First, there’s MNM step 1, which explains the ikigai approach for a career-related compass.
The user starts with this colorful interactive graphic. They can click on any circle and jump down the page, with sections that direct them toward the next step that follows the ikigai framework.
Step 2: RIASEC
To find out their interests, users can select MNM step 2, where we integrated the RIASEC framework. Visitors have the opportunity to assess their career interests and paths.
Here, a colorful hexagon icon establishes a visual cue to ground visitors in their identified interests as they move throughout the site.
From there, these familiar colors guide the users on the rest of their journey. Job seekers can identify and explore careers and industries aligning with their skills throughout this step and the next.
Step 3: Careers
For MNM step 3, visitors find a robust list of careers SDWP curated and identified as thriving and hiring. We made this resource searchable, leveraging those same color-coded RIASEC icons and filters in response to the user testing feedback.
Visitors can browse careers with excellent earning potential based on their interests, education, and industry. The cards concisely introduce career metrics and relevant information.
Notice how, throughout the cards, we’ve again utilized the RIASEC icons and colors so visitors can identify careers based on their strengths.
Step 4: Thriving industries
Users who choose MNM step 4 can easily browse thriving and hiring industries. A colorful series of cards help visitors quickly find jobs arranged according to their interests.
Here again, we reuse the same visual treatments from the RIASEC to guide the user’s eyes. This design lightens the cognitive load and improves the user’s experience.
To complement the scannability, we created more colorful cards with salaries, interests, and openings for those looking to learn about San Diego’s Thriving Industries.
Step 5: Programs and training
Finally, users that want training programs to support their career transitions can access step 5. This step provides skill-building initiatives for visitors who wish to hone their career acumen.
To boot, many of the trainings align with the specific audience pages. Visitors still determining their program of interest can then utilize the Program Matchfinder to find specific trainings that align with their goals and desires.
Many programs provide the skills needed for steps 3 and 4’s Thriving Careers and Industries. That way, visitors once again follow MNM’s thematic connectivity.
We created these pages with curated resources to address each population’s specific pain points. Through these efforts, we devised a network of crosslinks throughout the MNM site.
On the MNM homepage, we designed icons for visitors to easily identify their demographic and quickly move to the relevant page.
Users exploring these pages will find SDWP’s familiar, related content. For example, we designed call-out boxes on the audience-specific pages to connect visitors to the ikigai framework and redirect them to MNM step 1.
“The new site will make life easier for our educators and customers, especially those with barriers, who need to connect to the services they want.Sarah Burns, SDWP Director of Learning
We brought MNM from a flat grid of unrelated resources with no guidance for the user and no clear first step to this cohesive, navigable, contemporary site that meets and guides job seekers wherever they are.
Let's chat about your digital needs. We love to be the good guys. We know you've probably been burned before, and our first job will be to rebuild your faith. That starts with a cuppa joe, on us.
Let's chat ☕
