2024.09 — 2025.02

Recruitment APP

The Recruitment App connects job seekers and employers, streamlining job postings, resume screening, and interview scheduling. It aims to improve recruitment efficiency and enhance user engagement.

Goal

1. Streamline the Job Posting Process
2. Enhance Talent Search and Screening Efficiency
3. Improve Information Architecture and Visual Hierarchy

Product background

This is a recruitment app designed specifically for business owners, helping them efficiently post job openings, screen resumes, and communicate with job seekers. However, based on market data and user feedback, many business owners have encountered pain points during the process, affecting recruitment efficiency.

Role

Product Designer

Deliverables

User Flow
Wireframe
Design System
UI Design
Prototype

Design Tool

Figma

Cooperate with

2 PM
1 Android Engineer
1  iOS Engineer

Get to know more about persona,  user journey and their pain point

Define questions and problems

Figure out the solution

Validate ideas(Tracking data & User Interview & Usibility Test)

Persona Overview

This Persona was constructed based on internal team discussions and anecdotal feedback regarding user behavior from the talent-seeking side of our platform. In addition, I conducted competitor analysis to identify common user patterns and goals. While formal user research was not conducted at this stage, this Persona serves as a working hypothesis to guide early design decisions and can be further validated and refined through future user studies.

Persona 1:

Age: 46
Role: Owner of a 10-person traditional trading company
Tech Proficiency: Basic (frequent LINE user, prefers simple tools)

Needs & Challenges:
May needs a quick and simple way to post jobs and respond to applicants via mobile. She wants to avoid staff shortages disrupting her operations but doesn’t have time to learn complicated systems. She also struggles to evaluate candidate quality and gets overwhelmed by unclear steps or too many notifications.

Design Implication:
This persona calls for an intuitive, no-learning-curve experience. I focused on streamlining the job posting flow, reducing cognitive load, and ensuring the process feels effortless—even for non-tech-savvy users.

Persona 2:

Age: 38
Role: HR Manager at a mid-sized manufacturing/logistics company (~120 employees)
Tech Proficiency: Intermediate (Excel, HR systems)

Needs & Challenges:
Kevin manages high-volume recruitment and must track application progress, report to senior management, and schedule interviews. However, he finds existing tools inefficient—job posting flows are long, it's unclear if progress is saved, resumes are hard to scan, and there’s no clear overview of hiring status.

Design Implication:
This persona requires efficient tools that reduce manual tasks and provide visibility. I redesigned the workflow to shorten time-to-post, added summary views and status tracking dashboards, and optimized the resume browsing experience to support fast, data-driven decisions.

Problems

  • Cumbersome Job Posting Process
  • Hiring Inefficiencies and Search Limitations
  • Poor visual structure
  • A redundant step (saving the table)

Problems

1. Cumbersome Job Posting Process
2. Hiring Inefficiencies and Search Limitations

HR teams face challenges due to time-consuming manual screening, limited filtering options, and a lack of intuitive candidate evaluation, making it difficult to find the right talent.

Additionally, inefficient search functionality frustrates users—yielding too few results, requiring frequent page navigation, and forcing them to re-enter the same keywords repeatedly.

These issues lower employer retention rates, while competitor platforms offer a smoother search experience, attracting more users.

Solution

1. Streamlined Job Posting: Faster, Smarter, and More Efficient
1.1. Single-Page Form vs. Stepper-Style Flow

Why I chose single-page over stepper-style:
A single-page layout allows experienced users to complete the form more quickly without page transitions. At the same time, clearly divided sections make it intuitive for first-time users to follow without getting overwhelmed.

Collaboration with PM/engineers or constraints:
After discussions with the PM and engineering team, we realized that a step-by-step flow would require additional logic to manage state and navigation, which would extend the development timeline. Engineers also noted that a single-page design is easier to maintain and scale.

Validation:
While formal A/B testing has not yet been conducted, the design choice is based on usability best practices. Research from NN/g and Baymard Institute suggests that minimizing steps and displaying key fields in a single view can enhance completion rates and reduce user friction. Post-launch, we plan to track completion rates and user feedback to further validate effectiveness.

1.2. AI Autofill + Manual Editing Option

Why I combined AI autofill with manual editing:
While AI speeds up the job posting process, its suggestions may not always align perfectly with user intent. Giving users full editing control ensures accuracy and preserves trust.

Technical/business considerations:
From a technical perspective, the team needed to manage draft state and transitions between AI suggestions and manual edits. However, the effort was considered manageable and worth the flexibility it offers users.

Decision and user validation:
We benchmarked similar products like Canva and Notion, which also combine AI suggestions with manual control.

1.3. Supporting Both AI and Manual Flows (Hybrid Approach)

Why I supported both AI and manual workflows:
Our users include experienced HR professionals who may prefer quick copy-paste methods to streamline the process of managing multiple job postings, and small business owners who may prefer job posts manually to better reflect their team culture and values. While templates offer convenience, they may not fully capture a company’s unique tone, leading some to prefer personalized descriptions. We wanted to respect their preferences rather than enforce a one-size-fits-all path.

Team discussion and trade-offs:
PMs were initially concerned about increased maintenance and onboarding effort. To address this, we used progressive disclosure—displaying AI suggestions first and letting users opt in or switch to manual mode—keeping the UI clean while offering flexibility.

Validation:
Although we haven’t conducted formal testing yet, Similar products like Workable and LinkedIn Recruiter offer AI-powered recommendations combined with manual adjustment options for resume screening. This hybrid design pattern has been proven to improve efficiency while preserving the flexibility and trust associated with human review.

Moreover, according to Nielsen Norman Group’s usability heuristics, progressive disclosure helps reduce cognitive load, preventing new users from being overwhelmed by complex options.It aligns with the best practice of “showing essential information first while hiding advanced options”, which enhances task flow and improves the learnability of the interface.

1.4. Using a Shallow Step-by-Step Progress Bar to Encourage Adoption of the New Feature

Why I added a progress bar:
When we first introduced the new AI-assisted job posting feature, I anticipated that some users might feel uncertain or hesitant to try it—especially if they were unfamiliar with AI-driven tools.
To reduce that hesitation and guide them into trying the new experience, I added a three-step progress bar at the top of the form.By clearly showing that the process only involves three simple steps, the UI helps users feel that using this new feature is not complicated or overwhelming. This visual cue builds confidence and gently nudges users to proceed with the AI-assisted flow.

Engineering/UX constraints:
From a development standpoint, the progress bar was lightweight to implement and did not interfere with the overall layout. I designed it to be compact and visually aligned with the page structure to avoid clutter.

Decision and rationale (no testing yet):
Though we haven’t conducted user testing yet, research from UX experts like the Nielsen Norman Group suggests that visible progress indicators reduce uncertainty, increase perceived control, and improve task completion rates—especially for new or unfamiliar flows.

2. Improve the search experience
2.1.Smart Search & Efficient Filtering Design
Trade-off Analysis — Search Input & Filtering Experience

In this redesign of the job search interface, our primary goal was to improve search efficiency and reduce user friction. To achieve this, we implemented three key features: an intuitive input experience, intelligent keyword matching, and horizontal filtering & categorization design. Although we have not conducted formal user testing yet, our design decisions were based on common UX patterns, team discussions, and technical constraints. Below is an analysis of the key trade-offs involved:

2.1.1. Intuitive Input Experience

We introduced real-time keyword suggestions and chip-based filters to replace traditional dropdown menus or advanced filter panels. This allows users to input and adjust search conditions more fluidly and efficiently.When designing this interaction, I referenced widely adopted UI patterns from platforms like Shopee, Amazon, 104 Job Bank, and LinkedIn. These platforms commonly use autocomplete suggestions, trending keyword prompts, and chip-based filters to reduce cognitive load and enhance search speed.Therefore, I adopted a “suggestions + chips” combination to support both quick onboarding and flexible control, forming the foundation of our search bar design.

  • Trade-off
    We intentionally avoided complex, multi-layered filter menus to minimize user cognitive load. However, this required frontend engineering support , and maintaining clear, lightweight chip interactions. In this design, we prioritized operational efficiency and UI clarity over displaying all filters at once.
  • Validation
    This design draws from proven patterns used in platforms like Shopee, Amazon, and 104 Job Bank. It aligns with Jakob Nielsen’s usability heuristics and is supported by Baymard Institute research, which confirms that such input models effectively improve search efficiency.
    Post-launch, we plan to track metrics such as search time, keyword click-through rate, and filter usage rate to evaluate performance.

2.1.2. Intelligent Keyword Matching

We implemented fuzzy search along with keyword ranking based on popularity and historical queries, aimed at reducing failed search results caused by typos or unclear phrasing.

  • Trade-off
    Compared to exact matching, we chose a more tolerant approach that allows users to retrieve meaningful results even if they mistype. This increases backend complexity, requiring optimization of fuzzy matching logic and query performance. PMs also noted that insufficient data during early stages could affect the accuracy of recommendations.
  • Validation
    This design is inspired by the error-tolerant search behavior seen in platforms like Google and major e-commerce sites. It also aligns with Nielsen’s usability heuristic of “error tolerance.”
    According to Baymard Institute, up to 34% of users fail to get results without fuzzy search. Although this approach added technical complexity, it significantly improved search success and user experience.
    Our priority was to reduce failed searches while improving recommendation relevance. In future iterations, we’ll refine ranking logic based on available data.
    Key metrics for validation will include search success rate, error tolerance, and search engagement.

2.1.3. Horizontal Filtering & Categorization Design

We designed a horizontally scrollable filter chip row, allowing users to quickly swipe through and combine multiple filter criteria. This approach enables more precise search results while keeping the interface clean and uncluttered.

  • Trade-off
    To avoid excessive vertical space usage and reduce information overload, we replaced traditional dropdowns or expandable filter sections with a horizontal scroll format. This saved screen real estate and improved usability—especially on mobile devices. The engineering team also optimized backend query performance, while PMs emphasized maintaining flexible filtering without compromising system response speed.
  • Validation
    This horizontal filtering model aligns with UX patterns seen on Google Jobs, Shopee, and Airbnb, where chip-based filters help users refine results efficiently and intuitively—especially in high-volume browsing contexts.

2.2. Enhancing Advanced Search: Real-Time Feedback, Mobile Optimization, and Improved User Experience

Trade-off Analysis — Filter Interaction Optimization&Resume Matching System

2.2.1. Real-Time Filtered Results Count

  • Why we chose real-time result count instead of a traditional search button:
    Users reported frustration when they clicked the search button only to find zero or an overwhelming number of results. To reduce the need for repeated adjustments, we implemented a real-time results count that updates with each new filter. This helps users make quick decisions and reduces friction.
  • PM/engineering discussion & constraints:
    Engineers confirmed the feature was technically feasible without major performance impact.
  • Validation:
    Although no formal testing was conducted, we prioritized this feature due to its direct impact on task efficiency. This pattern is also widely used in platforms like Airbnb and Agoda. Post-launch, we plan to evaluate its effectiveness by tracking filter adjustment frequency and drop-off rates.

2.2.2. Resume Matching System

We introduced AI-powered match scores with visual indicators to help HR teams quickly identify high-potential candidates without the need to open every resume. Manual resume screening is time-consuming and prone to inconsistency. The AI-generated score helps standardize evaluation, while the visual tags indicate which specific criteria (e.g., experience, salary, location) a candidate meets—enhancing both transparency and decision speed.

Why this design over traditional manual screening?

  • Manual review is costly and inefficient: According to LinkedIn Talent Trends, the average HR professional only spends 6–10 seconds per resume during the initial screening.
  • AI + visual tags allow instant prioritization: HR can immediately focus on top-matching candidates without opening each profile.
  • Proven in market: Platforms like LinkedIn Recruiter, Workable, and HireVue already apply similar match-based systems to improve speed and consistency while reducing bias.

PM/Engineering Discussions & Technical Constraints

To meet PM goals of reducing screening time while ensuring clarity and fairness, we designed real-time visual indicators to surface key info. To manage increased information density—especially on mobile—we used horizontal scroll with chips, keeping the UI clean. The feature is also technically feasible.

Why horizontal scroll instead of vertical stacking?

The design saves vertical space and maintains a clean candidate card layout, enabling easier side-by-side comparison—especially on mobile. It also aligns with Nielsen’s usability principles: reducing memory load, ensuring visual clarity, and providing immediate feedback.

Validation

Our approach mirrors proven systems used by LinkedIn Recruiter, Workable, and HireVue, which also rely on match scoring and structured visual cues to enhance fairness, speed, and decision quality. This confirms that our design aligns with established best practices in recruitment UX.

Future Plan validation metrics include:
Resume open rate, Average screening time per candidate, Ratio of high-match candidates making it to interview rounds, HR feedback on trust and system efficiency

2.3. Enhancing HR Efficiency:  Smart Filtering System

Trade-off Analysis — Resume Filtering

2.3.1. Quick Filtering Mechanism

To support high-volume, rapid resume screening workflows, we added features like hide viewed, bottom sheet sort menus, and persistent match score visibility, enabling HR to filter and navigate efficiently without leaving the list view.

Why this design?

We added a "hide viewed" toggle to help HR focus on unprocessed candidates, while sorting options like match score or application date are tucked into a bottom sheet to reduce clutter. Match scores remain visible across all sort types to ensure consistent comparison.

PM/Engineering Discussions & Constraints

To reduce visual overload, we used progressive disclosure—core functions are upfront, advanced filters in bottom sheets. Engineering confirmed real-time filtering is feasible and efficient.

Validation

Although we did not run formal heatmap analysis, our use of bottom sheet filters aligns with UX research from Nielsen Norman Group and Baymard Institute, which supports progressive disclosure for reducing clutter and improving discoverability.

Besides, the filtering model is aligned with best practices from tools like LinkedIn Recruiter and Greenhouse, which also use bottom sheets and persistent relevance indicators to support fast-paced HR workflows.

We plan to track the following success metrics: Usage rate of sorting options, Click-through rate on quick filter toggles, Ratio of shortlisted candidates

3. Enhanced Navigation and Visual Hierarchy
  • Enhanced Navigation and Visual Hierarchy Clear Sectional Grouping: 
    The interface uses distinct sections to separate different types of information. For example, job listings, application statuses, and candidate profiles are well-structured with clear containers, reducing cognitive load. 
    Buttons like toggles, chat bubbles, and selection actions (e.g., "save" or "contact") are visually distinct and placed where users expect them, ensuring smoother interactions. 
  • Improved Typography and UI Components Bold Headers & Clear Labels: 
    The use of bold and slightly larger text for important labels (such as job categories, user names, and section titles) makes scanning information effortless. 
    Contrast for Focus: 
    Different text colors and background highlights are used to indicate statuses (e.g., "in progress" buttons, job application stages). This ensures users can quickly distinguish between different states.
  • Consistency Across the App Unified Design Language: 
    The layout, button styles, and iconography remain consistent across different screens, reinforcing a cohesive experience. 
    Standardized Navigation Bar: The navigation bar at the bottom ensures quick access to the most-used functions, improving familiarity and efficiency. 
  • Ease of Navigation & Efficient Information Architecture Minimalist Approach: 
    Unnecessary elements are removed, allowing for a clean interface that highlights essential information. 
    Search and Filters: 
    Search bars and filtering icons make it easy for users to find relevant information without scrolling excessively. 
  • Visual Differentiation of Primary vs. Secondary Functions Primary Functions (E.g., Searching, Contacting, Application Status Updates): 
    These are visually highlighted with color, icons, and strategic placement. 
    Secondary Functions (E.g., Additional Details, Saved Items):
    Presented in a subtler manner (smaller text, softer colors), ensuring they don’t distract from the main tasks.
4. Simplify the Workflow (Auto-Save Drafts for Job Posting & Profile Completion)
Trade-off Analysis — Autosave Functionality

Why we chose Autosave over manual saving
We implemented an autosave feature to reduce the risk of user frustration caused by accidental progress loss. Compared to traditional manual saving, autosave provides a smoother experience and allows users to focus on the content without worrying about when to click "Save."Instead of relying on users to remember to save their draft, the system saves progress automatically in the background and notifies the user with a subtle toast message. This ensures continuity and reduces cognitive load during task flow.

  • Why Autosave over Manual Save?
    Improves task completion rates by removing interruption.
    Reduces the chance of lost work due to unexpected closure.

    Manual saving, while familiar to some users, introduces risks and delays for those who forget to save regularly.

PM / Engineering Discussions & Constraints

  • PM/Engineer Feedback:
    PMs supported the feature, especially for long-form flows where it prevents data loss and user drop-off. They emphasized that using a toast message provides low-distraction feedback to build user confidence. There were no technical issues.
  • Business Context:
    Minimizing task abandonment and improving user trust in the platform were key business goals. Autosave directly supports both.

Validation

While formal A/B testing has not yet been conducted, the feature design is grounded in industry benchmarks (e.g., Google Docs, Notion). Studies show autosave increases user satisfaction by up to 45%.We plan to validate effectiveness by tracking drop-off rates during form completion, error reports related to data loss, and feedback on save experience.

Success Metrics

To evaluate the impact of this recruitment platform redesign, we established the following success metrics across three key areas:

1. Efficiency Improvements

  • Reduced Resume Screening TimeGoal: Shorten average resume screening time from 2 minutes to under 1 minuteMethod: Track time spent per resume, including clicks, scrolls, and tab switches during the review process
  • Fewer Interruptions from Incomplete Drafts
    Impact: Auto-save feature reduces data loss and re-entry caused by accidental exits or tab switching (expected drop: 80%)

2. User Experience & Satisfaction

  • Increased HR Satisfaction
    Goal: Achieve a satisfaction score of 4.5+ out of 5 during post-design testing
  • Improved Navigation Clarity
    Impact: Shorter completion time and fewer mistakes when first-time users create and publish a job post

3. Product & Business Outcomes

  • Higher Job Post Completion Rate
    Metric: Increased conversion rate from job draft to published post (target improvement: 20%)
  • More Candidate Applications
    Impact: Improved information hierarchy and structure on job detail pages leads to higher applicant engagement (expected increase: 15–30%)

Expected Impact

This redesign focused on streamlining the job posting and resume screening process for recruiters, many of whom previously struggled with clunky workflows and unclear status tracking. Although full validation data was unavailable at handoff, we designed with the following expected outcomes:

  • Reduced task friction: By enabling autosave during job posting and offering clearer field guidance, we aimed to minimize cognitive load and reduce task abandonment.
  • Improved visibility into hiring progress: Features like status tags, resume filters, and quick-view previews were intended to help recruiters track candidate progress at a glance.
  • Higher system adoption and recruiter satisfaction: Through consistent UI patterns, mobile responsiveness, and reduced manual work (e.g. resume preview without download), the redesign targeted improved daily usability and time savings for HR teams.

Design decisions were grounded in competitor research (e.g., JobStreet, LinkedIn Talent Solutions) and internal stakeholder input.

Validation & Future Optimization Plan

To ensure long-term effectiveness of the redesign, we’ve outlined the following ongoing validation and optimization strategies:
Usability Testing
We will conduct small-scale usability tests using a Figma prototype to evaluate whether the user interface is intuitive and the overall user flow is smooth.
A/B Testing
We will run A/B tests to compare the performance of the new and old versions. If the new version demonstrates significantly improved results, it will be fully rolled out. Otherwise, we will continue to iterate and retest, or retain the original version as needed.
Future Optimization Strategy
Looking ahead, we plan to implement an AI-powered recommendation system to further enhance personalization and streamline user workflows.

We will also use GA to track user behavior and collect data for validating design decisions and identifying future improvement opportunities.

Problem Statement:

Users often forget to manually save job postings or profile edits, leading to lost progress, frustration, and repeated work. This disrupts task flow, increases cognitive load, and lowers completion rates—especially in long or multi-step forms.

How I Used Heuristic Principles to Justify Auto-Save

1. Visibility of System Status
Auto-save with toast notifications provides immediate feedback, reducing user anxiety about lost progress.

2. Error Prevention
Manual saving is often forgotten. Auto-save prevents data loss from accidental exits or missed clicks.

3. Recognition Over Recall
Users don’t need to remember to save—auto-save reduces mental load and streamlines the experience.

4. Aesthetic & Minimalist Design
By removing the save button, the interface stays clean and modern, aligning with tools like Notion and Google Docs.

Solution:
How I Designed the Auto-Save Workflow

To reduce user friction and prevent data loss, I implemented auto-save with subtle toast notifications, replacing the need for a manual “Save” button.
I chose this approach to support:

  • Continuous task flow without interruptions or extra actions
  • Reduced anxiety around losing progress
  • A clean, modern UI with fewer cognitive load triggers

I considered offering both auto-save and manual save, but prioritized simplicity and consistency. The design was inspired by best practices from Google Docs and Notion.I validated this approach through UX research (Baymard, Forrester), which shows auto-save can significantly improve form completion and user confidence.

Problem Statement:

HR users experience friction and inefficiency when posting jobs due to a multi-step, page-based form that requires excessive input and back-and-forth navigation. This results in a time-consuming process that increases cognitive load and leads to task abandonment or frustration, especially for non-tech-savvy users.

Solution:

To address the time-consuming, multi-step job posting process, I designed a single-page layout with clearly divided sections. This reduces friction for experienced users like HR managers while staying intuitive for occasional users.

I also implemented a hybrid flow supporting both AI-assisted and manual job posting, respecting users’ varying needs. New users can begin with an AI suggestion and seamlessly switch to manual editing.

To encourage adoption of the AI feature, I added a 3-step visual progress bar, reducing uncertainty and making the process feel manageable.

These decisions were grounded in heuristic principles such as:

  • Efficiency of use – reducing page transitions.
  • Recognition over recall – clearly showing key fields.
  • Progressive disclosure – easing cognitive load for new users.

✦ Research from NN/g and Baymard supports that simplified, segmented layouts and progress indicators improve task completion and reduce drop-off—especially for unfamiliar flows.

Problem Statement:

The existing resume filtering system is inefficient and unintuitive, causing friction for both frequent users who need speed and flexibility, and occasional users who need familiarity and ease of use. This results in slower workflows, increased cognitive load, and a frustrating search experience.

Solution:

We implemented fuzzy search and ranking by popularity/history to improve search accuracy despite typos or vague terms.

Helps frequent users avoid delays during bulk screening. Supports May in finding results without needing perfect input.
Based on Google and e-commerce patterns; supports error tolerance.

Problem Statement:

Users often face uncertainty when applying filters due to lack of immediate feedback. Traditional search buttons delay results, leading to confusion, dead-end queries, and inefficient filtering—especially in high-volume or unfamiliar workflows.

Solution:

We replaced the traditional search button with a dynamic result count that updates instantly as filters are applied. This gives users immediate feedback, improves search clarity, and reduces the chance of dead-end results.Inspired by platforms like Airbnb and Agoda. Engineers confirmed minimal performance impact, and we softened the UI update to prevent visual noise.

Solution:

How I Designed Resume Matching System

  • I aimed to reduce time spent manually opening resumes by surfacing AI-powered match scores directly in the list view.
  • Designed visual tags (e.g., experience match, location, salary) to explain why a candidate matches—enhancing trust and transparency.
  • Prioritized clarity and actionability: match scores are consistently visible, enabling users to scan and shortlist without losing context.
  • Studied patterns from LinkedIn Recruiter and Workable to ensure familiarity and effectiveness.
  • Designed for both speed (for expert users) and guidance (for casual users), bridging automation with usability.

How I Designed This Filtering System

  • I observed pain points in manual screening—too many resumes, unclear sorting, and frequent context switching.
  • To reduce friction, I introduced a “hide viewed” toggle for focus and persistent match scores for clarity.
  • I used progressive disclosure to balance simplicity and control:
  • Kept essential filters upfront
  • Placed advanced sort options in a bottom sheet, following mobile UI conventions
  • I maintained a clean layout by avoiding sidebars and excess buttons, while ensuring users could still sort by key criteria without leaving the list view.
Problem Statement:

HR professionals face friction when using the existing recruitment platform due to cluttered layouts, poor visual hierarchy, and hidden filters. Frequent users struggle to quickly scan and act, while occasional users feel overwhelmed and uncertain. These issues slow down resume screening, reduce efficiency, and increase the risk of user drop-off—especially when competitors offer more intuitive, structured tools.

Solution:
3.1 Sectional Layout & Visual Grouping

I reorganized content into clear sections to reduce cognitive load, referencing Nielsen’s heuristics and LinkedIn’s layout for fast scanning.

3.2 Bold Typography for Key Info

I used bold, larger headers to create visual hierarchy, tested font weights, and followed Material Design for readability.

3.3 Horizontal Scrollable Filters

I replaced dropdowns with chip-style horizontal filters inspired by Shopee and Google Jobs, ensuring better visibility and engagement.

3.4 Minimalist Navigation & Flat IA

I removed non-essential elements to surface key actions, applying minimalist UI principles from Nielsen Norman Group to reduce user overwhelm.

Strong Visual Hierarchy in Actions

I styled primary actions with higher visual weight and followed Material Design and Apple HIG to guide user focus and prevent confusion.

Problem Statement:

HR users experience friction and inefficiency when posting jobs due to a multi-step, page-based form that requires excessive input and back-and-forth navigation. This results in a time-consuming process that increases cognitive load and leads to task abandonment or frustration, especially for non-tech-savvy users.

Solution:

To address the time-consuming, multi-step job posting process, I designed a single-page layout with clearly divided sections. This reduces friction for experienced users like HR managers while staying intuitive for occasional users.

I also implemented a hybrid flow supporting both AI-assisted and manual job posting, respecting users’ varying needs. New users can begin with an AI suggestion and seamlessly switch to manual editing.

To encourage adoption of the AI feature, I added a 3-step visual progress bar, reducing uncertainty and making the process feel manageable.

These decisions were grounded in heuristic principles such as:

  • Efficiency of use – reducing page transitions.
  • Recognition over recall – clearly showing key fields.
  • Progressive disclosure – easing cognitive load for new users.

✦ Research from NN/g and Baymard supports that simplified, segmented layouts and progress indicators improve task completion and reduce drop-off—especially for unfamiliar flows.

Problem Statement:

The existing resume filtering system is inefficient and unintuitive, causing friction for both frequent users who need speed and flexibility, and occasional users who need familiarity and ease of use. This results in slower workflows, increased cognitive load, and a frustrating search experience.

Solution:

We implemented fuzzy search and ranking by popularity/history to improve search accuracy despite typos or vague terms.

Helps frequent users avoid delays during bulk screening. Supports May in finding results without needing perfect input.
Based on Google and e-commerce patterns; supports error tolerance.

Problem Statement:

Users often face uncertainty when applying filters due to lack of immediate feedback. Traditional search buttons delay results, leading to confusion, dead-end queries, and inefficient filtering—especially in high-volume or unfamiliar workflows.

Solution:

We replaced the traditional search button with a dynamic result count that updates instantly as filters are applied. This gives users immediate feedback, improves search clarity, and reduces the chance of dead-end results.Inspired by platforms like Airbnb and Agoda. Engineers confirmed minimal performance impact, and we softened the UI update to prevent visual noise.

Solution:

How I Designed Resume Matching System

  • I aimed to reduce time spent manually opening resumes by surfacing AI-powered match scores directly in the list view.
  • Designed visual tags (e.g., experience match, location, salary) to explain why a candidate matches—enhancing trust and transparency.
  • Prioritized clarity and actionability: match scores are consistently visible, enabling users to scan and shortlist without losing context.
  • Studied patterns from LinkedIn Recruiter and Workable to ensure familiarity and effectiveness.
  • Designed for both speed (for expert users) and guidance (for casual users), bridging automation with usability.

How I Designed This Filtering System

  • I observed pain points in manual screening—too many resumes, unclear sorting, and frequent context switching.
  • To reduce friction, I introduced a “hide viewed” toggle for focus and persistent match scores for clarity.
  • I used progressive disclosure to balance simplicity and control:
  • Kept essential filters upfront
  • Placed advanced sort options in a bottom sheet, following mobile UI conventions
  • I maintained a clean layout by avoiding sidebars and excess buttons, while ensuring users could still sort by key criteria without leaving the list view.
Problem Statement:

HR professionals face friction when using the existing recruitment platform due to cluttered layouts, poor visual hierarchy, and hidden filters. Frequent users struggle to quickly scan and act, while occasional users feel overwhelmed and uncertain. These issues slow down resume screening, reduce efficiency, and increase the risk of user drop-off—especially when competitors offer more intuitive, structured tools.

Solution:
3.1 Sectional Layout & Visual Grouping

I reorganized content into clear sections to reduce cognitive load, referencing Nielsen’s heuristics and LinkedIn’s layout for fast scanning.

3.2 Bold Typography for Key Info

I used bold, larger headers to create visual hierarchy, tested font weights, and followed Material Design for readability.

3.3 Horizontal Scrollable Filters

I replaced dropdowns with chip-style horizontal filters inspired by Shopee and Google Jobs, ensuring better visibility and engagement.

3.4 Minimalist Navigation & Flat IA

I removed non-essential elements to surface key actions, applying minimalist UI principles from Nielsen Norman Group to reduce user overwhelm.

Strong Visual Hierarchy in Actions

I styled primary actions with higher visual weight and followed Material Design and Apple HIG to guide user focus and prevent confusion.

Problem Statement:

HR users experience friction and inefficiency when posting jobs due to a multi-step, page-based form that requires excessive input and back-and-forth navigation. This results in a time-consuming process that increases cognitive load and leads to task abandonment or frustration, especially for non-tech-savvy users.

Solution:

To address the time-consuming, multi-step job posting process, I designed a single-page layout with clearly divided sections. This reduces friction for experienced users like HR managers while staying intuitive for occasional users.

I also implemented a hybrid flow supporting both AI-assisted and manual job posting, respecting users’ varying needs. New users can begin with an AI suggestion and seamlessly switch to manual editing.

To encourage adoption of the AI feature, I added a 3-step visual progress bar, reducing uncertainty and making the process feel manageable.

These decisions were grounded in heuristic principles such as:

  • Efficiency of use – reducing page transitions.
  • Recognition over recall – clearly showing key fields.
  • Progressive disclosure – easing cognitive load for new users.

✦ Research from NN/g and Baymard supports that simplified, segmented layouts and progress indicators improve task completion and reduce drop-off—especially for unfamiliar flows.

Problem Statement:

The existing resume filtering system is inefficient and unintuitive, causing friction for both frequent users who need speed and flexibility, and occasional users who need familiarity and ease of use. This results in slower workflows, increased cognitive load, and a frustrating search experience.

Solution:

We implemented fuzzy search and ranking by popularity/history to improve search accuracy despite typos or vague terms.

Helps frequent users avoid delays during bulk screening. Supports May in finding results without needing perfect input.
Based on Google and e-commerce patterns; supports error tolerance.

Problem Statement:

Users often face uncertainty when applying filters due to lack of immediate feedback. Traditional search buttons delay results, leading to confusion, dead-end queries, and inefficient filtering—especially in high-volume or unfamiliar workflows.

Solution:

We replaced the traditional search button with a dynamic result count that updates instantly as filters are applied. This gives users immediate feedback, improves search clarity, and reduces the chance of dead-end results.Inspired by platforms like Airbnb and Agoda. Engineers confirmed minimal performance impact, and we softened the UI update to prevent visual noise.

Solution:

How I Designed Resume Matching System

  • I aimed to reduce time spent manually opening resumes by surfacing AI-powered match scores directly in the list view.
  • Designed visual tags (e.g., experience match, location, salary) to explain why a candidate matches—enhancing trust and transparency.
  • Prioritized clarity and actionability: match scores are consistently visible, enabling users to scan and shortlist without losing context.
  • Studied patterns from LinkedIn Recruiter and Workable to ensure familiarity and effectiveness.
  • Designed for both speed (for expert users) and guidance (for casual users), bridging automation with usability.

How I Designed This Filtering System

  • I observed pain points in manual screening—too many resumes, unclear sorting, and frequent context switching.
  • To reduce friction, I introduced a “hide viewed” toggle for focus and persistent match scores for clarity.
  • I used progressive disclosure to balance simplicity and control:
  • Kept essential filters upfront
  • Placed advanced sort options in a bottom sheet, following mobile UI conventions
  • I maintained a clean layout by avoiding sidebars and excess buttons, while ensuring users could still sort by key criteria without leaving the list view.
Problem Statement:

HR professionals face friction when using the existing recruitment platform due to cluttered layouts, poor visual hierarchy, and hidden filters. Frequent users struggle to quickly scan and act, while occasional users feel overwhelmed and uncertain. These issues slow down resume screening, reduce efficiency, and increase the risk of user drop-off—especially when competitors offer more intuitive, structured tools.

Solution:
3.1 Sectional Layout & Visual Grouping

I reorganized content into clear sections to reduce cognitive load, referencing Nielsen’s heuristics and LinkedIn’s layout for fast scanning.

3.2 Bold Typography for Key Info

I used bold, larger headers to create visual hierarchy, tested font weights, and followed Material Design for readability.

3.3 Horizontal Scrollable Filters

I replaced dropdowns with chip-style horizontal filters inspired by Shopee and Google Jobs, ensuring better visibility and engagement.

3.4 Minimalist Navigation & Flat IA

I removed non-essential elements to surface key actions, applying minimalist UI principles from Nielsen Norman Group to reduce user overwhelm.

Strong Visual Hierarchy in Actions

I styled primary actions with higher visual weight and followed Material Design and Apple HIG to guide user focus and prevent confusion.

Design System

Expected Impact

This redesign focused on streamlining the job posting and resume screening process for recruiters, many of whom previously struggled with clunky workflows and unclear status tracking. Although full validation data was unavailable at handoff, we designed with the following expected outcomes:

  • Reduced task friction: By enabling autosave during job posting and offering clearer field guidance, we aimed to minimize cognitive load and reduce task abandonment.
  • Improved visibility into hiring progress: Features like status tags, resume filters, and quick-view previews were intended to help recruiters track candidate progress at a glance.
  • Higher system adoption and recruiter satisfaction: Through consistent UI patterns, mobile responsiveness, and reduced manual work (e.g. resume preview without download), the redesign targeted improved daily usability and time savings for HR teams.

Design decisions were grounded in competitor research (e.g., JobStreet, LinkedIn Talent Solutions) and internal stakeholder input.

APP UI

Takeaways

Takeaway

Although this project was ultimately not launched due to company-level decisions, and we couldn’t track its real-world performance, the process revealed many areas for improvement and left a few regrets. Still, it became a valuable learning experience where I gained the following:

1. Enhancing Persuasion with UX Principles and Industry Research

  • Leveraged studies from Nielsen Norman Group and Baymard Institute to support design decisions, applying patterns such as progressive disclosure, fuzzy search, and auto-save to build team alignment and design credibility.
  • Practiced applying heuristic principles like visibility of system status, error prevention, and recognition over recall to create more predictable, stable user experiences and reduce error rates.

2. Developing Design Judgment Between Efficiency and Flexibility

  • Learned to balance the needs of different user types—such as experienced HR professionals versus small business owners—by introducing a hybrid workflow that combines AI assistance with manual editing, avoiding a one-size-fits-all approach.
  • Recognized that advanced features should not interfere with the core user flow, and applied progressive disclosure to tuck complex options into lower layers, preserving overall simplicity and clarity.

3. Deeply understanding user context is more important than building features
Design isn't just about addressing surface-level requests — it’s about uncovering the real constraints users face in their daily workflows. For example, HR professionals typically spend only 6–10 seconds reviewing each resume. This led me to rethink how to present information in a way that enables rapid, high-confidence decisions.

By asking “why” repeatedly and mapping the real-world context, I learned how to identify the root problems and design with purpose.

4. Translating UX principles into actionable design patterns
I learned how to apply abstract principles like recognition over recall, error prevention, and progressive disclosure in practical ways — such as using visual tags to highlight key resume info, layering content to reduce overwhelm, and allowing for tolerant fuzzy search.
Rather than applying heuristics mechanically, I learned to select and adapt them based on the situation to create intuitive, user-centered solutions.

5. Data-driven thinking and industry benchmarking strengthen design credibility
When formal user testing wasn’t feasible, I supported my decisions using research from NN/g and Baymard Institute, as well as benchmarks from platforms like LinkedIn Recruiter and HireVue.
I also defined preliminary KPIs — such as search success rate or conversion uplift — to plan for post-launch validation, which helped promote a data-informed design mindset across the team.

6. AI is not the solution — it’s a support system for human decisions
I began thinking of AI as a way to enhance human judgment, not replace it. For example, pairing AI-powered recommendations with visual labels allowed HR users to quickly scan for fit without reading each resume in full.
This shaped my belief that AI should amplify usability, not complicate it — and that thoughtful UX design is the bridge between AI and end users.

7. Set Expectations Before You Design
When working with teams that have limited UX understanding and tight resources, I learned the importance of aligning expectations early. Without proper user research, empathy gaps can lead to flawed decisions. While alternative methods can help, they aren’t substitutes. Proactive communication helped reduce misunderstandings and build trust—reminding me that good design starts with setting the right foundations.

Related Digital Products

Nosie Eraser APP & Website

#AIAudio #NoiseCancellation #VoiceEnhancement #AudioUX #WebAppDesign #AIUX #SoundDesign #ProductivityTech

Healthcare APP

#HealthTech #HealthcareApp #UXForGood #BehavioralDesign #TaskDesign #PersonalizedUX #UserEngagement

Crypto Website

#CryptoUX #DeFiDesign #Web3Design #BlockchainUX #FintechDesign #CryptoPlatform #SecurityByDesign #UXStrategy

Welcome to contact me !