WorkForce

UI/UX Marketing Website

Context

Our team was approached by the president of the South Kansas City Chamber of Commerce to see if we could assist with a new website for their non-profit organization, WorkForce. The organization was in need of a website to serve people who were looking to use their services for job hunting, job position filling, or educational purposes. This site needed to be something that was simple to navigate, and welcoming to users who would be visiting.

The Problem

WorkForce did not have a website at the time of the project request. Our team was tasked to help create the foundation of their online presence, as well as come up with innovative solutions to feature requests.

My Role

Lead UI/UX
Research
Website build

Discovery Questions & Research

Discovery Questions

When starting a new project, I find that discovery questions with the stakeholder(s) are extremely informative. These questions shed light on what is important in the project, what the scope is, and allow everyone to be on the same page from square one.

A few examples of questions that were asked in the discovery phase of this project and their corresponding answers for this project:

What goals will indicate success in investing in a new website?

Let employers know the services we offer, and let job seekers know what services are available to them. Possibly allow employers to post jobs.

What’s the primary purpose of the new website?

Resources/training material. To educate about who we are and what we do.

What’s the secondary purpose of the new website?

Users take action, whether by job searches or finding classes/resources, to connect employers with employees.

Who is your primary audience?

Job seekers as well as employers looking to find employees.

What goals will indicate success in investing in a new website?

Feedback on ease of use. Possibly metrics about how many hirings were created.

Once I had a firm understanding of what the stakeholders were wanting from the new site, it was time to start the research phase to solidify a successful design direction.

Research

During the research phase, I learned that there are more than 2,500+ job resource organizations across the country. Once I narrowed it down by location, there are over 7 non-profit organizations in the same city as WorkForce that also provide this service.

I was excited to see that there were so many organizations out there to assist people with getting jobs in the community. For the human element of this project, it was encouraging to see that other organizations value helping others.

Once I started digging into these sites I found some common pitfalls of these websites:

Not enough CTAs to lead the user down the flow of the site
Too much clutter. These sites didn’t feel inviting due to the sizeable amount of copy they throw at the visitor right away
Complex/ broken navigation that seems to lead to the same resources

After doing my audit of other organizations around, I felt I had a great plan for what my designs could do to improve the UX for future visitors.

Creating these user personas allowed me to narrow down the needs of different types of people who are looking to use WorkForce's service. But, are in different places in life and needs.

Site Map & Content Outline

Site Map

Once the research phase was complete, creating a site map and a basic content outline broadened the visibility I had for the project. Getting everything on paper, in a holistic way gave me better clarity on the UX of this website. Without having to consider interface design ideas at this point, I was able to create a flow that was simple, yet clear enough to provide direction through the site. Each of these steps allowed me to consider the importance of every section and its importance to the site overall.

Content Outline

Home Page

Hero:

Heading that explains the mission and what the organization offers potential job seekers/employers

Section 1:

Heading explains more of what they offer and the heart behind their mission
Supporting copy that talks to the value of having a job

Section 2:

Heading and supporting copy that talks to people looking for jobs, and people posting job positions.
CTAs that link out to respective pages

Section 3:

Heading and supporting copy that briefly describes the classes that are available
CTA that links to the events page, contact information for questions.

Section 4:

Stats section that shows how long Workforce has been helping people, the number of jobs helped filled, companies partnered with etc..

Section 5:

Logo farm of companies that partner with to hire employees

Section 6:

Map section to show their location (or address). Something to highlight the physical building location.

Footer

Logo, internal external links, contact information

Classes Page/Resources

Hero:

Heading and supporting copy that gives context to why it is important to seek out these events, and ways they can help those who want to learn more skills.

Section 2:

A calendar/ or list view shows upcoming classes, events, and trainings that are coming up. Users can click on these to register.

Section 3:

Dynamic List of Resources for visitors to view

Section 4:

CTA to Contact Page

Job Listings

Hero:

Heading and supporting copy talking about philosophy and purpose behind connecting people to jobs

Section 1:

Dynamic list of jobs that are listed. Or CTA that links to an external job board.

Section 2:

Section that explains the job connection process (i.e phone screen, documents, drug test) so that people can know what to expect.

Section 3::

CTA to Contact Page

Job Posting

Hero:

Heading and supporting copy talking about philosophy and purpose behind helping people get jobs

Section 1:

Gravity form to input job opening info

Section 2:

This section gives employers insight into what the process is going to look like once they have requested to post a job on WF

Section 3::

CTA to Contact Page

Contact Us

Section 1:

Gravity forms contact form

Wireframe

Next came the process of creating the wireframe. Using the site map and content outline as a guide, I put together this simple design. The goal of this was to give structure and highlight the UX of the website. A few iterations allowed me to nail down how I wanted this site to function. I did not put much effort into a design UI direction during this stage. This allowed the site to come together very quickly, with minimal reconsiderations.

Style Guide

I had the pleasure of working with some of my in-house designers to create the UI and branding for this website. The team decided on some inviting blues, and purple to represent the nature of the company.

Font choices were Calluna for the headings and Poppins for the body copy. Calluna gives off a professional vibe, and I believe gives a modern, yet business-like feel to the site. Poppins is a favorite of mine. It has a very inviting and smooth line for the body copy which is how I wanted the font to feel.

The buttons are rounded for a more friendly feel. I wanted to take the edge off boxy, grid-based job sites. Using a rounded button accomplished that for me.

Iterations

For this phase of the design process, I gave the stakeholder three options of designs to choose from. Each uses a welcoming and inviting feel to them. I wanted to focus on the humanness of job searching. It can be intimidating and even hard on self-image to be out of work. My designs were focused on making this an experience that gives hope and not disdains.

This process is throwing paint on the wall and seeing what sticks. No real agenda except what I had outlined in the wireframing phase to form my decisions. This was a really fun part of the project because I was able to get my hands dirty and let creative juices flow.

Below are the two options that were not chosen. These two iterations helped me create the final design by allowing me to process through different design elements.

Final Designs

This was the design that ended up being chosen by the president of the organization that I was working with. She expressed her liking of the photos of everyday working people and the white space that allowed for a more simplistic feel of the site. After that meeting, it was time to design the rest of the site and build it.

The WorkForce website was a joy for me to work on from beginning to end. Being able to contribute to helping others makes projects like these worth it for me. Seeing it from the early stages of discovery, all the way to building & launching the live site allows me to appreciate the work that was done even more. The research & thought process foundations I laid down in the beginning really allowed the site to accomplish the goals set at the beginning.