Skills assessment platform

Skills assessment platform - Toggl Hire landing page preview - Featuring a clean light layout, central dashboard UI mockups for a Java Full Stack Developer pipeline, and floating candidate avatars with circular score percentages.
Project overview

Toggl Hire – a skills-first recruiting platform within the Toggl product family. Toggl Hire automates candidate screening, enabling hiring teams to easily assess, shortlist, and select the best talent through intuitive, skill-based tests.



Our aim was to enhance Toggl Hire's web presence with a clear, engaging redesign, using custom illustrations and thoughtful interactions to communicate product value and improve user experience.

Tasks
  • Website redesign based on the new brand visual line
  • Collaborate with Toggl Hire marketing team, create different concepts, and do A/B testing to improve conversion
  • Design a set of custom illustrations that represent the product features
  • Implement all the new designs via Webflow
Tools
Figma
Figma
Adobe Illustrator
Adobe Illustrator
Webflow
Webflow
Solutions
Outcome

A new brand-aligned website with structured content, clear CTAs, best-performed conversion based on A/B testing, and optimized for mobile devices.

Solutions

Website redesign

After successfully launching the initial version (view it here), we partnered with Toggl Hire again to refresh the design and improve the overall user experience.

Skills assessment platform – Toggl Hire landing page and internal feature layout preview with light and dark themes, pipeline dashboards, and structured workflow sections.
Skills assessment platform – Toggl Hire landing page and internal feature layout preview with light and dark themes, pipeline dashboards, and structured workflow sections.

Website redesign

After successfully launching the initial version (view it here), we partnered with Toggl Hire again to refresh the design and improve the overall user experience.

Website redesign

After successfully launching the initial version (view it here), we partnered with Toggl Hire again to refresh the design and improve the overall user experience.

Skills assessment platform – Toggl Hire landing page and internal feature layout preview with light and dark themes, pipeline dashboards, and structured workflow sections.

Website redesign

After successfully launching the initial version (view it here), we partnered with Toggl Hire again to refresh the design and improve the overall user experience.

Skills assessment platform – Toggl Hire landing page and internal feature layout preview with light and dark themes, pipeline dashboards, and structured workflow sections.

Website redesign

After successfully launching the initial version (view it here), we partnered with Toggl Hire again to refresh the design and improve the overall user experience.

Skills assessment platform – Toggl Hire landing page and internal feature layout preview with light and dark themes, pipeline dashboards, and structured workflow sections.

Products & Use cases

When creating these product pages, we began by understanding users’ needs: clarity over complexity, ease of navigation, and meaningful engagement. Our goal was to transform dense product details into an approachable story.

Skills assessment platform – Homepage and feature section preview - Showing integrations and customization options.
Skills assessment platform – Homepage and feature section preview - Showing integrations and customization options.

Products & Use cases

When creating these product pages, we began by understanding users’ needs: clarity over complexity, ease of navigation, and meaningful engagement. Our goal was to transform dense product details into an approachable story.

Products & Use cases

When creating these product pages, we began by understanding users’ needs: clarity over complexity, ease of navigation, and meaningful engagement. Our goal was to transform dense product details into an approachable story.

Skills assessment platform – Homepage and feature section preview - Showing integrations and customization options.
Skills assessment platform – Use cases - Three side-by-side landing page variations displaying dark purple hero sections, different headline variants, and automated screening workflows.

Products & Use cases

When creating these product pages, we began by understanding users’ needs: clarity over complexity, ease of navigation, and meaningful engagement. Our goal was to transform dense product details into an approachable story.

Skills assessment platform – Homepage and feature section preview - Showing integrations and customization options.Skills assessment platform – Use cases - Three side-by-side landing page variations displaying dark purple hero sections, different headline variants, and automated screening workflows.Skills assessment platform – Use cases - Three side-by-side landing page variations displaying dark purple hero sections, structured feature value propositions, and data-driven candidate evaluation dashboards.Skills assessment platform – Use cases - Three side-by-side landing page variations displaying dark purple hero sections, structured product feature breakdowns, and illustrative pipeline dashboard graphics.

Products & Use cases

When creating these product pages, we began by understanding users’ needs: clarity over complexity, ease of navigation, and meaningful engagement. Our goal was to transform dense product details into an approachable story.

Skills assessment platform – Homepage and feature section preview - Showing integrations and customization options.Skills assessment platform – Use cases - Three side-by-side landing page variations displaying dark purple hero sections, different headline variants, and automated screening workflows.Skills assessment platform – Use cases - Three side-by-side landing page variations displaying dark purple hero sections, structured feature value propositions, and data-driven candidate evaluation dashboards.Skills assessment platform – Use cases - Three side-by-side landing page variations displaying dark purple hero sections, structured product feature breakdowns, and illustrative pipeline dashboard graphics.

Pricing page

We designed an intuitive pricing interface to clearly showcase plan features and its differences, making it easy for users to compare options at a glance. This approach simplifies decision-making and helps users confidently select the best plan for their needs.

Skills assessment platform – Pricing and subscription tier preview - Showing a comparative feature matrix, tiered plan cards, and platform value metrics.
Skills assessment platform – Pricing and subscription tier preview - Showing a comparative feature matrix, tiered plan cards, and platform value metrics.

Pricing page

We designed an intuitive pricing interface to clearly showcase plan features and its differences, making it easy for users to compare options at a glance. This approach simplifies decision-making and helps users confidently select the best plan for their needs.

Pricing page

We designed an intuitive pricing interface to clearly showcase plan features and its differences, making it easy for users to compare options at a glance. This approach simplifies decision-making and helps users confidently select the best plan for their needs.

Skills assessment platform – Pricing and subscription tier preview - Showing a comparative feature matrix, tiered plan cards, and platform value metrics.

Pricing page

We designed an intuitive pricing interface to clearly showcase plan features and its differences, making it easy for users to compare options at a glance. This approach simplifies decision-making and helps users confidently select the best plan for their needs.

Skills assessment platform – Pricing and subscription tier preview - Showing a comparative feature matrix, tiered plan cards, and platform value metrics.

Pricing page

We designed an intuitive pricing interface to clearly showcase plan features and its differences, making it easy for users to compare options at a glance. This approach simplifies decision-making and helps users confidently select the best plan for their needs.

Skills assessment platform – Pricing and subscription tier preview - Showing a comparative feature matrix, tiered plan cards, and platform value metrics.

Creatives

During the design process, we created a set of custom icons and illustrations to visually communicate product features, enhance brand identity, reduce visual complexity, and help users quickly understand key concepts—making the overall experience smoother and more intuitive.

Skills assessment platform – Flat vector brand illustration set - Displaying candidate recruitment themes, data metrics charts, online testing graphics, and a video interview interface.
Skills assessment platform – Flat vector brand illustration set - Displaying candidate recruitment themes, data metrics charts, online testing graphics, and a video interview interface.

Creatives

During the design process, we created a set of custom icons and illustrations to visually communicate product features, enhance brand identity, reduce visual complexity, and help users quickly understand key concepts—making the overall experience smoother and more intuitive.

Creatives

During the design process, we created a set of custom icons and illustrations to visually communicate product features, enhance brand identity, reduce visual complexity, and help users quickly understand key concepts—making the overall experience smoother and more intuitive.

Skills assessment platform – Flat vector brand illustration set - Displaying candidate recruitment themes, data metrics charts, online testing graphics, and a video interview interface.
Skills assessment platform – Flat vector brand illustration set - Displaying candidate profile selection, a candidate dashboard with an introductory video, a skill test creation interface, and a "Hiring Remotely" guidebook cover.

Creatives

During the design process, we created a set of custom icons and illustrations to visually communicate product features, enhance brand identity, reduce visual complexity, and help users quickly understand key concepts—making the overall experience smoother and more intuitive.

Skills assessment platform – Flat vector brand illustration set - Displaying candidate recruitment themes, data metrics charts, online testing graphics, and a video interview interface.Skills assessment platform – Flat vector brand illustration set - Displaying candidate profile selection, a candidate dashboard with an introductory video, a skill test creation interface, and a "Hiring Remotely" guidebook cover.Skills assessment platform – Flat vector brand illustration set - Displaying a stylized candidate headshot icon, a hierarchical pyramid chart of soft and hard skills, a remote test card against a global map, and a candidate score bar graph.Skills assessment platform – Flat vector brand illustration set - Displaying a top candidate highlight card, a searchable applicant table, a Kanban hiring pipeline dashboard, and an analytical profile overview with individual skill breakdown percentages.

Creatives

During the design process, we created a set of custom icons and illustrations to visually communicate product features, enhance brand identity, reduce visual complexity, and help users quickly understand key concepts—making the overall experience smoother and more intuitive.

Skills assessment platform – Flat vector brand illustration set - Displaying candidate recruitment themes, data metrics charts, online testing graphics, and a video interview interface.Skills assessment platform – Flat vector brand illustration set - Displaying candidate profile selection, a candidate dashboard with an introductory video, a skill test creation interface, and a "Hiring Remotely" guidebook cover.Skills assessment platform – Flat vector brand illustration set - Displaying a stylized candidate headshot icon, a hierarchical pyramid chart of soft and hard skills, a remote test card against a global map, and a candidate score bar graph.Skills assessment platform – Flat vector brand illustration set - Displaying a top candidate highlight card, a searchable applicant table, a Kanban hiring pipeline dashboard, and an analytical profile overview with individual skill breakdown percentages.

Responsive

We ensured the design was fully responsive and user-friendly across all devices, optimizing the layout in Webflow by applying UX/UI best practices to create a consistent, intuitive experience.

Skills assessment platform – Mobile adaptation - Showcasing mobile landing page variations with dark purple interfaces, varied recruiting headlines, and brand illustrations.
Skills assessment platform – Mobile adaptation - Showcasing mobile landing page variations with dark purple interfaces, varied recruiting headlines, and brand illustrations.

Responsive

We ensured the design was fully responsive and user-friendly across all devices, optimizing the layout in Webflow by applying UX/UI best practices to create a consistent, intuitive experience.

Responsive

We ensured the design was fully responsive and user-friendly across all devices, optimizing the layout in Webflow by applying UX/UI best practices to create a consistent, intuitive experience.

Skills assessment platform – Mobile adaptation - Showcasing mobile landing page variations with dark purple interfaces, varied recruiting headlines, and brand illustrations.

Responsive

We ensured the design was fully responsive and user-friendly across all devices, optimizing the layout in Webflow by applying UX/UI best practices to create a consistent, intuitive experience.

Skills assessment platform – Mobile adaptation - Showcasing mobile landing page variations with dark purple interfaces, varied recruiting headlines, and brand illustrations.

Responsive

We ensured the design was fully responsive and user-friendly across all devices, optimizing the layout in Webflow by applying UX/UI best practices to create a consistent, intuitive experience.

Skills assessment platform – Mobile adaptation - Showcasing mobile landing page variations with dark purple interfaces, varied recruiting headlines, and brand illustrations.
No items found.

Outcome

A new brand-aligned website with structured content, clear CTAs, best-performed conversion based on A/B testing, and optimized for mobile devices.

More works

Have a project in mind?

Let’s discuss your goals, challenges, and how WebFolks can help you move forward.

200+
Projects shipped
70+
Clients supported
Startups & Enterprises
Trusted by growing teams