Agency outsourcing platform

Project overview

Breef serves as a premier platform connecting brands with top-tier agencies for their digital and creative endeavours. During our longstanding collaboration, Breef sought a website redesign to maintain relevance and efficacy in a changing marketplace.



Our goal was to make a smooth transition of Figma designs to Webflow. We incorporated advanced front-end development using custom JavaScript, created dynamic multi-step forms, and integrated animations to enhance user engagement.

Tasks
  • Implement Figma designs via Webflow
  • Enhance functionality for custom usage scenarios via JavaScript
  • Develop custom front-end solutions for enhanced multi-step forms
  • Integrate animations and custom interactions into the Webflow platform
  • Migrate agency application to Webflow, simplifying editing processes
  • Provide clear customer guides for managing website content and ongoing support
Tools
Webflow
Webflow
Figma
Figma
Lottie
Lottie
Solutions
Outcome

Through considerable A/B/C testing, by incorporating advanced front-end development using custom JavaScript, creating dynamic multi-step forms, integrating animations and adding brand new features, ensuring the website performed well on all devices and was SEO-optimized, we received a refreshed website design that not only boosts user experience but also reflects Breef's commitment to continuous improvement and innovation in the marketplace.

Solutions

Smooth Redesign

We've been collaborating with Breef over the last three years. Considering our previous case study, our new objective was to implement a new design using advanced front-end development in Webflow.

Smooth Redesign

We've been collaborating with Breef over the last three years. Considering our previous case study, our new objective was to implement a new design using advanced front-end development in Webflow.

Smooth Redesign

We've been collaborating with Breef over the last three years. Considering our previous case study, our new objective was to implement a new design using advanced front-end development in Webflow.

Smooth Redesign

We've been collaborating with Breef over the last three years. Considering our previous case study, our new objective was to implement a new design using advanced front-end development in Webflow.

Smooth Redesign

We've been collaborating with Breef over the last three years. Considering our previous case study, our new objective was to implement a new design using advanced front-end development in Webflow.

Breef Pay

A new feature Breef Pay offers agencies to extend payment terms, helping businesses expand their marketing projects. This feature we implemented as a dynamic multi-step form with robust validations and custom elements. Using Zapier, each step triggers webhooks to track user behavior in real-time, giving clients valuable insights.

Breef Pay

A new feature Breef Pay offers agencies to extend payment terms, helping businesses expand their marketing projects. This feature we implemented as a dynamic multi-step form with robust validations and custom elements. Using Zapier, each step triggers webhooks to track user behavior in real-time, giving clients valuable insights.

Breef Pay

A new feature Breef Pay offers agencies to extend payment terms, helping businesses expand their marketing projects. This feature we implemented as a dynamic multi-step form with robust validations and custom elements. Using Zapier, each step triggers webhooks to track user behavior in real-time, giving clients valuable insights.

Breef Pay

A new feature Breef Pay offers agencies to extend payment terms, helping businesses expand their marketing projects. This feature we implemented as a dynamic multi-step form with robust validations and custom elements. Using Zapier, each step triggers webhooks to track user behavior in real-time, giving clients valuable insights.

Breef Pay

A new feature Breef Pay offers agencies to extend payment terms, helping businesses expand their marketing projects. This feature we implemented as a dynamic multi-step form with robust validations and custom elements. Using Zapier, each step triggers webhooks to track user behavior in real-time, giving clients valuable insights.

Modal forms

Implementing non-intrusive modal forms, we prioritized user experience by integrating handlers to facilitate smooth navigation while ensuring uninterrupted browsing sessions.

Modal forms

Implementing non-intrusive modal forms, we prioritized user experience by integrating handlers to facilitate smooth navigation while ensuring uninterrupted browsing sessions.

Modal forms

Implementing non-intrusive modal forms, we prioritized user experience by integrating handlers to facilitate smooth navigation while ensuring uninterrupted browsing sessions.

Modal forms

Implementing non-intrusive modal forms, we prioritized user experience by integrating handlers to facilitate smooth navigation while ensuring uninterrupted browsing sessions.

Modal forms

Implementing non-intrusive modal forms, we prioritized user experience by integrating handlers to facilitate smooth navigation while ensuring uninterrupted browsing sessions.

Onboarding flow

A new onboarding feature was developed to collect user data before they sign up for the main application. Using a combination of native Webflow components and custom JavaScript, we created multi-step forms. Each step triggers webhooks in real-time to monitor user behaviour effectively. We also utilized Google Optimize to conduct A/B/C tests for form view optimization.

Onboarding flow

A new onboarding feature was developed to collect user data before they sign up for the main application. Using a combination of native Webflow components and custom JavaScript, we created multi-step forms. Each step triggers webhooks in real-time to monitor user behaviour effectively. We also utilized Google Optimize to conduct A/B/C tests for form view optimization.

Onboarding flow

A new onboarding feature was developed to collect user data before they sign up for the main application. Using a combination of native Webflow components and custom JavaScript, we created multi-step forms. Each step triggers webhooks in real-time to monitor user behaviour effectively. We also utilized Google Optimize to conduct A/B/C tests for form view optimization.

Onboarding flow

A new onboarding feature was developed to collect user data before they sign up for the main application. Using a combination of native Webflow components and custom JavaScript, we created multi-step forms. Each step triggers webhooks in real-time to monitor user behaviour effectively. We also utilized Google Optimize to conduct A/B/C tests for form view optimization.

Onboarding flow

A new onboarding feature was developed to collect user data before they sign up for the main application. Using a combination of native Webflow components and custom JavaScript, we created multi-step forms. Each step triggers webhooks in real-time to monitor user behaviour effectively. We also utilized Google Optimize to conduct A/B/C tests for form view optimization.

Agency Application

The sign-up features for Agencies have been migrated to the Webflow side from the main App to speed up marketing campaigns and quicker UI updates during A/B/C tests. Optimizing the migration, we've used robust JavaScript,  data matching, webhooks, and progress saving to improve user experience.

Agency Application

The sign-up features for Agencies have been migrated to the Webflow side from the main App to speed up marketing campaigns and quicker UI updates during A/B/C tests. Optimizing the migration, we've used robust JavaScript,  data matching, webhooks, and progress saving to improve user experience.

Agency Application

The sign-up features for Agencies have been migrated to the Webflow side from the main App to speed up marketing campaigns and quicker UI updates during A/B/C tests. Optimizing the migration, we've used robust JavaScript,  data matching, webhooks, and progress saving to improve user experience.

Agency Application

The sign-up features for Agencies have been migrated to the Webflow side from the main App to speed up marketing campaigns and quicker UI updates during A/B/C tests. Optimizing the migration, we've used robust JavaScript,  data matching, webhooks, and progress saving to improve user experience.

Agency Application

The sign-up features for Agencies have been migrated to the Webflow side from the main App to speed up marketing campaigns and quicker UI updates during A/B/C tests. Optimizing the migration, we've used robust JavaScript,  data matching, webhooks, and progress saving to improve user experience.

Planning tool flow

The Planning tool Flow within Breef's platform guides users to define their marketing goals. With captivating animations, custom forms, and validation logic users can effectively get personalized support and access to diverse agencies facilitating flawless interaction.

Planning tool flow

The Planning tool Flow within Breef's platform guides users to define their marketing goals. With captivating animations, custom forms, and validation logic users can effectively get personalized support and access to diverse agencies facilitating flawless interaction.

Planning tool flow

The Planning tool Flow within Breef's platform guides users to define their marketing goals. With captivating animations, custom forms, and validation logic users can effectively get personalized support and access to diverse agencies facilitating flawless interaction.

Planning tool flow

The Planning tool Flow within Breef's platform guides users to define their marketing goals. With captivating animations, custom forms, and validation logic users can effectively get personalized support and access to diverse agencies facilitating flawless interaction.

Planning tool flow

The Planning tool Flow within Breef's platform guides users to define their marketing goals. With captivating animations, custom forms, and validation logic users can effectively get personalized support and access to diverse agencies facilitating flawless interaction.

Planning tool steps

Starting with the Planning tool, we created another multi-step form featuring animated transitions, custom elements, and validation logic. This increased user interaction and retention, ultimately boosting engagement and loyalty.

Planning tool steps

Starting with the Planning tool, we created another multi-step form featuring animated transitions, custom elements, and validation logic. This increased user interaction and retention, ultimately boosting engagement and loyalty.

Planning tool steps

Starting with the Planning tool, we created another multi-step form featuring animated transitions, custom elements, and validation logic. This increased user interaction and retention, ultimately boosting engagement and loyalty.

Planning tool steps

Starting with the Planning tool, we created another multi-step form featuring animated transitions, custom elements, and validation logic. This increased user interaction and retention, ultimately boosting engagement and loyalty.

Planning tool steps

Starting with the Planning tool, we created another multi-step form featuring animated transitions, custom elements, and validation logic. This increased user interaction and retention, ultimately boosting engagement and loyalty.

Breefing room

As Breef's content hub, the Breefing Room hosts blog posts for agencies and brands. Leveraging the Finsweet library, we implemented the necessary logic to ensure easy content management and accessibility.

Breefing room

As Breef's content hub, the Breefing Room hosts blog posts for agencies and brands. Leveraging the Finsweet library, we implemented the necessary logic to ensure easy content management and accessibility.

Breefing room

As Breef's content hub, the Breefing Room hosts blog posts for agencies and brands. Leveraging the Finsweet library, we implemented the necessary logic to ensure easy content management and accessibility.

Breefing room

As Breef's content hub, the Breefing Room hosts blog posts for agencies and brands. Leveraging the Finsweet library, we implemented the necessary logic to ensure easy content management and accessibility.

Breefing room

As Breef's content hub, the Breefing Room hosts blog posts for agencies and brands. Leveraging the Finsweet library, we implemented the necessary logic to ensure easy content management and accessibility.

Onboarding flow v2

After thorough A/B/C testing, the latest onboarding flow represents an improved version. Retaining its multi-form structure, the updated version offers increased flexibility and user-friendliness, reflecting Breef's commitment to continuous improvement.

Onboarding flow v2

After thorough A/B/C testing, the latest onboarding flow represents an improved version. Retaining its multi-form structure, the updated version offers increased flexibility and user-friendliness, reflecting Breef's commitment to continuous improvement.

Onboarding flow v2

After thorough A/B/C testing, the latest onboarding flow represents an improved version. Retaining its multi-form structure, the updated version offers increased flexibility and user-friendliness, reflecting Breef's commitment to continuous improvement.

Onboarding flow v2

After thorough A/B/C testing, the latest onboarding flow represents an improved version. Retaining its multi-form structure, the updated version offers increased flexibility and user-friendliness, reflecting Breef's commitment to continuous improvement.

Onboarding flow v2

After thorough A/B/C testing, the latest onboarding flow represents an improved version. Retaining its multi-form structure, the updated version offers increased flexibility and user-friendliness, reflecting Breef's commitment to continuous improvement.

Efficient Web Development

Via Webflow, we used web development best practices such as reusable components, optimized naming conventions adhered to the BEM approach, and prioritized SEO and performance-friendly HTML structure for enhanced website efficiency.

Efficient Web Development

Via Webflow, we used web development best practices such as reusable components, optimized naming conventions adhered to the BEM approach, and prioritized SEO and performance-friendly HTML structure for enhanced website efficiency.

Efficient Web Development

Via Webflow, we used web development best practices such as reusable components, optimized naming conventions adhered to the BEM approach, and prioritized SEO and performance-friendly HTML structure for enhanced website efficiency.

Efficient Web Development

Via Webflow, we used web development best practices such as reusable components, optimized naming conventions adhered to the BEM approach, and prioritized SEO and performance-friendly HTML structure for enhanced website efficiency.

Efficient Web Development

Via Webflow, we used web development best practices such as reusable components, optimized naming conventions adhered to the BEM approach, and prioritized SEO and performance-friendly HTML structure for enhanced website efficiency.

No items found.

Outcome

Through considerable A/B/C testing, by incorporating advanced front-end development using custom JavaScript, creating dynamic multi-step forms, integrating animations and adding brand new features, ensuring the website performed well on all devices and was SEO-optimized, we received a refreshed website design that not only boosts user experience but also reflects Breef's commitment to continuous improvement and innovation in the marketplace.

Linkedin

We have been working with WebFolks on a number of projects for an extended period of time - they are awesome. Exceptional attention to detail, quality and first class support. We have continued the relationship as Breef expands - and they are a core part of our growth strategy. Most importantly - great people and easy to work with.

Linkedin
George Raptis
Co-Founder and CEO

More works

Looking for an expert?

Let's discuss how WebFolks can help!

Contact Us
WebFolks logo outline