Buttery Agency is a multidisciplinary creative agency that specializes in helping clients tell their stories by unifying the conceptual, verbal, and visual elements. Their clients range in focus, but all generally approach their branding with a dash of offbeat humor.
Services Rendered:
Website Development
CMS Architecture Design
Interaction Design
Client Categories:
Creative Portfolio
Marketing Agency
Video Production Agency
Tools Used:
Webflow
Recreate the Buttery Agency portfolio site, enabling as much simplified customization as possible.
One scenario that we come across repeatedly is a potential client that will approach us to relocate their website off of Wordpress or Squarespace. Without getting too deep into specifics, in our experience, these two platforms are tempting as they offer easy, cheap entry into the world of websites, but both fall flat in a number of ways. In this case, Buttery had been using Squarespace but came to us when they’d had enough of the platform’s limitations. Instead, they asked us to bring their site onto a new platform that would allow further customization while also adding eye catching interactions and animations.
Push the limits of Webflow's CMS and conditional visibility tools to enable the Buttery team to design unique layouts for each portfolio item without the use of code.
To meet Buttery’s needs regarding customizable layouts, we knew we'd have to implement a number of creative solutions to take a complex process and make it simple for them. In addition to desiring highly customizable portfolio items, Buttery also expressed interest in adding animations and rollovers to their website to give it a more interactive feel. Noting these needs, we quickly identified the Buttery project as a perfect candidate for a Webflow website.
Buttery came to us with a vision for hover interactions on their work landing pages. After providing us with a few animations as references, we utilized Webflow’s interaction tools to recreate their desired effect.
Custom Contained Video Interactions
One key component to Buttery’s work is their videography. Tasked with integrating this work seamlessly into their tiled portfolio layout, we built an interaction which allows any given tile to hold video content with a dynamic play button indicating to the frontend user of that tile’s particular content type. Upon pressing the button, the tile is overlaid with the relevant video. The beauty of this feature is that complex development resulted in a simple user interface for both the team at Buttery as well as those who view their portfolio.
Creating a no-code way to create customizable layouts
Of the concepts that the team at Buttery presented to us, the most intriguing yet complex was the concept of creating unique mosaic style grids for the content within each individual portfolio item. While the idea itself seems simple, in practice its actually quite complex. To give Buttery complete control over these grid structures and ensure that they would feature perfect alignment every time, we ultimately devised a row based system in which each portfolio page consists of any number of stacked rows. Within each of these rows, the team at Buttery can choose between four different layouts, consisting of up to three tiles. Taking the customization capabilities further, each tile can also consist of an image, text, or an embedded video, while the rows themselves can be given a sort order to determine their position on the page.
As a creative agency, the ability to customize the presentation of their work was crucial for the team at Buttery. In order to accommodate this, while keeping the workflow for adding and editing portfolio items simplistic, we developed a modular system to allow row-based layouts, with each row offering four different layout types. With this system, Buttery is able to create unique mosaic grid layouts for all of their portfolio items while supporting a range of content types within each row. A simple backend is capable of creating a complex front end.
Bringing the row based strategy to landing pages
Borrowing that same strategy, we applied these foundational techniques to both the homepage and the work landing page, where users can explore Buttery’s full portfolio. Further extending the capabilities of this system, we added interactive rollovers to these landing page rows, enabling the user to reveal more information about each portfolio item before clicking in.
In addition to their portfolio work, Buttery also requested a Stories page which would allow them to highlight what goes into each project. More or less equivalent to a blog, we created a new CMS collection as well as accompanying landing and story pages to accommodate this content.
Adding an Easily Updatable Blog and Supporting Pages
Finally, we rounded out the project by adding a blog component to enable the Buttery team to share behind the scenes content from their latest projects. Additionally, we created an about page and a contact page to support the rest of the website's contents while also giving potential clients a way to reach out to Buttery with work inquiries.
At the time of this writing, it’s too early to talk about results. The team at Buttery is still in the process of adding portfolio items and the site is in pre-launch mode. That said, there remain two takeaways here: first, the team at Buttery is having no problem at all building the customized site of their dreams using simple form-based tools. Secondly, after observing how we worked through the build out of their website, Buttery has brought us in on additional client work of their own, helping to expand the capabilities of their agency and attract new types of projects.
