ROLE

UX Designer, Lead UI Designer, Researcher, Logo Designer

TIME

February 2023 - October 2023

PLATFORM

Responsive (Desktop, Tablet, Mobile)

TOOLS

Figma, Procreate, Maze, Figjam
A government job recruitment web app to simplify the hiring process for both candidates and government agencies.

PROJECT OVERVIEW

Background

OpenKnect, a startup that kicked off in 2022, is on a mission to make government staffing easier for local and state offices by connecting them with skilled and qualified personnels. They hit a few bumps initially with their application system and website usability, and their first big project is all about fine-tuning their website. This website aims to create an effortless and friendly journey for applicants, making the job application process straightforward.

Problem

OpenKnect faced a number of challenges, including an inefficient application management system that caused delays in shortlisting candidates, and a poor website user experience that hindered candidate applications. The competitive government staffing industry requires system improvements to compete. Meeting candidate and customer expectations for an intuitive, efficient and secure recruiting platform is highly important.

Timeline

Our team took a two-step approach to overcome OpenKnect's challenges. Firstly, we revamped the website entirely to make it more functional and user-friendly. Secondly, we developed an internal system to streamline application management and workflows. By working closely together with developers and the stakeholders, we efficiently carried out the plan, ensuring we met our deadline.

DESIGN PROCESS

Design Thinking Process

Let me walk you through my design process that helped me come up with the solutions

RESEARCH

Market Research

Market research is essential to gain a better understanding of the market at the early stages of the project. It helps me identify what I already know, and what areas I still need to explore. It provides me with a deeper understanding of the target audience and keeps me up-to-date on the latest trends. These insights are crucial in shaping initial personas and formulating the right questions for primary research.

💼 Over 50% of job seekers prefer to find jobs online, while 45% rely on friend recommendations (Glassdoor, HR and Recruiting Stats for 2019)

📉 LinkedIn's popularity among recruiters has dropped from 92% in 2017 to 77% in 2018 (Jobvite)

🙋🏻 67% of recruiters say their biggest challenge in hiring is the lack of skilled and high-quality candidates.(Devskiller)

📑 A staggering 98% of Fortune 500 companies use Applicant Tracking Systems and other hiring algorithms. The most popular systems are Taleo (30%) and Workday (16%). (Jobscan)

Competitive Analysis

I came across two types of similar companies when it comes to applying for jobs:

‍requires you to sign up before you can view job listings, which can be frustrating as it forces you to create an account before you can even see the job opportunities available.

This type of company allows you to browse through job listings before signing up, giving you greater flexibility and control over your search.

Key Insights

The stats highlight the importance of optimizing online presence, use referrals, streamline hiring processes, address skill gaps, optimize ATS usage, and provide a quick and efficient application experience to attract high-quality candidates for recruiters and employers.

🔍 Job seekers might find it difficult to narrow down their search results because these companies offer limited advanced filtering choices.

📑 There are not enough adequate tools to track job applications, as basic email or text notifications fail to engage users and lead to missed opportunities for retention.

Heuristic Evaluation

The current company website, created by the founder who's also an IT engineer, lacks good organization, visual appeal, and ease of use. It is safe to say that the website doesn't follow Jakob's 10 usability rules. There are four main points that I found where the website could do better:

SHORTCOMING #1

Aesthetic and Minimalist design

  • Insufficient white space makes pages feel cluttered visually. More strategic spacing and alignment is needed.

  • No use of icons fails to take advantage of visual shorthand for improved scannability.

  • No hero section to inform users about company's mission statement and boost engagement

  • Company branding and visual identity is not very distinct. A cohesive and unique style could enhance memorability.

SHORTCOMING #2

User Control and Freedom

  • Search functionality is missing to allow users to lookup information as needed.

  • No personal account creation allows saving preferences or resuming processes.

  • No shortcuts to jump between page sections or highlighted content anchors.

SHORTCOMING #3

Information Structure

  • No distinct content hierarchies or taxonomies used to organize information.

  • Unclear which pages are intended for job seekers vs employers.

  • Imagery, icons, tables, or charts are rarely used to summarize or enhance information.

SHORTCOMING #4

Visibility of System Status

  • There is not a clear indication which page the user is on

  • No indication of click state on navigation bar and elements

User Interviews

Our target audience include: IT/Business Professionals, Junior/Senior Students, and  those looking for jobs with no age limits.

Participants

To really get what these users go through when hunting for jobs, our team conducted 1:1 interviews with 13 people. We wanted to know how they use search platforms to apply, how those platforms work for them, and what makes them stay involved in tracking their applications.

Interview objectives

Affinity Mapping

Once the interviews were done, we took notes all the answers in Figjam and grouped them by common themes. Looking at these responses, we discovered the participants' main motivations and frustrations during the application process on a platform. To make sense of it all, I have grouped similar interview answers together, which allowed me to identify trends and patterns. These insights have helped us have a better understanding of what the users really need.

1. Platform credibility

Users seek a trustworthy platform with a user-friendly interface, clear information, secure data handling, and a seamless application experience.

2. Frustrating Process

Users need an extensive solution that tackles the various challenges they face when looking for jobs and applying.

3. Managing and documenting applications

Users need a comprehensive solution that addresses the diverse issues they encounter during their job search and application process.

4. Nice-to-have features

Users are looking for job search platforms to include these preferred features. This is to make their experience better, boost efficiency, and match up with what they expect.

5. Communication

Users need ongoing updates about their job applications and the advancement of the hiring process. This helps them stay in the loop and manage their applications effectively.

USER PERSONA

Having gathered a lot of information about the audience and what they want, I created a user persona. This lets me concentrate on solving the big issues – meeting the important needs of the most significant user groups.

Let's meet Raymond!

This is Raymond. He's a former professional chef, and is actively searching for a job as a digital designer after graduating his design bootcamp.

PROBLEM STATEMENT & HOW MIGHT WE QUESTIONS

Framing the problems

With the user persona, and insights from the research stage, I turned my knowledge into Point Of View (POV) Statements to frame the problem from the user’s perspective. After defining the design challenge in POV, I generated a series of How Might We questions to directly address Raymond's needs, enabling us to generate focused ideas.

1. Reliability

Job seekers struggle to find trustworthy websites, causing concerns about scams.

How might we build a trustworthy job search platform with verified listings, safeguarding users from scams and fraudulent activities?

2. Search for Jobs

Irrelevant, outdated, or unqualified job postings frustrate job seekers.

How might we develop a search engine platform that maximizes the job search process, helping users find relevant, up-to-date, and qualified job postings that match their preferences?

3. Apply for Jobs

Job seekers find the application process tiring, especially when navigating external pages and monitoring application progress becomes challenging.

How might we simplify the job application process, allowing users to submit applications using their resume and profile, while also providing a built-in tracking feature within the same platform?

4. Application Tracking

Users lack an integrated tracking system on job search platforms, leading to inconvenience and manual input of application information using external tools.

How might we improve the job search platform by integrating an efficient application tracking system, eliminating the need for external tools and allowing users to conveniently manage and track their job applications within the platform?

Solution Statement

PRODUCT GOALS

Keeping things aligned

After considering both business goals and user aspirations, we pinpointed shared aspects that would serve as a compass in determining essential features.

SITEMAP

Structuring the content

After reflecting on the business requirements and user goals, we have identified two types of users: non-logged-in users and logged-in users. As a result, we will create two site maps. One will be for general users, while the other will be designed specifically for users who have logged in.

The reason is to allow users the freedom to explore the website before providing their personal information, thus enhancing their trust in the platform. The logged-in users will be developed as a web app with a sidebar and navigation drawer or rail, which will vary based on the device being used.

Non-logged-in users

Logged-in users

USER FLOW

Adding decision points

After carefully exploring the findings from my research, I've designed a user flow that serves as a helpful roadmap for a variety of tasks, while also playing a significant role in improving the overall design process. This thoughtfully crafted pathway ensures that every step of the user journey is well-informed and user-centric, resulting in an enhanced and enjoyable experience.

SKETCHES

No bad ideas mindset

Before going digital, our team sketched out some key screens necessary for fulfilling the tasks in the user flow. Sketching first allowed me to brainstorm different ideas on how to effectively design the screens. Each screen has been designed in a way that allows the user to focus on one main task. However, in order to maintain focus on the flow, we temporarily removed the navigation drawer on the left for the logged-in user.

WIREFRAMES

Gearing up for the real deal

We transformed the sketches into digital wireframes, adding interactions to form an interactive prototype. This prototype will serve as the testing ground to gather insights on functionality, navigation, and support design refinements. Here's a glimpse at a few screens:

USABILITY TESTING

How will users behave?

In order to assess the overall quality and ease of navigation of the design, as well as identify areas of errors or difficulties during the early stages, we conducted testing with our wireframes using Maze link. We believe that colors sometimes could be distracting, and decided to test early.

Tasks

  • Apply for a highlighted job

  • Sign in or sign up

  • Complete the application

  • Search for a specific job

  • Manage profile: check saved jobs

  • Check applications

  • Figure out how to upload resume

Methodologies

Unmoderated & moderated remote testing through Maze

Participants

9 participants - unmoderated testing, 4 participants - moderated testing
No age limit
Have applied to jobs before or actively looking for jobs at the moment

Findings

68

35.6s

28%

8

4

Average usability score across the 13 participants

Is the average time that users spent on the homepage

Misclick rate

Out of 13 participants  succeeded with the tasks

Out of 13 participants deviated from the expected path

BRAND IDENTITY 

Introducing OpenKnect

Since OpenKnect has not established their brand identity, I stepped out of my comfort zone to develop and design the company logo before moving on to UI Design. Having a logo is crucial at this stage since the logo will be used multiple times across the design.
After discussing closely with the founder of the company about the company's image and values, I developed the logo based on these three keywords: connection, positive, and success

My inspirations came from circuits and talent elements. The circuit also emphasizes the importance of connection and the flow of energy and information. The circuits are leaving an empty space for another one to connect, emphasizing "open" and "knect"(connect).

UI DESIGN

UI Kit

As the brand designer, I also managed the choice of color, typography, and illustrations, and created the company style guide, resulting in a consistent visual and recognizable brand image.  

Colors

Iconography

Typography

Buttons

4pt Grid System

Grid

Components

Accessibility

By adhering to the contrast ratios specified by the WCAG, our design ensures that all elements maintain a color contrast ratio of at least 3:1 against the background.

We also prioritize organizing the content hierarchy on each screen to ensure a logical reading order. This optimization caters to assistive technologies, such as screen readers, and facilitates the accurate interpretation of information. The reading order is left to right, top to bottom. In the highlighted job section, we have organized the cards as follows: Urgent (top left), New (top right), and Days Posted (bottom). We have also assigned different colors to indicate different job statuses: Urgent is represented by red, New by green, and Days Posted by a neutral color.

HIGH-FIDELITY DESIGN

Let's kick it up to high-fidelity

Using the UI Kit, we applied the visual elements to the modified wireframes and kicking it up to high-fidelity, which will be later used for the prototype.

The final prototype

RESPONSIVE DESIGN

Design responsively

According to Google Material 3 (M3), devices are categorized into three window size classes: compact, medium, and expanded. These classes are determined by specific breakpoints, with values of 600 dp and 840 dp. We have adhered to the Google Material 3 (M3) guidelines in order to create a responsive design that can be easily implemented using Flutter.

OUTCOME

What I learned

The open communication and diverse expertise of my UX design colleagues enabled me to enabled rapid, informed iteration on solutions, making the ideation, prototyping, and testing process significantly smoother, faster, and more efficient.

Conducting usability tests on the wireframes during the early stages provided me with invaluable user feedback to iteratively refine and enhance the job search and application experience, allowing me to shape a far more intuitive, streamlined and credible platform.

NEXT STEPS

What's next?

Continuing to iterate and test designs is very important. Since I did not get to conduct usability testing for our final prototype, having that done will help getting the web app live faster. It is a crucial step before design implementation and handing it off to the Development team.