A design system created to enhance the recruitment process of an international B2B product.


Workforce360 is a SaaS B2B company that focuses on recruiting candidates overseas with hiring organizations. Through collaboration and a design process focused on visuals, my partner and I implemented research and design to enhance the UX of their recruitment process.


Workforce360 is currently experiencing issues with its system regarding the recruitment process known as the “Man Power Requisition” or MPR. The MPR process includes hiring international candidates for work in various countries. With this, the problem to solve was how might we implement consistency and simplicity to enhance the user experience of Workforce360 and its MPR flow?


The overall recruitment flow improved with the introduction of an accessible and simple design system. I was responsible for curating a new and improved design system and re-designing key screens using the new design components.

The Team

  • Technology Lead
  • Software Development
  • IT Support
  • UX Researcher
  •  UI Designer (Me)

Project Goals

Project Constraints

Users & Audience

For agents and clients hiring candidates for work in the United Arab Emirates and Asia.

Process Highlights

The Design Process

Discovering the Problem: The Basics

To understand the problem thoroughly, my partner and I were granted access to both the agent and client portal of the website. To clarify, the ‘Man-Power Requisition’ process involves three individuals: the client, the agent, and the candidate.

The Client: Has full access to the system via the client portal. They are in charge of adding documents associated with the candidate(s), recruit candidates to organizations.

The Agent: Full access to the system via the agent portal. The role of the agent is to coordinate with the client and candidate throughout the recruitment process.

The Candidate: Registers under an agent to seek a job in another country. The candidate has no system access to the portal.

Defining the Problem: Identifying Pain Points

To better understand the complexity behind the 25-minute MPR process of assigning a candidate through both a client and agent portal, we began with identifying the pain points.

Creating a specific goal such as working on reducing at least 3 screens helped to smoothly transition into the ideation phase of finding a potential solution.

The current MPR process flow including both the client and agent roles.

Ideating the Solution: Time to Synthesize

To form a rapid solution given our brief time, we decided it was best to utilize screenshots displaying the current website in order to synthesize the user flow. We presented these suggestions to the team for a couple of weeks. For this part of the process, I worked on the agent's role in the MPR process while my partner focused on the client role.

Together we reduced over 20 screens in the recruitment flow.

Research: Competitive Analyses

*This part of the project was completed by my partner.

In order to gain more insight, my partner conducted a brief analysis of a few B2B websites.

Designing the Solution: The New Design System

A new design system was necessary to create as it would establish consistency, accessibility and simplicity to the overall user experience of Workforce360 and the MPR flow.

In order to create a new design system, my partner and I reviewed the pain points in the initial user flow as well as incorporating market research and our persona to make the solution as user-centric as possible.

When creating the design system, I divided the process into three separate parts: components, patterns, and visuals.

Components: Buttons

For the button re-design I prioritized text on each button and a larger touch target and creating buttons with icons alongside text.

Components: Form Fields

The interactive fields on the website lacked consistency in both their size and layout. Original fields had no pre-filled text prompts inside that would help users complete their tasks. I created larger form fields with the inclusion of pre-filled text labels.

Patterns: Status Messages

Every action needs a consistent reaction. Workforce360 implemented various messages each time a user inputted data. I curated a few feedback messages displaying positive and negative information.

Visuals: Color Palette

The reinvented colors for Workforce360 are intended to be accessible, versatile, and simple.

Visuals: Iconography

Similar to colors, icons are meant to be simple and easy to understand. Each icon represents the action alongside it while also displaying simplicity and consistency.

Visuals: Typography

Workforce360’s typography depicted inaccessibility as the font style and size were considered too small. To change this, ‘Helvetica Neue’ was introduced as a new font with improved legibility.

Designing the Solution: High-Fidelity Screens

In order to bring the design system together and provide Workforce360 with a more realistic feel, I redesigned a few screens in the MPR process. These included the screens my partner and I analyzed with design suggestions.

Chart view (Original)

Chart view (NEW)

Status message (Original)

Status message (NEW)

Modal (Original)

Modal (NEW)

Candidate's document view (Original)

Candidate's document view (NEW)

The redesign involves:
- greater accessibility
- inclusion of tabs for greater differentiation between data
- increased font size and enhanced typography
- larger CTAs
- limited to none icons used for comprehension

Translating Design to Development

With the creation of a broad design system, my partner and I delivered our handoff via CSS3 in order to facilitate the developer in rebuilding Workforce360. While designing components, it was imperative in making sure the elements would smoothly transition into code. This was also verified with our developer present in each team meeting.

Impacts, Thoughts, and Takeaways

Throughout this project, I was able to understand adaptability to anything regardless of its complexity level and embracing ambiguity as a designer. Given the limited timeline of this project, my partner and I were unable to conduct user testing. If assessing the new designs through key-performance indicators was possible it would have provided the team with insight on whether the MPR flow became easier to follow for any kind of user.

What I Learned...

• Finding a balance between collaboration and user needs.
• Becoming comfortable with ambiguity.
• Organizing a design system through various parts.
• Translating design to code via CSS3.