Agency outsourcing website

Agency Outsourcing Website - Website refresh - To highlight the comprehensive website refresh that accompanied the rebranding effort
Project overview

Breef is a platform where brands find the best agencies for their digital and creative needs. We have been working with Breef for a long time. They recently decided on rebranding from Curated to Breef, which also required a website refresh.

Tasks
  • Step-by-step Figma to Webflow migration
  • Create a set of resource pages with different articles, tutorials, interviews, and more
  • Adapt resource pages for different types of end-users
  • Create a set of Lottie animations to make the website more attractive and interactive
  • Integrate animations and interactions via Webflow
Tools
Figma
Figma
Webflow
Webflow
Adobe After Effects
Adobe After Effects
Lottie
Lottie
Solutions
Outcome

An utterly unique website design with convenient editing fields for Editors using Webflow CMS. Available on any device usefully. Clear customer guides for managing the website content and our support for further changes.

Solutions

Content Hub

Articles, tutorials, interviews, and more were placed in the content hub. Additionally, we show different content for specific end-users, such as "Agency" or "Brand," keeping everything under one project and the same structure of CMS. We achieved this via JavaScript.

Content Hub - Centralized content repository - To showcase the creation of a content hub featuring articles, tutorials, interviews, and more
Content Hub - Centralized content repository - To showcase the creation of a content hub featuring articles, tutorials, interviews, and more

Content Hub

Articles, tutorials, interviews, and more were placed in the content hub. Additionally, we show different content for specific end-users, such as "Agency" or "Brand," keeping everything under one project and the same structure of CMS. We achieved this via JavaScript.

Content Hub

Articles, tutorials, interviews, and more were placed in the content hub. Additionally, we show different content for specific end-users, such as "Agency" or "Brand," keeping everything under one project and the same structure of CMS. We achieved this via JavaScript.

Content Hub - Centralized content repository - To showcase the creation of a content hub featuring articles, tutorials, interviews, and more
Content Hub - Consistent visual design - To depict the consistent visual design and branding maintained across all content types

Content Hub

Articles, tutorials, interviews, and more were placed in the content hub. Additionally, we show different content for specific end-users, such as "Agency" or "Brand," keeping everything under one project and the same structure of CMS. We achieved this via JavaScript.

Content Hub - Centralized content repository - To showcase the creation of a content hub featuring articles, tutorials, interviews, and moreContent Hub - Consistent visual design - To depict the consistent visual design and branding maintained across all content typesContent Hub - Advanced JavaScript integration - To represent the advanced use of JavaScript to manage and display content dynamically, ensuring a tailored user experience

Content Hub

Articles, tutorials, interviews, and more were placed in the content hub. Additionally, we show different content for specific end-users, such as "Agency" or "Brand," keeping everything under one project and the same structure of CMS. We achieved this via JavaScript.

Content Hub - Centralized content repository - To showcase the creation of a content hub featuring articles, tutorials, interviews, and moreContent Hub - Consistent visual design - To depict the consistent visual design and branding maintained across all content typesContent Hub - Advanced JavaScript integration - To represent the advanced use of JavaScript to manage and display content dynamically, ensuring a tailored user experience

New look and feel

Due to the existing website was released, we implemented new designs step by step, page by page, keeping the existing version live with the ability to post new content during the redesign process.

New Look and Feel - Continuous content updates - To depict how new content was continuously posted during the redesign process, maintaining site functionality
New Look and Feel - Continuous content updates - To depict how new content was continuously posted during the redesign process, maintaining site functionality

New look and feel

Due to the existing website was released, we implemented new designs step by step, page by page, keeping the existing version live with the ability to post new content during the redesign process.

New look and feel

Due to the existing website was released, we implemented new designs step by step, page by page, keeping the existing version live with the ability to post new content during the redesign process.

New Look and Feel - Continuous content updates - To depict how new content was continuously posted during the redesign process, maintaining site functionality
New Look and Feel - Step-by-step implementation - To showcase the gradual implementation of new designs, ensuring a smooth transition

New look and feel

Due to the existing website was released, we implemented new designs step by step, page by page, keeping the existing version live with the ability to post new content during the redesign process.

New Look and Feel - Continuous content updates - To depict how new content was continuously posted during the redesign process, maintaining site functionalityNew Look and Feel - Step-by-step implementation - To showcase the gradual implementation of new designs, ensuring a smooth transitionNew Look and Feel - Page-by-page redesign - To illustrate the process of redesigning the website page by page New Look and Feel - Modern design elements - To depict the modern design elements introduced to refresh the website’s look and feel

New look and feel

Due to the existing website was released, we implemented new designs step by step, page by page, keeping the existing version live with the ability to post new content during the redesign process.

New Look and Feel - Continuous content updates - To depict how new content was continuously posted during the redesign process, maintaining site functionalityNew Look and Feel - Step-by-step implementation - To showcase the gradual implementation of new designs, ensuring a smooth transitionNew Look and Feel - Page-by-page redesign - To illustrate the process of redesigning the website page by page New Look and Feel - Modern design elements - To depict the modern design elements introduced to refresh the website’s look and feel

Responsive design

The number of views from mobile devices exceeds the number of views from desktop ones, so it was very important to make high-quality and easy navigation for all mobile interfaces.

Responsive Design - Enhanced user experience on mobile - To depict the enhanced user experience achieved through optimized mobile design
Responsive Design - Enhanced user experience on mobile - To depict the enhanced user experience achieved through optimized mobile design

Responsive design

The number of views from mobile devices exceeds the number of views from desktop ones, so it was very important to make high-quality and easy navigation for all mobile interfaces.

Responsive design

The number of views from mobile devices exceeds the number of views from desktop ones, so it was very important to make high-quality and easy navigation for all mobile interfaces.

Responsive Design - Enhanced user experience on mobile - To depict the enhanced user experience achieved through optimized mobile design
Responsive Design - Improved accessibility - To showcase the mobile-first approach taken due to the high number of mobile views exceeding desktop views

Responsive design

The number of views from mobile devices exceeds the number of views from desktop ones, so it was very important to make high-quality and easy navigation for all mobile interfaces.

Responsive Design - Enhanced user experience on mobile - To depict the enhanced user experience achieved through optimized mobile designResponsive Design - Improved accessibility - To showcase the mobile-first approach taken due to the high number of mobile views exceeding desktop views

Responsive design

The number of views from mobile devices exceeds the number of views from desktop ones, so it was very important to make high-quality and easy navigation for all mobile interfaces.

Responsive Design - Enhanced user experience on mobile - To depict the enhanced user experience achieved through optimized mobile designResponsive Design - Improved accessibility - To showcase the mobile-first approach taken due to the high number of mobile views exceeding desktop views

Rebranding

“Curated” decided to be renamed to “Breef” and do its website refresh.

Rebranding - Name change to Breef - To showcase the rebranding process where "Curated" decided to rename to "Breef"
Rebranding - Name change to Breef - To showcase the rebranding process where "Curated" decided to rename to "Breef"

Rebranding

“Curated” decided to be renamed to “Breef” and do its website refresh.

Rebranding

“Curated” decided to be renamed to “Breef” and do its website refresh.

Rebranding - Name change to Breef - To showcase the rebranding process where "Curated" decided to rename to "Breef"
Rebranding - Communication of brand values - To illustrate how the rebranding communicates Breef's core values and mission more effectively

Rebranding

“Curated” decided to be renamed to “Breef” and do its website refresh.

Rebranding - Name change to Breef - To showcase the rebranding process where "Curated" decided to rename to "Breef"Rebranding - Communication of brand values - To illustrate how the rebranding communicates Breef's core values and mission more effectively

Rebranding

“Curated” decided to be renamed to “Breef” and do its website refresh.

Rebranding - Name change to Breef - To showcase the rebranding process where "Curated" decided to rename to "Breef"Rebranding - Communication of brand values - To illustrate how the rebranding communicates Breef's core values and mission more effectively
No items found.

Outcome

An utterly unique website design with convenient editing fields for Editors using Webflow CMS. Available on any device usefully. Clear customer guides for managing the website content and our support for further changes.

Linkedin

Linkedin

More works

Looking for an expert?

Let's discuss how WebFolks can help!

Contact Us
WebFolks logo outline