The process

Although the project was initially positioned as a UI beautification task, it soon uncovered critical usability and workflow issues impacting HR professionals. Given the six-month timeline and the company's limited UX maturity, I couldn’t conduct formal user research. Instead, I collaborated with the CTO and PM to gather internal insights and construct user personas. By applying Nielsen’s heuristics and mapping out the task flow, I pinpointed major friction points in the job posting and resume screening processes.

I led the redesign of the entire app. Given the limited timeline, I began by mapping the user journey to pinpoint and prioritize the most critical pain points. This approach helped me to empathize with users' pain points and what are our opportunities to improve our products. This approach helped me clearly communicate the impact of these issues and align with stakeholders on what to tackle first.

‍Why I prioritized these two improvements:
According to the CTO, many users had complained about receiving too few applications. This highlighted issues in both the job posting and resume screening stages—two of the most impactful parts of the hiring flow. Job posting directly affects the quality and volume of applicants, while resume screening is the most time-consuming and mentally taxing task. By addressing these areas first, I aimed to reduce user effort, improve clarity, and streamline the hiring experience.
Additionally, both the CTO and PM emphasized the need to modernize the app’s outdated UI, which informed the overall redesign direction.

User Journey

Summary of Persona

I conducted an internal interview with the CTO to better understand our user profiles. He mentioned that customer service frequently receives complaints from users who struggle to navigate the app—particularly small business owners from traditional industries who are not familiar with digital tools. Based on these insights and the mapped user journey, I identified two key personas:

Persona 1: May Chang
Role: Small Business Owner｜Tech Level: Low

Needs: Hire quickly, minimal effort, easy-to-use tool
Pain Points: Doesn’t know how to write a good job posts, overwhelmed by resumes, confused by advanced features, often misses replies. Too few people apply for the job.
Design Focus: Simple guidance, quick CV screening, clear reminders

Persona 2: Kevin Lin
Role: HR Manager (Mid-sized company)｜Tech Level: Intermediate

Needs: Streamline hiring, track applicant status, generate reports
Pain Points: tiring of job posting flow, unclear data saving, time-consuming CV screening
Design Focus: Smarter workflow, autosave, clean resume UI, scheduling tool, status dashboard

Problems

Hiring managers were frustrated. They couldn’t find the right resumes, and posting jobs felt like filling out taxes.
The recruitment platform had grown cluttered over time. Key tasks like posting jobs, searching resumes, and managing interviews were inefficient, leading to recruiter fatigue and lost candidates.

1. Cumbersome Job Posting Process

2. Hiring Inefficiencies and Search Limitations

During stakeholder interviews, the CTO shared that HR clients struggled to review resumes efficiently.
This pointed to major usability issues in the search results experience:

Lacked filtering control for read/unread candidates.
All candidates displayed in a flat list, with no grouping or visual prioritization—creating cognitive overload.
No quick access to saved searches or sorting filters.
Text-heavy layout with low interactivity, offering little guidance or hierarchy for decision-making.

These issues caused unnecessary friction, wasted time, and reduced recruiter confidence in the platform’s ability to support fast, high-quality hiring decisions.

3. Poor visual structure

Unstructured Navigation  Cluttered layout with no grouping; hard to find what you need.
Overloaded Actions 
Too many buttons shown at once; visually overwhelming.
Poor Readability 
No status tags or visual cues; job info hard to scan.

4. Problem : Low application rate

During an internal interview, the CTO mentioned that customer support had received complaints from users—many recruiters were frustrated that they weren’t getting enough applications, even for seemingly attractive job posts.
Over time, this frustration doesn’t just affect hiring performance—it also risks damaging the customer’s perception of our product’s value.
If recruiters feel that the platform cannot help them attract the right candidates, they may lose confidence in the service and hesitate to renew or upgrade their plan, ultimately impacting client retention and revenue growth.

Problem Statement

The search and job posting flow was fragmented, inefficient, and lacked smart filtering—causing friction, wasted time, and poor user clarity.

Scattered filters & flat UI made tracking and scanning difficult
Mobile experience was time-consuming with no real-time feedback
Switching screens and exit prompts disrupted user flow
The CTO shared that customer support had received feedback about low applicant turnout. Customer complaints (noted by CTO) indicated a risk of churn and lost revenue

Solutions

To solve the fragmented experience, I focused on three key areas.

1. Fast, Clear, Compelling: Better Job Posts with Less Effort

Before

After

Optimizing Job Posting Flow with Smart Form Design & AI Assistance
To streamline the job posting experience, I introduced a single-page form layout, AI autofill with manual editing, and a step-by-step progress bar—balancing speed, clarity, and control.

Single-Page Form vs. Stepper Flow

Design Rationale: 
A single-page layout helps experienced users complete forms faster, while clearly divided sections still guide first-time users without overwhelming them.

Supported by NN/g and Baymard research showing single-page forms reduce friction and improve task completion.
Hypothesis: 
Users will complete job posting faster and with fewer drop-offs when all fields are on a single page with intuitive sectioning.
Trade-off: 
Reduced structural guidance compared to stepper flows, but offset by intuitive visual grouping.
Validation: 
We can track form abandonment and completion time.

AI Autofill + Manual Editing

Design Rationale: 
In the recruitment context, many HR professionals struggle to write attractive job descriptions, often due to lack of UX writing skills or time constraints. Studies from LinkedIn and Glassdoor show that poor job content directly reduces application rates.
Introducing AI-assisted job templates helps reduce cognitive load, ensures completeness, and improves hiring efficiency—while manual editing ensures personalization and credibility.
While AI-powered form-filling can improve efficiency—something intermediate users may appreciate—users from traditional companies often prefer manual control to ensure accuracy.
To balance both needs, I designed the experience to respect trust, autonomy, and flexibility.
Hypothesis: 
AI-assisted job description templates will help HR professionals produce clearer, more complete, and more attractive listings, leading to higher application rates and lower editing friction—especially for those without UX writing experience.
Trade-off: 
Integrating AI suggestions introduces additional frontend and backend complexity, including:

Handling dynamic field population and draft state tracking
Balancing consistency with flexibility (AI vs. manual input)
Risk of over-reliance on generic phrasing if HR does not personalize content

Validation:

Conducted internal QA to confirm AI-generated content followed best practices (clarity, completeness, tone)
Engineering confirmed feasibility for hybrid editing mode

Usability tests focused on:

Task completion time
Editing rate (AI → manual refinement)
Perceived clarity and confidence
Application rate uplift A/B test (AI-assisted vs. manual-only listings)

Shallow Progress Bar for AI Feature Adoption

Design Rationale: 
Based on the persona, new or less tech-savvy users may feel hesitant about AI-generated content. A simple 3-step progress bar improves transparency and builds confidence ,and non-tech-savvy users may be willing to try it.

Based on NN/g research that progress indicators improve clarity and completion, especially in unfamiliar flows.
Hypothesis: 
Showing a short, visible progress bar will increase trust and reduce user hesitation with the new AI-powered workflow.
Trade-off: 
Adds a UI element that may seem redundant to advanced users, but benefits first-time or cautious users.
Validation: 
We can monitor bounce rate, engagement, and feedback from new users.

Autosave to Reduce Drop-Off and Friction

Design Rationale: 
I implemented autosave to prevent data loss, reduce user frustration, and minimize interruptions. It quietly saves progress in the background with subtle toast notifications, helping users stay focused without worrying about manual actions.
Hypothesis: 
Automatically saving progress during long form interactions will reduce task abandonment and improve user confidence.
Trade-off: 
Autosave removes explicit user control, but was designed with low-distraction visual cues (e.g. toasts) to maintain feedback. No technical blockers were reported.
Validation: 
Backed by PMs and engineers for supporting long flows. Aligns with business goals of lowering drop-off and building user trust. We can measure impact through completion rates and user satisfaction in future testing.

2. Improve the search experience

Before

After

2.1. Smart Search & Efficient Filtering Design

To streamline the search experience, I redesigned the filtering system with three key improvements—chip-based filtering, horizontal scroll layout, and fuzzy search—guided by proven UX patterns from Shopee, Google, and Amazon.

1. Chip-Based Filtering with Real-Time Suggestions
I replaced dropdowns with real-time suggestions and chip-based filters to simplify user input and adjustment.

Design Rationale:
Dropdowns often interrupt flow and increase cognitive load, especially with complex filters. Chips offer at-a-glance clarity and faster adjustments.
This pattern aligns with Shopee, Amazon, and 104.
Hypothesis:
Users prefer lightweight, visible filters and are more likely to complete their search flow when chips replace dropdowns.
Trade-off:
Prioritized clarity and efficiency over deep filter complexity; required additional frontend logic.
Validation:
Success metrics include faster filter completion time, higher engagement with visible chips, and reduced abandonment during filtering.

2. Horizontal Scrollable Filter Layout 
I used a horizontal scrollable chip row to allow compact, intuitive access to filters without overwhelming the UI.

Design Rationale:
Mobile screens have limited vertical space—horizontal scrolling helps declutter the interface while keeping filtering efficient.
Hypothesis:
Users can complete multi-condition filtering faster when filters are horizontally scrollable, especially on mobile.
Trade-off:
Sacrificed full visibility of all filters for spatial efficiency; required backend query optimization.
Validation:
Inspired by Google Jobs and Airbnb. We can track filter engagement rate on mobile, time-to-complete filter flow, and user-reported ease of use.

3. Fuzzy Search with Keyword Ranking

I implemented fuzzy matching and keyword ranking based on popularity and historical queries to reduce zero-result searches.

Design Rationale:
Users often mistype or input vague terms—exact match logic causes frustration and poor results. Fuzzy logic offers resilience.

Based on patterns from Google and e-commerce platforms. Baymard reports 34% of users fail to get results without fuzzy search.
Hypothesis:
Allowing near-miss matches will reduce failed searches and increase session depth.
Trade-off:
Increased backend complexity and logic tuning, but improved user experience and search relevance.
Validation:
Metrics can include reduced zero-result rate, improved success rate under typos, and engagement metrics (CTR, dwell time).

2.2. Advanced Searching & Resume Matching System

To improve the resume search and evaluation experience, I designed an Advanced Searching & Resume Matching System that integrates real-time result counts, AI-powered matching scores, and horizontally scrollable resume cards. These features collectively aim to enhance decision speed, clarity, and fairness in high-volume screening environments.

Streamlined Filter UI for HR Talent Search

To enhance the efficiency of HR professionals in locating suitable candidates, I redesigned the advanced search panel with chip-based filtering, flexible salary input, and a single-page layout.

Design Rationale:
‍HR users often need to quickly filter large talent pools based on multiple criteria (e.g., job type, shift availability, gender). Traditional dropdowns and multi-page flows slow down decision-making and increase cognitive load.
To improve speed and clarity, I introduced:

Chip-based multi-select filters for fast toggling of criteria
Dual-mode salary range input combining slider and manual entry
Almost in-one single-page interface to minimize context switching

This design allows HR users to scan, adjust, and confirm filters without leaving the current screen—ideal for time-sensitive recruitment tasks.

Hypothesis:
‍If HR users can quickly adjust multiple filters within a single, visually clear layout, they will complete candidate searches more efficiently, with less frustration and higher task success.
Trade-off:

Increased UI complexity:
Balancing clarity and density on a single screen required careful layout design and responsive behaviors.
Solution:
Used collapsible sections and horizontal scroll for chips to manage screen space, especially on mobile or tablet devices used in the field.

Validation:
‍Post-launch, we measured the following indicators to evaluate success:

Filter engagement rate (chip clicks and salary edits per session)
Search task completion time
Drop-off before executing a search
User interviews: HR users noted better control and faster filtering compared to the previous version

Real-Time Filtered Results Count
Instead of relying on a traditional "Search" button, I implemented a real-time result count that updates dynamically with each filter adjustment.

Design Rationale:
Users often feel frustrated when filters yield zero or overwhelming results after clicking "Search." By surfacing the result count in real-time, users can adjust filters confidently without fear of dead ends.
‍
Inspired by patterns from Airbnb and Agoda.
Hypothesis:
If users see updated result counts instantly, they will make decisions more efficiently and reduce filter drop-off.
Trade-off:
This feature added frontend complexity and required careful state management. Although untested pre-launch, it was prioritized for its potential impact.
Validation:
We can track filter engagement rate, drop-off rate, and search flow completion.

2.2. AI-Powered Resume Matching System

I incorporated AI match scores and visual tags to help HR quickly identify top candidates without needing to open every profile.

Design Rationale:
In stakeholder interviews, the CTO pointed out that clients often want rich resume cards tailored to their own criteria—leading to more data displayed per candidate. However, too much information overwhelmed clients, making it difficult for them to quickly scan through profiles. This created friction in the selection process and slowed down hiring.
HR professionals typically spend only 6–10 seconds per resume. Surface-level insights like “100% match” scores and visual tags (e.g., education, location) enable faster, more consistent evaluations.
This approach is based on best practices from LinkedIn, Workable, and HireVue.
Hypothesis:
When matching scores and priority tags are visible upfront, HR can make more accurate shortlisting decisions while saving time.
Trade-off:
This required backend investment in scoring logic and calibration, but greatly reduced manual review burden.
Validation:
We can validate the effectiveness of this solution by tracking engagement with top-ranked resumes. Metrics included higher click-through rates, increased save/invite actions, and qualitative feedback from recruiters confirming faster and more confident shortlisting decisions.

Prototype

2.3. Enhancing HR Efficiency: Smart Filtering System

To support fast, high-volume screening, I designed a filtering system with a "Hide Viewed" toggle, bottom sheet filters, and persistent match scores—all integrated into the list view.

Design Rationale: 
Applied progressive disclosure—core actions are surfaced upfront, advanced filters placed in a clean bottom sheet. Match scores remain visible for consistent evaluation.
‍
Based on patterns from LinkedIn Recruiter and Greenhouse, aligned with NN/g and Baymard principles.
Hypothesis: 
Recruiters will screen faster and more accurately if they can hide reviewed profiles, access filters quickly, and see match scores at a glance.
Trade-off: 
Bottom sheets reduce clutter but may need onboarding cues; persistent match scores require tight layout control.
Validation: 
Post-launch tracking can track filter usage and decision time.

3. Enhanced Visual Hierarchy

To improve usability and reduce cognitive load, I refined the UI using Jakob Nielsen’s 10 usability heuristics, focusing on layout clarity, consistent structure, and visual priority cues.

Design Rationale: 
Clear separation of sections (e.g. listings, statuses, profiles) and consistent navigation patterns help users scan and act quickly. Key functions like “Save” or “Contact” are made visually distinct through bold colors and iconography.
‍
The design aligns with industry-standard heuristics (NN/g). We aimed to improve findability and reduce task time.
Hypothesis: 
If primary actions are clearly highlighted and layout is consistent, users will complete tasks faster and with fewer errors.
Trade-off: 
Prioritizing clarity required limiting decorative elements and styling secondary actions subtly to reduce visual noise. This may affect discoverability of less-used functions.
Validation: 
Post-launch metrics can track engagement with key actions, bounce rate, and navigation efficiency.

Before & After

Success Metrics

To evaluate whether the redesign achieved its goal, I defined the following success indicators:

1. Resume Screening Time ↓

Recruiters should be able to review resumes more efficiently. A lower average time spent per resume reflects improved interface clarity and decision support.

2. Incomplete Draft Interruption Rate ↓

The auto-save function should significantly reduce data loss and frustration from accidental exits. A drop in interruption incidents indicates improved flow resilience.

3. HR Satisfaction Score ↑

Post-redesign usability testing should yield a higher satisfaction score, validating whether the redesign meets HR needs and expectations.

4. Job Post Completion Rate ↑

More users should be able to smoothly complete and publish job listings. A higher conversion rate from draft to published post reflects improved usability and guidance.

5. Application Rate per Job ↑

Better layout and information hierarchy on job detail pages should encourage more applicants to apply. A rise in average applications per job post indicates improved engagement and content clarity.

Validation & Future Optimization Plan

Due to limited resources, I lean toward adopt cost-effective and lightweight validation methods to ensure the redesign addressed core usability issues at first:

Internal Usability Testing
‍We can invite 3–5 internal stakeholders (e.g., sales or customer support team members) with no prior design involvement to complete key tasks such as posting a job or reviewing resumes. Observations helped us quickly spot friction points.
Behavior Analytics via Existing Tools
‍Without additional setup, we can track behavioral metrics through Google Analytics or our internal dashboard:

Job post completion rate
Average time on task
Drop-off rate in the job creation flow
Resume filtering engagement

Customer Feedback from Frontline Teams
‍We can gather qualitative insights from customer support and sales teams, who regularly interact with users. Their feedback revealed whether user confusion decreased post-launch.

Design System

UI Mockup

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 that significantly sharpened my UX judgment and design communication skills.
Here’s what I gained from this journey:

Enhancing Persuasion with UX Principles and Industry Research
‍I leveraged findings from Nielsen Norman Group and Baymard Institute to justify key decisions—such as using fuzzy search, progressive disclosure, and auto-save patterns. This helped align stakeholders with low UX maturity and built credibility across the team. Heuristic principles like “visibility of system status” and “recognition over recall” were applied to make the product more predictable and user-friendly.
Developing Design Judgment Between Efficiency and Flexibility
‍I learned to balance the needs of both experienced HR users and small business owners by designing a hybrid workflow that blends AI suggestions with manual editing. This approach avoided a one-size-fits-all model and kept advanced features tucked away through progressive disclosure, preserving clarity for core users.
Deeply Understanding User Context Over Simply Building Features
‍This project reminded me that good design starts by asking why, not what. Realizing that recruiters often spend only 6–10 seconds on a resume, I restructured the interface to support fast, confident scanning. Mapping real-world user constraints helped me identify root problems and design with purpose.
Translating UX Principles into Actionable Patterns
‍Rather than applying heuristics mechanically, I practiced translating them into practical UI solutions: visual tags for fast resume filtering, layered layouts to reduce overload, and forgiving search interfaces. This taught me to adapt principles thoughtfully to real-world constraints.
Building Design Credibility Through Benchmarks and Data Thinking
‍In the absence of formal testing, I used competitor benchmarks (e.g., LinkedIn Recruiter, HireVue) and NN/g research to support my designs. I also defined preliminary KPIs such as search success rate and resume shortlist conversion, which laid the foundation for post-launch validation.
Reframing AI as Human-Centered Support, Not a Replacement
‍I explored how AI can enhance human judgment—using auto-matching suggestions paired with visual cues to reduce mental load. This shifted my perspective: AI should amplify usability, not complicate it, and UX design is the bridge that makes this possible.
Setting Expectations Before You Design
Working with limited resources and low UX maturity highlighted the importance of early expectation-setting. Without proper user research, teams often misinterpret surface-level needs. I learned that proactively managing alignment and constraints upfront is essential for a successful process.

The process

Problems

Solutions

Success Metrics

Validation & Future Optimization Plan

Design System

UI Mockup

Takeaway

Project Overview

Recruitment APP - 2024.09 — 2025.02

Product background

01 | Team Goals

02 | My Role & Deliverables

03 | Project Challenges

The process

User Journey

Summary of Persona

Problems

1. Cumbersome Job Posting Process

2. Hiring Inefficiencies and Search Limitations

3. Poor visual structure

4. Problem : Low application rate

Problem Statement

Solutions

1. Fast, Clear, Compelling: Better Job Posts with Less Effort

Before

After

2. Improve the search experience

Before

After

2.1. Smart Search & Efficient Filtering Design

3. Enhanced Visual Hierarchy

Before & After

Success Metrics

Validation & Future Optimization Plan

Design System

UI Mockup

Takeaway

Related Products

Welcome to contact me !