A Hack for LA Project

Jobs for Hope

IA & Responsive Web Design

The Brief

Web design and information architecture to improve usability and job search experience of skilled community members seeking "a paycheck with purpose".

In 2017, LA County voters passed Measure H, creating a new sales tax to support homelessness prevention and support services. Measure H funding has created over 2,100 jobs at government and nonprofit agencies working to end homelessness. To help fill the new vacancies across the region, the LA County Homeless Initiative launched a job search page but without additional support and resources, it is neither user-friendly nor intuitive. The Hack for LA team was brought in to design an open-source solution that can be shared beyond the Los Angeles County municipality as other regions also work to bridge the gap between the American public and the search for meaningful work.

Los Angeles Homeless Initiative logo

THE CHALLENGE

Reduce the information density of the LA County Homeless Initiative's 'Jobs' page and streamline job searches across 60+ government/non-profit organizations.

THE SOLUTION

Consolidate all organizations' job postings to a single web portal by extracting salient data from the 60+ organizations' websites.


THE PROCESS

In this project, I was able to complete the UX process through Step 5, handing off wireframes to our team of developers and providing clarification and support as needed. As issues arose during development, we iterated on certain features to ensure the delivery of our MVS (minimum viable solution).


Step 1: RESEARCH

Step 2: DESIGN

Step 3: PROTOTYPE

Step 4: TEST

Step 5: ITERATE

My Roles

C&C analysis, heuristic analysis, high-fidelity InvisionApp prototype, pitch deck

Conditions

2 months (2-week design sprint)

Tools

Sketch, Invision, Illustrator, Google Slides, whiteboard, markers, Post-It notes

Research  

Current Web Portal Evaluation

Heuristic Evaluation

C&C Analysis

User Testing

Synthesization

Journey Map



CURRENT WEB PORTAL EVALUATION

To guide our research and orient our team, we evaluated the current web portal through the Homeless Initiative's website.



  1. Hiring organizations are separated by region, which serves the organizations' reporting obligations but are a barrier to users.

  2. Rather than showing the jobs themselves, users are forced to visit each organization's career page in the hopes that they might find relevant work.
Homeless Initiative Landing Page




HEURISTIC EVALUATION

Using Jacob Nielsen’s 5 Definitions of Usability, I evaluated the Los Angeles County Homeless Initiative’s current website and compiled a list of usability violations. The chart below captures the highest-priority issues I encountered, the heuristic that was violated, and a metric of its severity to the user.


Heuristic Evaluation of LA County Homeless Initiative




COMPETITIVE & COMPARATIVE ANALYSIS

To better understand the current market for online job boards, I conduct a competitive and comparative analysis of government job boards as well as job boards geared towards specific causes.

Jobs for Hope Competitive and Comparative Analysis




USER TESTING

To supplement our research, I also conducted some guerilla user tests of the current LA County Homeless Initiative site. I focused my task-based sessions on assessing the content and usability of the site and how they impacted the productivity of finding relevant work. I also prepared a research protocol to help guide the team and onboard new contributors.


Key Insights

  • 'Service Planning Area' is a confusing term for users; they don't know what it means out of context.

  • Users have trouble finding specific citie(s) and/or details for their job search.

  • Users are unable to quickly find work because they must go through each organization's career page to find a specific role.
JOURNEY MAP

Through insights gathered from our team's research and user testing, I create a journey map to help visualize areas where our users are experiencing frustration or confusion. This will help us to not only empathize with our user but to also guide our problem-solving efforts.

Jobs for Hope Journey Map

Design  

Feature Prioritization

Wireframes



FEATURE PRIORITIZATION

To determine the scope of the project and where to concentrate our efforts for the MVS, we utilized the MoSCoW method to reach a common understanding of what features will best resolve our users' pain points.

feature prioritization




WIREFRAMES

Bringing the design down to its core purpose of connecting skilled individuals to meaningful work, we made sure to incorporate affordances from existing job portals into every part of our design.


wireframes

Prototype  

Hi-Fidelity

Clickable Prototype



HI-FIDELITY

We added imagery and color to our wireframes and conducted another round of guerilla user testing to correct affordance issues and readability.

hi-fi wireframes




CLICKABLE PROTOTYPE

In anticipation of our first meeting with the Los Angeles County Homeless Initiative, we took our wireframes and prototyped them on Invision.

Iterate  

Following our client meeting, our clickable prototype was handed-off to the development team to be implemented. Over the course of development, changes to our design had to be made to accommodate technical and fundamental restrictions. It was also during this time that we decided that developing a responsive web portal made the most sense at little impact to our work flow.

You can view our work through the mobile viewport below or in-browser here.