The Job Seeker's
Network

The Job Seeker's Network (JSN) is an equipping networking group that provides services, events, and other resources to anyone looking for a job. While the services are high quality, the online information at the time of this writing is confusing to first time users. This case study will demonstrate the UX design process through a partial redesign of the site, showing how a five-step UX approach fosters an intuitive, highly usable, user-centered experience.

PROCESS

Good UX is invisible. When a user experiences a well designed product, they accomplish their goals with so little friction that the interface itself should fade from their attention as they experience productivity and delight. The following design-thinking steps formalize audience study and magnify the user's needs as a central focus in the design process.
‍

Discover

User Interview
Design Discovery
Competitive Analysis
Landscape Analysis

Define

Persona
Job Stories
Customer Journey

Ideate

Low-Fidelity Sketches
Content Map
Mid-Fidelity Wireframes
Style Definition: UI Kit

Prototype

High Fidelity Mock Up
Clickable Mock Up

Test/Refine

User Testing
Iteration
Final Comps

1. DISCOVER

The Discovery phase lays the foundation for the whole project. The goal is explore 1) the business objectives and business problem, 2) the end user's identity and goals, and 3) begin to learn how the problem might be solved.

Product Strategy

The Market

According to the Bureau of Labor Statistics, the average number of jobs in a person's lifetime is 12, according to their 2019 survey of baby boomers. It's not uncommon for an individual to stay at a job for about five years. The BLS reported in its Employee Tenure Summary that in January 2020, "The median number of years that wage and salary workers had been with their current employer was 4.1 years."

Target Customer:

According to the website, JSN says "Everyone is welcome to join us. This group is useful for the unemployed, the underemployed, the misemployed, and the unhappily employed."

As I sought to define the target customer, I noted that all demographics are included in the above statement. However, a shared need is common among all four separately-specified groups of job-hunters. Because of this, I decided to use a needs-based customer definition because of the shared desire for a new job.

Our target customer is anyone with a desire to actively search for a new job.

Under-served Need

In May 2020, the New York Times summarized the Labor Department's monthly report, explaining how the American economy lost 20.5 million jobs the month before, and employment increased to 14.7%, which is the worst it's been since the Great Depression.

In 2020, support for job seekers is of special importance, given the exceptionally high number of layoffs. Individuals from all walks of life and backgrounds are finding themselves seeking work.

Value Proposition

JSN aims to provide training, support, and networking opportunities with the goal of helping job seekers "find a better job faster." They meet the under-served user need in the following ways, according to their "We Offer" section:

• Free training on Résumés, Interviewing, Branding, Elevator Pitch, Marketing Plan, LinkedIn/Indeed, Networking,
  Negotiating Compensation and more taught by subject-matter coaches
• Access to recruiters and hiring organizations
• Keynote addresses by some of Austin’s best motivational and job search strategy speakers
• Emotional and spiritual support to help you through the ups and downs of the job search
• Career direction and life purpose workshops (fee based)
• Annual large job fair and several mini job fairs

Problem Statement

JSN seeks to communicate it's value proposition to it's target market, but the existing online resource is unclear. First time users find the website's messaging and navigation confusing, which leaves first-time visitors wondering what JSN is, what it does, and who it's for.

To the right is a screen shot of the landing page for the JSN site.

Current JSN Landing Page

Business Objectives and Success:

Project Objective: Update the website experience of first-time visitors. People unfamiliar with JSN should be able to quickly learn from the Home and About pages what JSN is, what it does, and who it's for.

Solution: Redesign the website's Home page and About page to quickly communicate the organization's "who," "what," and "how." Funnel first timers toward filling out the registration form. As a bonus, the site should also consider the experience of frequent visitors by making the calendar and in-depth resources easy to find.

Success: This project will be successful if people unfamiliar with JSN can quickly understand "who," "what," and "how" from the Home page and About page so clearly that they want to sign up with the registration form.

Trade-offs: This project was primarily concerned with improving the experience of first-time visitors to the site. As such, the interface redesign is limited to the Home page and About page, though other elements of the site are also considered.

Audience Interviews

To gain an in-depth understanding of the target audience, I conducted audience interviews with a current user of JSN services. The questions I asked related to how this audience member researches new services, uses technology, relates to JSN, as well as the individual's personal life. All these questions will help create a holistic view of who the set of users are. This information will serve as my north star as I work to create a user-centered experience.

Design Discovery

As I considered the goals for this website, I began collecting style ideas in an inspiration board. Considering style early in the process helps nurture possibility and efficiency.

Competitive Analysis

To better understand how JSN fits into the industry landscape, I conducted a competitive analysis to analyze similar organizations according to a set of most important criteria: strengths, weaknesses, content, design, user experience, and opportunities. I found two local organizations with similar missions and methodology, and identified opportunities for JSN to differentiate itself through more professional design.

2. DEFINE

Now that business, audience, competition, and style directions have been explored, this phase centers on crystallizing the insights that were gathered in the discovery phase. I used a persona and customer journey map.

Persona

Using the insights gained through audience interviews, I created a persona to describe the target customer. The persona is a hypothetical archetype that will help keep the project centered by nailing down a precise definition of our user and what he wants to accomplish. Here, Greg's goals are split into discovery goals, or what he wants to learn, and tactical goals, or what he wants to accomplish.

Greg has worked for several decades, but had found himself recently unemployed after a 15-year stint at his last firm. It's been a while since he's searched for a job, so he wants help getting back up to speed on job search techniques and best practices.

Greg wonders if JSN catered toward someone in his position. He's heard of events and resources specifically for job seekers, so he wants to find out if JSN offers kind of help in a format that works for him. Put simply, Greg might say something like this as he researches: "I want to know what events and resources are available to help me in my search for a job."

‍

Now that we know Greg's goals, we need to define how the site features will meet them, and why that matters to our user. The following stories were written from Greg's perspective in the format: "when I ____, I want to ____, so that I can ____."

● When I arrive on the site, I want to read a concise synopsis of what services the organization offers to find out whether they match with my needs in terms of what they offer and in what format.
● When I arrive on the site, I want to know if the organization is for people like me so I don’t waste time or show up and look foolish.
● When I arrive on the site, I want to know if there are any free services so I can know if I can afford training while unemployed.
‍

Customer Journey Map

To expand upon the analysis I began with job stories above, I created a customer journey map in Figma. This deliverable is meant to visually represent the key steps in a user's experience with the website, while also identifying their goals and emotions. Tracking emotions in this way is important because it helps us identify pain points in addition to customer enjoyment and satisfaction.

To consider the user's experience holistically, I created a customer journey map. This map shows initial contact through process of engagement, and into long term relationship with the organization. As you can see in the map below, I identified key interactions, as well as users feelings and motivations at each touch point.

3. IDEATE

Experienced product development professionals know that experimenting early is inexpensive, and experimenting later can be very expensive. With that in mind, the Ideate phase focuses on divergent thinking as I explore ways to meet user and organization goals with visual design.

Low-Fidelity Sketches

Sketching allows for quick divergent thinking. Quantity over quality is the goal, as I worked to explore many different options to meeting the user and organzation goals.

From this exercise I noted that using a large hero image with minimal text and call-to-action buttons is very effective way to 1) stand out from the competition by leveraging modern professional design, 2) foster the users goals by eliminating distracting information, and 3) amplify business goals by drawing attention to calls-to-action.

Content Map

Rendering the intent behind the designs means being very thoughtful about content. Any strategic element that is an important part of what the page is meant to communicate should be identified here. I broke these elements into "Asset" and "Content" requirements to make sure my structural choices in the next step weren't leaving out any vital ingredients.

Mid-Fidelity Wireframes

In order to establish a structural "blueprint" for each page, I created wireframes. My primary focus was on hierarchy, using the organization goals defined in the customer journey map as well as business success objectives to guide these decisions.

Establishing content hierarchy required looking back at my research to identify the customer and organization goals for each page. The user stories and content strategy described above also informed the visual choices of the wireframes.

Style Definition: UI Kit

When establishing a visual style, I took cues from existing visual elements. The logo, most importantly, made use of a blue, a yellow, and a gray. Since there is not a compelling reason to change the brand at this time, I matched these colors to maintain a consistent brand. I used blue as the primary color, yellow as the secondary color, and gray as a neutral.

The colors for the website needed to be 1) contrasting colors, that represented 2) professionalism and 3) trustworthiness. The logo colors accomplished these three goals well.

The font Roboto is a sans serif, modern front that is easy to find and free to use because it's a google font. I chose this font because of it's versatility as well as ease of access. Since JSN is a small nonprofit, using a font that is free and widely accessible will make it easier to create brand consistency across materials and platforms.

As I built out the UI kit, I included two more greys for use throughout the site, in addition to establishing relative font header sizes and official color definition.

Grid System

A Macbook Pro screen resolution is 1440 pixels wide. Since our persona, Greg, uses this device, I established a grid system for each page based on this, with 12 columns.

4. PROTOTYPE

The goal of this phase is to add enough fidelity to the designs so that they can be tested as a minimum viable product. While it's true that tests could be run with wireframes, and in some cases that's the best option, these prototypes should have enough detail to allow the user to respond as they would in the real world.

High-Fidelity Mock Up

Combining the structure outlined in the wireframe designs with the UI Kit visual elements, I created the first high fidelity mock ups of the site.

Here, you can see an initial design for the top half of the home page using the UI Kits colors.There's also no filler text present. Imagery is now included.

‍

Clickable Mock Up

To bring the wireframes to life in a way that allowed us to simulate navigating the site, I created a clickable mock up in Figma to test the connection between the Home page and the About page. I ran a brief user test with a family member to gain perspective on how intuitive the experience was. The tester had no issue finding the information she was looking for, and said the experience was "easy."

Interestingly, the tester did not scroll down the homepage before going to the about section. It would seem that the buttons on the hero image were sufficiently clear. This was confirming, because a major business objective was streamlining new users toward the about section, and my above-the-fold design was meant to accomplish that outcome.

5. TEST/REFINE

It is vital to test designs. Knowing that the designs are not for the designer but instead for the end user, I consulted potential users to help uncover opportunities to make the product more intuitive and usable.

User Testing

I presented the clickable mock up to two testers that were either past or potential users of JSN. Since all were first time users of my design, I asked them to navigate through the pages with the goals specified in the Greg persona. I monitored their mouse movements and facial expressions as they navigated the site. I also asked that they "think our loud" as they navigate the site, taking notes as they went.

Tester 1

As a user of the old site, this tester commented that the new design was, "A lot easier to navigate." The tester noted that the calendar and resources section are probably the most accessed, and were appropriately prioritized in the design.

The tester offered the feedback that a “contact” button should be more prominent.

Tester 2

About -> Team -> Resources "You have it listed in the order I would do it".
The tester offered the feedback that he would like a more complete sitemap at the bottom of page.

Refine

Though the test feedback was primarily positive, I identified two main pieces of criticism: 1) missing "Contact" button on home page, and 2) lack of site map at bottom of page.

The second item was not adapted into this project because the added benefit is minimal compared to the added visual clutter, which works again the style decision to create a steamlined, clean layout.

However, the first item was added into the design. This was done by putting a "contact" link in the navigation bar. This change added little visual clutter while making the button very prominent.

Final Comps

Below is the final deliverable for the Home page and About page. You can see that all style and content elements are in full effect.

CONCLUSION

Early in this project I defined that the project would be successful if people unfamiliar with JSN could quickly understand "who," "what," and "how" from the Home page and About page so clearly that they want to sign up with the registration form. My tests indicate that the new site design is clear enough to answer those three questions of new visitors. While sign-up numbers are difficult to test in a simulated environment, the organization could use website metric tools on a live site to learn how the design changes were effecting user behavior in the real world. The next step in making that a reality would be designing the rest of the site using the insights here, and comparing its performance to the original site.
‍

See More of my Work:
Always Event Co.
The Customer Experience App
LinkedinBehance