Government Job Recruitment Web App
OpenKnect, a government staffing startup established in 2022, aims to streamline the staffing process for local and state government agencies by providing qualified personnel, but faced initial challenges with their application management system and website usability.
Goal
The main goal of the first project is to develop a professional website for the company. This website will provide applicants with a seamless and user-friendly experience, simplifying the process of applying for jobs directly. The website will also have a responsive design, ensuring it looks great on different devices. In addition to the website, the project will include creating a design system that can be used consistently across the entire company.
Duration
3 months
Tools
Figma, Figjam, Canva
Role
Project manager
Lead UX & UI Designer
Business Requirements
-
Enhance Brand Visibility
-
Attract Top Talent
-
Simplify Job Application Process
-
Showcase Company Expertise
-
Generate Client Leads
-
Provide Relevant and Engaging Content
-
Foster Client Relationships
-
Track Website Analytics
Project Timeline
As the project manager, I identified the need for a two-fold approach to address OpenKnect's challenges. Firstly, I proposed rebuilding the website from scratch to improve functionality and user experience. Secondly, I advocated for the development of an internal system to streamline application management and workflows. Working closely with the UX/UI team and collaborating with developers, we executed the plan efficiently to meet the specified deadline.
Market Research
-
At the same time, more than half of job seekers say their preferred source for finding jobs is online. The second most popular method is hearing about it from a friend, preferred by 45% of candidates. (Glassdoor, HR and Recruiting Stats for 2019)
-
LinkedIn is becoming drastically less popular: only 77% of recruiters would use LinkedIn in 2018 as compared to 92% in 2017. (Jobvite)
-
For 58% of candidates hired since 2018, the process of the job search lasted less than 2 months. 43% say they received a job offer within 2 weeks of applying for a given position. (Clutch, Statistics on the Average Job Search in 2018)
-
67% of recruiters say their biggest challenge in hiring is the lack of skilled and high-quality candidates.(Devskiller)
-
Over 98% of Fortune 500 companies use Applicant Tracking Systems and other hiring algorithms. (Jobscan)
-
The two most popular ATS are Taleo (used by 30% of companies) and Workday (16%).
-
When it comes to candidate preference, 62% say they would appreciate a process that is complete in less than 2 weeks. (Clutch)
-
Being selective in your job applications in the most popular strategy amongst candidates today. More than half of recent hires applied to 5 or fewer jobs in their last job search. (Clutch)
Overall, these insights highlight the need for employers and recruiters to leverage online platforms effectively, utilize referrals, streamline hiring processes, address skill gaps, optimize ATS usage, and provide a timely and efficient application experience to attract high-quality candidates.
Competitive Analysis
After evaluating competitors, two types of staffing companies were identified: those requiring sign-up upfront and those allowing job seekers to explore jobs before applying. The former annoys users by demanding account creation to access job listings, while the latter provides more freedom to browse without sharing personal information. However, the second type of companies has two common weaknesses:
-
Inadequate Advanced Filters: These companies lack robust advanced filtering options, making it difficult for job seekers to refine their search results effectively. Without advanced filters, users struggle to find relevant opportunities based on specific criteria such as location, industry, experience level, and salary range
-
Insufficient Application Tracking: Competitors fail to provide comprehensive tracking features for job applicants. Limited email or text notifications are insufficient to drive user engagement, resulting in missed opportunities for user retention and interaction
First type companies
Second type companies
Heuristic Evaluation
The current company's website, which was developed solely by the founder who is an IT engineer, lacks proper organization, aesthetic appeal, and user-friendliness. It can be argued that the website violates Jakob's 10 usability heuristics. Here are three key areas where the website falls short.
Aesthetic and Minimalist design
-
Lack of white space
-
No use of icons
-
No hero section to inform users about company's mission statement and boost engagement
Error Prevention
-
There is no data input, thus users cannot make mistakes, and error messages and recovery are not applicable
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 Interview
Target Audience
-
IT/Business Professionals
-
Junior/Senior Students
-
Government Job Seekers
Age range: No limitations
1 : 1 Interviews
To gain a deeper understanding of users' experiences when searching for government jobs, our team conducted interviews with 13 participants. The goal was to understand how job seekers use search platforms for applying, their platform experience, and the factors that keep them engaged in the tracking process. The team focused on asking questions related to:
-
How participants use job search platforms to apply
-
Their experiences with these platforms
-
The important factors they consider when searching for a job
-
The factors that keep them engaged with the platforms after applying
Affinity Mapping
After completing the interview, we typed down all of the responses on Figjam and started clustering them based on topic. From the responses, we discovered the participants' main motivations and frustrations during the application process on a platform. Below, I have grouped the interview responses with similar topics, which allowed me to identify trends and patterns. These insights have helped us generate the users' needs.
Pattern 1: Trustworthiness
"I find websites with well-designed interfaces and user-friendly experiences to be more trustworthy."
Insight: Building a trustworthy and user-centric environment is vital for applicant attraction and retention.
Needs: Applicants seek a trustworthy platform with a user-friendly interface, clear information, secure data handling, and a seamless application experience
Pattern 2: Frustrations Process
"I prefer not to repeatedly upload my resume and answer the same questions for each job application I submit."
Insight: Frustration arises for users when they encounter multiple issues during their job search.
Needs: Users need a comprehensive solution that addresses the diverse issues they encounter during their job search and application process.
Pattern 3: Keeping Track
"Whenever I apply for a job, I set reminders in other apps."
Insight: Frustration arises for users when they encounter multiple issues during their job search.
Needs: Users need a comprehensive solution that addresses the diverse issues they encounter during their job search and application process.
Pattern 4: Desired Features
"I want to receive notification when that company have an open position."
Insight: Users have specific expectations when using job search platforms.
Needs: Users need job search platforms to incorporate these desired features in order to enhance their experience, increase efficiency, and meet their expectations.
Pattern 5: Responses
"I expect to receive a response or notification confirming the receipt of my application, as well as regular updates about the progress of the hiring process, so that I can stay informed and keep track of my application."
Insight: Users have specific expectations when using job search platforms.
Needs: Users need job search platforms to incorporate these desired features in order to enhance their experience, increase efficiency, and meet their expectations.
User Persona
We created a user persona, Tony, who represents the whole discovery phase. Referring back to his during the design process helps me stay aligned with user goals and remind me of the problems I need to solve for users.
POV Statements and HMW Questions
Now that we have understood Tony's needs, we have created POV (Point of View) statements that allow us to empathize with him and focus on his perspective. This framing helps us define our problem statements effectively. From these POVs, we have generated HMW (How Might We) questions that directly address Tony's needs, enabling us to generate focused ideas. Our team has identified four main problem statements that the platform needs to focus on.
POV statements
HMW questions
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?
Search 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?
Apply 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?
Tracking
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
Our solution addresses job seekers' frustrations and challenges by providing an effective search engine platform for discovering relevant job postings. With a streamlined application process, users can apply seamlessly using their resume and profile. An integrated tracking system allows efficient application management, and a responsive communication system ensures prompt addressing of concerns.
Project Goals
We reflected on the business goals and user goals, and then identified common areas that would serve as a guide in deciding necessary features.
Business Goals
User Goals
-
Enhance Brand Visibility
-
Attract Top Talent
-
Simplify Job Application Process
-
Showcase Company Expertise
-
Generate Client Leads
-
Provide Relevant and Engaging Content
-
Foster Client Relationships
-
Track Website Analytics
-
Maximize job search
-
Seamless application process
-
Efficient application management
-
Responsive communication
-
Develop a user-centric job search platform
-
Streamline the application process
-
Increase brand visibility and attract top talent
-
Foster client relationships
-
Continuously monitor website analytics
Information Architecture
Sitemap
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 Flows
We considered the behaviors and goals of our persona, Tony, and generated a scenario that he could encounter while using the website. This process ensures that all necessary screens are accounted for to help Tony achieve his goals.
Interaction Design
Wireframe | Sketches
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.
Mid-Fidelity Prototype
We translated the sketches into digital wireframes, adding interactions to create an interactive prototype. This prototype will be used for testing to gain insights into functionality, navigation, and facilitate design iteration. Here are some mid-fidelity screen examples:
The logo on the top left of the page enhances brand recognition, consistency, trust, and provides a convenient way return to homepage
The Hero Section grabs attention, conveys the company's main message, establishes brand identity, and encourages user action
Highlight jobs to grab visitors' attention to urgent or new openings
The purpose of this prompt is to provide users with an opportunity to continue their search and potentially discover relevant job opportunities
Footer provides others information, navigation options, and legal disclosures
Home page
.png)
.png)
Job List Page
By dividing into two panes, users can conveniently search for different jobs without being redirected to other pages or encountering pop-ups
Job List Page
The navigation drawer follows Google's Material Design guidelines (M3) for a web app
Usability Testing
In order to assess the overall quality and ease of navigation of the design, as well as identify areas of errors or difficulties, we conducted testing on the mid-fidelity prototype using Maze link. The test was divided into 7 tasks:
-
Apply for a highlighted job
-
Sign In/Sign Up
-
Complete the application
-
Search for a specific job
-
Manage your profile: check your saved jobs
-
Check your applications
-
Check if you uploaded your resume
Summary of findings from the test with 13 participants:
-
Average usability score: 66
-
Users spent the most time on the homepage (35.6 seconds)
-
Misclick rate: 28%
-
Confusion encountered during specific job search, resulting in 8 testers exiting the flow, 4 testers deviated from the expected path
-
Positive participant comments, highlighting "ease of use"
-
Suggestions to move search bar to the top and provide grid, list, or map view options for jobs
-
Recommendation to enhance application steps with green color for progress indication.
UI Design
Branding: Logo
The OpenKnect logo combines circuit and talent elements, symbolizing connection and diversity. The spinner wheel with five circles represents existing teams, while the missing circle symbolizes the search for new talents. The circuit metaphor emphasizes the importance of connection and the flow of energy and information. The sapphire color represents the brand attributes of wisdom, loyalty, insight, and connection.
UI Kit
We created a complete UI Kit in Figma based on Google Material 3 guidelines. It includes components, color styles, and text styles, all conveniently organized on one page. This centralized resource helps designers maintain visual consistency throughout the project.
Logo
Colors
Icons
Typography
.jpg)
Buttons
Nav
Cards
Google Material 3 Token
Additionally, we have developed a set of design tokens that serve as a guide for developers to implement and define their UI system. These tokens provide a standardized approach to styling and ensure a cohesive and harmonious user interface across different platforms and devices.
Accessibility
By adhering to the contrast ratios specified by the W3C (World Wide Web Consortium), 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.
Hi-fidelity prototype
Using the UI Kit, we applied the visual elements to the modified Mid Fidelity wireframes making up the High-Fidelity wireframes which will be later used for the Prototype.
.jpg)
.png)
.png)
Final Prototype
Responsive Design
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.
Desktop
.png)
Tablet (Portrait)
.png)
Phone
Takeaways
-
Prioritized important features for the MVP
-
Created effective content structure and simple navigation
-
Streamlined government job search and application process
-
Implemented UI system following Google M3 and WCAG
-
Differentiated with a focused and user-friendly interface
-
Implemented responsive design for optimal viewing across different device
Next Steps
-
Design Implementation and Handoff to the Development team
-
Getting the app live
-
Maintenance - continue to iterate and test designs.