UX + UI DESIGN

WEBSITE

PROFESSIONAL

Developing a website for an AI-powered SaaS solution.

Developing a website for an AI-powered SaaS solution.

Developing a website for an AI-powered SaaS solution.

Recruit is an advanced platform solution powered by artificial intelligence, specifically designed to revolutionize talent acquisition processes. With over four years of research and development invested in AI technologies, Recruit is introducing a new recruitment method featuring advanced automation and sophisticated data analysis.

All work

All work

Next work

Next work

INTRODUCTION

Recruit provides a wide range of AI-powered tools that simplify the process of evaluating candidates from beginning to end. The platform uses exclusive AI models to assess candidates' capabilities, dependability, psychological profile, personality traits, technical skills, and more in a single interview session. The goal was to create a website that effectively showcases the advantages of Recruit to potential customers and helps them grasp the complete value of the product's capabilities.
Recruit provides a wide range of AI-powered tools that simplify the process of evaluating candidates from beginning to end. The platform uses exclusive AI models to assess candidates' capabilities, dependability, psychological profile, personality traits, technical skills, and more in a single interview session. The goal was to create a website that effectively showcases the advantages of Recruit to potential customers and helps them grasp the complete value of the product's capabilities.

MY ROLE

Solo Product Designer

THE TEAM

I collaborated with developers and the product manager, reporting directly to the VP.

TIMELINE

Approximately 2 months (part-time).

NDA NOTICE

Due to an NDA with the client, the details shared here are limited to what is permissible.

PROBLEM STATEMENT

A website for an AI-powered SaaS solution.

Recruit lacked a way to effectively communicate the diverse capabilities and benefits of the product to potential users across different industries. They also needed a way to attract clients, build recognition, and establish credibility. How should I create a website that clearly, engagingly, and accessibly demonstrates the benefits of Recruit's AI SaaS to potential users from various sectors?

Recruit lacked a way to effectively communicate the diverse capabilities and benefits of the product to potential users across different industries. They also needed a way to attract clients, build recognition, and establish credibility. How should I create a website that clearly, engagingly, and accessibly demonstrates the benefits of Recruit's AI SaaS to potential users from various sectors?

Recruit lacked a way to effectively communicate the diverse capabilities and benefits of the product to potential users across different industries. They also needed a way to attract clients, build recognition, and establish credibility. How should I create a website that clearly, engagingly, and accessibly demonstrates the benefits of Recruit's AI SaaS to potential users from various sectors?

Recruit lacked a way to effectively communicate the diverse capabilities and benefits of the product to potential users across different industries. They also needed a way to attract clients, build recognition, and establish credibility. How should I create a website that clearly, engagingly, and accessibly demonstrates the benefits of Recruit's AI SaaS to potential users from various sectors?

BREAKDOWN OF THE PROBLEM

👫Diverse audience needs

Different industries have unique requirements and pain points. Communicating how Recruit addresses these varied needs on a single platform could be challenging.

⚙️Complexity of features

Recruit offers a comprehensive suite of AI-powered tools, including candidate evaluation, psychological profiling, technical skills assessment, and more. Explaining these complex features in an easy-to-understand manner without overwhelming the user is crucial.

🧑‍💻Building trust and credibility

As a new platform without a previous online presence, establishing trust and credibility with potential users is vital. Prospective clients need assurance that Recruit is a reliable and effective solution.

RESEARCH

Creating a research plan

I developed a thorough plan to understand the specific needs of different industries and determine how best to communicate Recruit's capabilities. Given the project's scale and the client's requirements, I conducted stakeholder interviews, surveys within relevant industries, and a competitor analysis. Stakeholder interviews would provide valuable insights into the business objectives and allow for the validation of initial assumptions. Simultaneously, surveys would yield quantitative data to identify overarching trends and patterns across various industries. The competitor analysis was instrumental in helping me grasp industry norms and pinpoint opportunities for differentiation. This approach guarantees the website content is customized, compelling, and competitive, ultimately enhancing the platform's reach and effectiveness across diverse industries.

I developed a thorough plan to understand the specific needs of different industries and determine how best to communicate Recruit's capabilities. Given the project's scale and the client's requirements, I conducted stakeholder interviews, surveys within relevant industries, and a competitor analysis. Stakeholder interviews would provide valuable insights into the business objectives and allow for the validation of initial assumptions. Simultaneously, surveys would yield quantitative data to identify overarching trends and patterns across various industries. The competitor analysis was instrumental in helping me grasp industry norms and pinpoint opportunities for differentiation. This approach guarantees the website content is customized, compelling, and competitive, ultimately enhancing the platform's reach and effectiveness across diverse industries.

I developed a thorough plan to understand the specific needs of different industries and determine how best to communicate Recruit's capabilities. Given the project's scale and the client's requirements, I conducted stakeholder interviews, surveys within relevant industries, and a competitor analysis. Stakeholder interviews would provide valuable insights into the business objectives and allow for the validation of initial assumptions. Simultaneously, surveys would yield quantitative data to identify overarching trends and patterns across various industries. The competitor analysis was instrumental in helping me grasp industry norms and pinpoint opportunities for differentiation. This approach guarantees the website content is customized, compelling, and competitive, ultimately enhancing the platform's reach and effectiveness across diverse industries.

I developed a thorough plan to understand the specific needs of different industries and determine how best to communicate Recruit's capabilities. Given the project's scale and the client's requirements, I conducted stakeholder interviews, surveys within relevant industries, and a competitor analysis. Stakeholder interviews would provide valuable insights into the business objectives and allow for the validation of initial assumptions. Simultaneously, surveys would yield quantitative data to identify overarching trends and patterns across various industries. The competitor analysis was instrumental in helping me grasp industry norms and pinpoint opportunities for differentiation. This approach guarantees the website content is customized, compelling, and competitive, ultimately enhancing the platform's reach and effectiveness across diverse industries.

PROCESS

Competitor Analysis

The competitor analysis evaluated three prominent platforms: MyInterview, SparkHire, and HireVue. I examined their websites to understand how they present their AI-driven recruitment solutions, key features, user experience, and overall design aesthetics.

This involved assessing their navigation structures, information hierarchy, visual appeal, and the clarity of their messaging. Understanding their strengths and weaknesses, I gained valuable insights into industry standards and user expectations.

This involved assessing their navigation structures, information hierarchy, visual appeal, and the clarity of their messaging. Understanding their strengths and weaknesses, I gained valuable insights into industry standards and user expectations.

PRODUCT PERSONA

Meet Bessie

Bessie Cooper is a hiring manager at a mid-size company, recognized for her analytical approach to recruitment and selection. She stays updated with the latest IT industry trends to identify top talent and continuously seeks innovative methods to onboard the best candidates efficiently. Her primary goals include building a diverse and inclusive workforce, improving employee retention, and meeting hiring targets. Bessie values adequate resources, clear goals, and strong relationships, but often faces challenges like finding qualified candidates and meeting hiring targets within limited resources.

Bessie Cooper is a hiring manager at a mid-size company, recognized for her analytical approach to recruitment and selection. She stays updated with the latest IT industry trends to identify top talent and continuously seeks innovative methods to onboard the best candidates efficiently. Her primary goals include building a diverse and inclusive workforce, improving employee retention, and meeting hiring targets. Bessie values adequate resources, clear goals, and strong relationships, but often faces challenges like finding qualified candidates and meeting hiring targets within limited resources.

Bessie Cooper is a hiring manager at a mid-size company, recognized for her analytical approach to recruitment and selection. She stays updated with the latest IT industry trends to identify top talent and continuously seeks innovative methods to onboard the best candidates efficiently. Her primary goals include building a diverse and inclusive workforce, improving employee retention, and meeting hiring targets. Bessie values adequate resources, clear goals, and strong relationships, but often faces challenges like finding qualified candidates and meeting hiring targets within limited resources.

Bessie Cooper is a hiring manager at a mid-size company, recognized for her analytical approach to recruitment and selection. She stays updated with the latest IT industry trends to identify top talent and continuously seeks innovative methods to onboard the best candidates efficiently. Her primary goals include building a diverse and inclusive workforce, improving employee retention, and meeting hiring targets. Bessie values adequate resources, clear goals, and strong relationships, but often faces challenges like finding qualified candidates and meeting hiring targets within limited resources.

I created this persona to represent our key user groups, focusing on hiring managers. This helped me tailor the design to address specific pain points and goals.

IDEATION

Designing for usability

After conducting research, I began working on user journeys and user flows that aligned with the specific needs of our persona, as well as a site map to ensure a logical navigation structure. These allowed me to kickstart the development of a comprehensive IA, wireframes, UI, and interactive prototypes. I focused on refining the user experience and visual appeal by iterating on the design. I took a user-centered approach, incorporating feedback from the stakeholders at each stage to improve usability and accessibility.

After conducting research, I began working on user journeys and user flows that aligned with the specific needs of our persona, as well as a site map to ensure a logical navigation structure. These allowed me to kickstart the development of a comprehensive IA, wireframes, UI, and interactive prototypes. I focused on refining the user experience and visual appeal by iterating on the design. I took a user-centered approach, incorporating feedback from the stakeholders at each stage to improve usability and accessibility.

After conducting research, I began working on user journeys and user flows that aligned with the specific needs of our persona, as well as a site map to ensure a logical navigation structure. These allowed me to kickstart the development of a comprehensive IA, wireframes, UI, and interactive prototypes. I focused on refining the user experience and visual appeal by iterating on the design. I took a user-centered approach, incorporating feedback from the stakeholders at each stage to improve usability and accessibility.

After conducting research, I began working on user journeys and user flows that aligned with the specific needs of our persona, as well as a site map to ensure a logical navigation structure. These allowed me to kickstart the development of a comprehensive IA, wireframes, UI, and interactive prototypes. I focused on refining the user experience and visual appeal by iterating on the design. I took a user-centered approach, incorporating feedback from the stakeholders at each stage to improve usability and accessibility.

Sitemap created for the website based on an extensive card sorting exercise multiple participants.

PROCESS

Desktop and mobile hi-fi wireframes

The hi-fi wireframes were developed to offer a detailed and realistic representation of the final product. This allowed for clear and precise visualization of the design elements and user interface, crucial for effectively communicating the design to stakeholders. It ensured they could fully understand and engage with the proposed layout and functionality.

I gathered valuable feedback from stakeholders early in the design process, which helped me identify potential issues and improvements before proceeding.

Desktop + Mobile - Home page wireframes

PROCESS

UI

The first UI version was created after extensive research that provided valuable insights into the varied needs of different industries, allowing the design to communicate the platform’s capabilities. However, stakeholders were unhappy with the initial design and introduced new requirements.

This feedback necessitated a redesign to better align with their expectations and integrate the new specifications, ensuring the final product met user and stakeholder needs.

Desktop + Mobile - Home page first UI version

PROCESS

New UI

The UI was redesigned needing a modern look that avoids the trend of dark UIs on AI products and incorporates a clear and comprehensive data presentation following the new feedback. Stakeholders found the initial design "flat" and requested new requirements like removing the initially requested pricing sections, highlighting more prominent testimonials, and presenting adoption product benefits more clearly and prominently.

In response, the new design focused on enhancing the visual appeal while ensuring clarity and accessibility of information. Key features such as effortless scheduling, avatar-led video interviews, customized interview options, and deep insights into candidate analysis were prominently showcased. This redesign not only improved the overall user experience but also ensured the platform's capabilities were effectively communicated, meeting the updated needs and expectations of the stakeholders and ultimately getting the UI design approved.

Desktop + Mobile - Home page new UI

PROCESS

Website approved UI

Once the new design was approved, I designed the rest of the screens, ensuring consistency and alignment with the UI visual style.

These additional screens were then presented to the stakeholders for review. During this review process, I incorporated their feedback to make necessary refinements and adjustments, ensuring that the design met their expectations and business objectives. The final set of screens showcased a cohesive and comprehensive user experience, aligning with the strategic goals and user needs identified earlier in the project.

Desktop + Mobile - API webpage approved UI

PROCESS

Prototype and usability test

After all the screens were finished and approved, I started a prototype and planned usability testing. These two steps were intended to confirm research findings and validate the design, but they were ultimately skipped based on a client's decision. The client opted to focus on immediate deployment and iteration post-launch, allowing for quicker delivery and the ability to remain agile for future improvements based on real-world user feedback.

After all the screens were finished and approved, I started a prototype and planned usability testing. These two steps were intended to confirm research findings and validate the design, but they were ultimately skipped based on a client's decision. The client opted to focus on immediate deployment and iteration post-launch, allowing for quicker delivery and the ability to remain agile for future improvements based on real-world user feedback.

After all the screens were finished and approved, I started a prototype and planned usability testing. These two steps were intended to confirm research findings and validate the design, but they were ultimately skipped based on a client's decision. The client opted to focus on immediate deployment and iteration post-launch, allowing for quicker delivery and the ability to remain agile for future improvements based on real-world user feedback.

After all the screens were finished and approved, I started a prototype and planned usability testing. These two steps were intended to confirm research findings and validate the design, but they were ultimately skipped based on a client's decision. The client opted to focus on immediate deployment and iteration post-launch, allowing for quicker delivery and the ability to remain agile for future improvements based on real-world user feedback.

PROCESS

Assets handover

The assets handover process was executed to ensure a seamless transition from design to development. Using Figma, the primary tool employed throughout the project, high-fidelity wireframes, style guides, and all design and process assets were organized and shared with the client.

Project reflections and observations:

This was my first project for a real client, providing a significant learning experience that deepened my understanding of the design process and taught me to be flexible. Regular stakeholder communication was essential to align the project vision with their expectations, ensuring collaboration and satisfaction. Flexibility and adaptability were crucial, and while user-centered design principles are important, practical constraints and business needs often necessitate quick pivots and compromises.

Overall, this experience reinforced the need to balance ideal design practices with practical solutions, value stakeholder engagement, and remain agile in responding to client needs.


If the project had continued, I would have focused on conducting usability tests and gathering feedback from real users to confirm or iterate the design. This approach would help identify usability issues and areas for improvement, ensuring the final product meets user needs. By incorporating real-world feedback, we could make data-driven adjustments, enhancing both the user experience and the effectiveness of the design.

This was my first project for a real client, providing a significant learning experience that deepened my understanding of the design process and taught me to be flexible. Regular stakeholder communication was essential to align the project vision with their expectations, ensuring collaboration and satisfaction. Flexibility and adaptability were crucial, and while user-centered design principles are important, practical constraints and business needs often necessitate quick pivots and compromises.

Overall, this experience reinforced the need to balance ideal design practices with practical solutions, value stakeholder engagement, and remain agile in responding to client needs.


If the project had continued, I would have focused on conducting usability tests and gathering feedback from real users to confirm or iterate the design. This approach would help identify usability issues and areas for improvement, ensuring the final product meets user needs. By incorporating real-world feedback, we could make data-driven adjustments, enhancing both the user experience and the effectiveness of the design.

This was my first project for a real client, providing a significant learning experience that deepened my understanding of the design process and taught me to be flexible. Regular stakeholder communication was essential to align the project vision with their expectations, ensuring collaboration and satisfaction. Flexibility and adaptability were crucial, and while user-centered design principles are important, practical constraints and business needs often necessitate quick pivots and compromises.

Overall, this experience reinforced the need to balance ideal design practices with practical solutions, value stakeholder engagement, and remain agile in responding to client needs.


If the project had continued, I would have focused on conducting usability tests and gathering feedback from real users to confirm or iterate the design. This approach would help identify usability issues and areas for improvement, ensuring the final product meets user needs. By incorporating real-world feedback, we could make data-driven adjustments, enhancing both the user experience and the effectiveness of the design.

This was my first project for a real client, providing a significant learning experience that deepened my understanding of the design process and taught me to be flexible. Regular stakeholder communication was essential to align the project vision with their expectations, ensuring collaboration and satisfaction. Flexibility and adaptability were crucial, and while user-centered design principles are important, practical constraints and business needs often necessitate quick pivots and compromises.

Overall, this experience reinforced the need to balance ideal design practices with practical solutions, value stakeholder engagement, and remain agile in responding to client needs.


If the project had continued, I would have focused on conducting usability tests and gathering feedback from real users to confirm or iterate the design. This approach would help identify usability issues and areas for improvement, ensuring the final product meets user needs. By incorporating real-world feedback, we could make data-driven adjustments, enhancing both the user experience and the effectiveness of the design.

All work

All work

Next work

Next work