HUI SZE WAI ANGEL

UXUI

Design

Animation/Illustration

About

HUI SZE WAI

UXUI

Design

Animation/Illustration

About

Client Project

Client Project

Lobahn Connect™:
Revolutionizing Talent Matching and Recruitment Dynamics

Lobahn Connect™:
Revolutionizing Talent Matching and Recruitment Dynamics

Overview

Lobahn Connect™ is an innovative talent matching app designed to revolutionize the recruitment landscape for both top talent and employers. The platform emphasizes quality matches through verified credentials, skills assessments, and experience validation, streamlining the recruitment process. This approach eliminates the frustration of sorting through unqualified applications, making hiring more efficient for employers while helping qualified candidates stand out. Acting as a bridge between vetted professionals and companies seeking reliable talent, Lobahn Connect™ offers a seamless experience for both parties.

Lobahn Connect™ is an innovative talent matching app designed to revolutionize the recruitment landscape for both top talent and employers. The platform emphasizes quality matches through verified credentials, skills assessments, and experience validation, streamlining the recruitment process. This approach eliminates the frustration of sorting through unqualified applications, making hiring more efficient for employers while helping qualified candidates stand out. Acting as a bridge between vetted professionals and companies seeking reliable talent, Lobahn Connect™ offers a seamless experience for both parties.

Project Type & Involvement

work for Lobahn Connect™ - User Research, App Design

work for Lobahn Connect™ - User Research, App Design

Timeline

22th November 2024 - 2nd January 2025

22th November 2024 - 2nd January 2025

Platform

Web app - IOS & Android

Web app - IOS & Android

My Role

  • Collaboration: Engaged in discussions with the founder and programmer to refine the UI/UX design based on user feedback and competitor analysis of other job platforms.

  • Research: Conducted thorough competitor research to identify unique selling propositions (USPs) that differentiate our platform in the market.

  • Workshops: Facilitated product-building workshops with Palo IT, focusing on crafting the elevator pitch and establishing a product vision board, along with user stories and main features.

  • User Experience Optimization: Aimed to minimize user drop-off during the onboarding process by enhancing the UX/UI, ensuring a captivating experience that encourages user engagement.

  • Brand Development: Worked on creating a strong brand identity, integrating essential features that cater to user needs.

  • Collaboration: Engaged in discussions with the founder and programmer to refine the UI/UX design based on user feedback and competitor analysis of other job platforms.

  • Research: Conducted thorough competitor research to identify unique selling propositions (USPs) that differentiate our platform in the market.

  • Workshops: Facilitated product-building workshops with Palo IT, focusing on crafting the elevator pitch and establishing a product vision board, along with user stories and main features.

  • User Experience Optimization: Aimed to minimize user drop-off during the onboarding process by enhancing the UX/UI, ensuring a captivating experience that encourages user engagement.

  • Brand Development: Worked on creating a strong brand identity, integrating essential features that cater to user needs.

Objective

  • Enhance user engagement by minimizing drop-off rates during onboarding

  • Captivating users through improved UX/UI

  • Establishing a strong brand identity while integrating essential features

  • Enhance user engagement by minimizing drop-off rates during onboarding

  • Captivating users through improved UX/UI

  • Establishing a strong brand identity while integrating essential features

Elevator Pitch

Palo IT facilitated a product-building workshop with our team, including the founder, marketer, programmer, and myself. During the workshop, we developed the elevator pitch, product vision board, and user stories. We gained a clear understanding of everyone's ideas, collectively defined the unique selling proposition (USP) and workflow, and brought all these elements together.


Lobahn Connect™, an innovative talent matching app designed to revolutionize the recruitment landscape for both top talent and employers.

For candidates seeking career advancement, our platform offers a frictionless, passive job search experience, intelligently matching you with superior opportunities tailored to your personal criteria—without the need for a middleman. Showcase your full potential through a comprehensive profile that captures your skills and aspirations beyond the traditional CV.

For employers, Lobahn Connect™ streamlines recruitment by providing faster, better, and cost-effective talent screening, enabling you to discover hidden talent and understand candidate backgrounds not reflected in their CVs. Experience high-quality matches that align with your specific needs, all through a user-friendly online interface.

Palo IT facilitated a product-building workshop with our team, including the founder, marketer, programmer, and myself. During the workshop, we developed the elevator pitch, product vision board, and user stories. We gained a clear understanding of everyone's ideas, collectively defined the unique selling proposition (USP) and workflow, and brought all these elements together.


Lobahn Connect™, an innovative talent matching app designed to revolutionize the recruitment landscape for both top talent and employers.

For candidates seeking career advancement, our platform offers a frictionless, passive job search experience, intelligently matching you with superior opportunities tailored to your personal criteria—without the need for a middleman. Showcase your full potential through a comprehensive profile that captures your skills and aspirations beyond the traditional CV.

For employers, Lobahn Connect™ streamlines recruitment by providing faster, better, and cost-effective talent screening, enabling you to discover hidden talent and understand candidate backgrounds not reflected in their CVs. Experience high-quality matches that align with your specific needs, all through a user-friendly online interface.

Pain Point

  • Traditional job platforms lack quality control

  • HR teams waste time screening unqualified candidates

  • Companies struggle with high volume, low-quality applications

  • Long hiring cycles affecting business productivity

App Core Features (Candidate)

  1. Passive Job Search

Candidates can remain in their current roles while the app's AI actively matches them with superior job opportunities tailored to their personal criteria.

  1. Comprehensive Profile Creation

Users can create detailed profiles that showcase their skills, aspirations, and preferences beyond what traditional CVs convey, allowing for a more holistic view of their qualifications.

  1. Direct Connections

The app enables candidates to connect directly with employers without intermediaries, ensuring privacy until the candidate chooses to engage.

4. Personalized Matching

The platform uses sophisticated algorithms to provide high-quality matches based on various criteria, including desired position titles, functional areas, industry sectors, and keywords.

  1. User-Friendly Onboarding

A streamlined onboarding process encourages candidates to input their information efficiently, minimizing drop-off rates and enhancing user engagement.

6. Real-Time Updates

Candidates receive notifications about profile views, saved CVs, and new matches, keeping them informed about their job search progress.

App Core Features (Employer)

  1. Access to Hidden Talent

Employers can create detailed job listings that specify position titles, with their desired candidate functional areas, industry sectors, and desired qualifications for matching, ensuring clarity in their recruitment needs

  1. Customizable Job Listings

Employers can tap into a pool of high-caliber candidates who may not be actively searching for jobs but are open to the right opportunities, broadening their talent search

  1. Fast Recruitment Process

By connecting directly with pre-matched candidates who meet specific criteria, employers can easily swipe like on dating apps to connect, move to the next, or decline the candidate.

4. Comprehensive Candidate Profiles

Employers gain insights into candidates' backgrounds and skills that are not typically included in traditional CVs, allowing for a deeper understanding of potential hires

  1. User-Friendly Onboarding

A streamlined onboarding process encourages candidates to input their information efficiently, minimizing drop-off rates and enhancing user engagement.


6. Real-Time Analytics

Employers receive valuable statistics such as the number of candidate profile views, replies, and connections made. This data helps assess the effectiveness of job postings and candidate engagement.

UI References

During the design phase, I conducted extensive online research to gather UI references for each feature.

During the design phase, I conducted extensive online research to gather UI references for each feature.

Design System

A design system was created for each operating system incorporating the set of visual elements like colour, typography and UI components.

A design system was created for each operating system incorporating the set of visual elements like colour, typography and UI components.

Components

A comprehensive component library was created, consisting of various UI elements such as buttons, and navigation components, ensuring consistency and usability throughout the interface.

A comprehensive component library was created, consisting of various UI elements such as buttons, and navigation components, ensuring consistency and usability throughout the interface.

Illustrations

Use blue to represent candidate & green for the employer, while yellow as a supporting colour of both.

Use blue to represent candidate & green for the employer, while yellow as a supporting colour of both.

MVP

Final Design Preview

Final Thoughts

Working on the Lobahn Connect™ talent matching app has been a profoundly enriching experience that allowed me to explore innovative UI/UX design solutions for a dual-perspective platform. The project presented unique challenges, particularly in creating an effective user interface that accommodates both candidates and employers within a single application, rather than splitting it into two separate apps, which is common among larger companies. This decision led to interesting discussions with the founder, resulting in a focus on a single screen for initial user interactions. We agreed that starting with one perspective would be beneficial for users transitioning from the website.


One of the critical insights gained from the product-building workshop was the need to clearly communicate the app's unique selling proposition (USP) upon first landing. Initially, the USP was not immediately apparent, prompting me to redesign the onboarding experience to include three screens that effectively highlight our key features. This change aimed to attract users' attention and provide them with a clear understanding of what sets this app apart.

Working on the Lobahn Connect™ talent matching app has been a profoundly enriching experience that allowed me to explore innovative UI/UX design solutions for a dual-perspective platform. The project presented unique challenges, particularly in creating an effective user interface that accommodates both candidates and employers within a single application, rather than splitting it into two separate apps, which is common among larger companies. This decision led to interesting discussions with the founder, resulting in a focus on a single screen for initial user interactions. We agreed that starting with one perspective would be beneficial for users transitioning from the website.


One of the critical insights gained from the product-building workshop was the need to clearly communicate the app's unique selling proposition (USP) upon first landing. Initially, the USP was not immediately apparent, prompting me to redesign the onboarding experience to include three screens that effectively highlight our key features. This change aimed to attract users' attention and provide them with a clear understanding of what sets this app apart.

For employers, I revised the onboarding experience to focus solely on essential company details rather than requiring a chain of job position uploads immediately after profile completion. This change simplifies the initial setup, allowing employers to complete their profiles quickly. After finishing the onboarding, users are presented with a completion page that offers two clear options: "Post a Listing" or "Take a look around first." This streamlined approach contrasts with the candidate onboarding process, where completing both profiles and job preferences is essential for effective algorithmic matching.


The rationale behind this distinction lies in the nature of this app's functionality. For candidates, completing their profiles is crucial as it directly impacts their matching potential. This design aims to reduce drop-off rates and enhance user engagement by making the onboarding experience feel less daunting.

For candidate screens, the original user experience was cluttered and could potentially overwhelm users during onboarding. Recognizing this, I restructured the onboarding process by grouping similar questions together rather than presenting one question per page. This approach aligns with best practices for limiting the number of onboarding screens while accommodating this app's reliance on user information for matching. With 28 questions in total, mandatory questions are marked with red stars to guide candidates through the onboarding process efficiently, ensuring they can quickly reach the home page and start receiving matches and included a progress bar to enhance user navigation.


Additionally, I created a full-page color graphic outlining "4 steps to set up your professional profile," "Just 2 more steps to record your preferences," and "Fantastic!" ensuring users are well-informed about their progress.


This thoughtful design not only facilitates a smoother onboarding process but also increases the likelihood of candidates returning to the app after their initial setup.

The way statuses are presented for employers and candidates differs significantly. Initially, I displayed statuses as plain text, but the founder suggested using icons instead. This led to thoughtful design changes.


For candidates, there are six different status indicators including sent, delivered, seen, saved, connected, and declined. The first status appears after they click the "connect" button when they see a post listing they are interested in, and the "connect" button is represented by a tick icon. Therefore, using ticks for initial steps makes sense.

  • Sent = 1 grey tick

  • Delivered = 2 grey ticks

  • Seen = 2 blue ticks

Users are familiar with WhatsApp or other platforms where this kind of presentation is totally fine. However, from the fourth stage onward ("saved"), using ticks became less effective due to compactness and clarity issues. Therefore, I changed these icons to more direct symbols that users can easily understand without tooltips.

  • Saved = a file with an arrow pointing down

  • Connected = chat bubble

  • Declined = cross

You might question why the "connected" status doesn't use a tick icon. The reason for this is that "connected" refers to both parties making a connection, not just the candidate connecting and sharing their profile. Using a tick again would confuse the process. To align with the employer's perspective after they also connect with the candidate which means the chat is initiated, the chat icon is used to represent this interaction.

The way statuses are presented for employers and candidates differs significantly. Initially, I displayed statuses as plain text, but the founder suggested using icons instead. This led to thoughtful design changes.


For candidates, there are six different status indicators including sent, delivered, seen, saved, connected, and declined. The first status appears after they click the "connect" button when they see a post listing they are interested in, and the "connect" button is represented by a tick icon. Therefore, using ticks for initial steps makes sense.

  • Sent = 1 grey tick

  • Delivered = 2 grey ticks

  • Seen = 2 blue ticks

Users are familiar with WhatsApp or other platforms where this kind of presentation is totally fine. However, from the fourth stage onward ("saved"), using ticks became less effective due to compactness and clarity issues. Therefore, I changed these icons to more direct symbols that users can easily understand without tooltips.

  • Saved = a file with an arrow pointing down

  • Connected = chat bubble

  • Declined = cross

You might question why the "connected" status doesn't use a tick icon. The reason for this is that "connected" refers to both parties making a connection, not just the candidate connecting and sharing their profile. Using a tick again would confuse the process. To align with the employer's perspective after they also connect with the candidate which means the chat is initiated, the chat icon is used to represent this interaction.

From the employer's viewpoint, ticks are not utilized because on other interfaces, they typically signify a "connect" action. The status indicators for employers include unseen, seen, saved, and chat started. A single tick might mislead them into assuming a connection with the candidate has been established when it has not. To prevent misunderstandings and ensure alignment with other employer-side mechanisms, I have restructured the presentation. These icons are designed to be easily comprehensible for employers, even without the need for additional tooltips.

  • Unseen = red dot

  • Seen = pure white block no icons

  • Saved = a file with an arrow pointing down

  • Chat started = chat bubble


Additionally, I had also contemplated using other terms such as "new" or "pending" before ultimately deciding to replace them with "unseen." However, the term "pending" could lead to a misconception, suggesting stages where the user has initiated an action, when in fact, it's the system that is processing it, which is inaccurate. While "new" is not as descriptive as "unseen," which effectively conveys a status distinct from "seen." With the adjustment to "unseen" and the change from "viewed" to "seen," the term "seen" was selected to harmonize with "unseen," as there is no equivalent term like "unviewed" in our system.

From the employer's viewpoint, ticks are not utilized because on other interfaces, they typically signify a "connect" action. The status indicators for employers include unseen, seen, saved, and chat started. A single tick might mislead them into assuming a connection with the candidate has been established when it has not. To prevent misunderstandings and ensure alignment with other employer-side mechanisms, I have restructured the presentation. These icons are designed to be easily comprehensible for employers, even without the need for additional tooltips.

  • Unseen = red dot

  • Seen = pure white block no icons

  • Saved = a file with an arrow pointing down

  • Chat started = chat bubble


Additionally, I had also contemplated using other terms such as "new" or "pending" before ultimately deciding to replace them with "unseen." However, the term "pending" could lead to a misconception, suggesting stages where the user has initiated an action, when in fact, it's the system that is processing it, which is inaccurate. While "new" is not as descriptive as "unseen," which effectively conveys a status distinct from "seen." With the adjustment to "unseen" and the change from "viewed" to "seen," the term "seen" was selected to harmonize with "unseen," as there is no equivalent term like "unviewed" in our system.

Besides, I recognized the importance of using slightly different terminology for presenting similar concepts from the dual perspectives of candidates and employers.


For instance, when asking for job preferences, we use terms like "desired" and "target" to convey a sense of choice for candidates, emphasizing that they can select their preferred jobs. Conversely, from the employer's perspective, only "desire" is more appropriately applied to describe aspects of a candidate's background and qualifications.


I implemented a system where if an employer declines a candidate's profile, that profile will no longer be visible to them. This mirrors the process for candidates who decline a position listing. The "declined" status is only shown to candidates regarding employers' decisions about their matches.


Hence, on the chat page, for candidates, the main chat screen displays essential details such as the company logo, job position applied for, company name, location, and the latest message. However, the specific name of the person they are chatting with is not shown until they click into a particular chat. This design choice allows candidates to focus on the job context before engaging in conversation. In contrast, the employer's chat interface highlights the candidate's name, their latest position, and the most recent message. This approach ensures that employers can quickly identify who they are communicating with and understand their background at a glance.


While this may seem like a basic practice, it’s crucial to maintain clarity and consistency across both sides of the platform.

Besides, I recognized the importance of using slightly different terminology for presenting similar concepts from the dual perspectives of candidates and employers.


For instance, when asking for job preferences, we use terms like "desired" and "target" to convey a sense of choice for candidates, emphasizing that they can select their preferred jobs. Conversely, from the employer's perspective, only "desire" is more appropriately applied to describe aspects of a candidate's background and qualifications.


I implemented a system where if an employer declines a candidate's profile, that profile will no longer be visible to them. This mirrors the process for candidates who decline a position listing. The "declined" status is only shown to candidates regarding employers' decisions about their matches.


Hence, on the chat page, for candidates, the main chat screen displays essential details such as the company logo, job position applied for, company name, location, and the latest message. However, the specific name of the person they are chatting with is not shown until they click into a particular chat. This design choice allows candidates to focus on the job context before engaging in conversation. In contrast, the employer's chat interface highlights the candidate's name, their latest position, and the most recent message. This approach ensures that employers can quickly identify who they are communicating with and understand their background at a glance.


While this may seem like a basic practice, it’s crucial to maintain clarity and consistency across both sides of the platform.

Overall, this project has not only honed my skills in UI/UX design but also deepened my understanding of how to create intuitive interfaces that cater to diverse user needs while effectively communicating essential information. The collaborative nature of this project, involving insights from the Lobahn Connect founder, marketers, programmer, and Palo IT members, has been invaluable in shaping a product that stands out in the competitive talent matching landscape.

Overall, this project has not only honed my skills in UI/UX design but also deepened my understanding of how to create intuitive interfaces that cater to diverse user needs while effectively communicating essential information. The collaborative nature of this project, involving insights from the Lobahn Connect founder, marketers, programmer, and Palo IT members, has been invaluable in shaping a product that stands out in the competitive talent matching landscape.

Up Next

Hollo:

Empowering Cancer Patients with Support and Comprehensive Resources

Hollo:

Empowering Cancer Patients with Support and Comprehensive Resources

© Copyright Hui Sze Wai 2023

HUI SZE WAI

HUI SZE WAI

© Copyright Hui Sze Wai 2023