Accel is a venture capital firm who led Webflow's Series A investment round, & Edgar Allan was tasked with reimagining their website to show off the capabilities of their investment.

Our creative team (Kendall, Chesley, & Witt) delivered bold designs with an intricate page loading animation, a side loading nav, & a responsive, grid-based homepage layout that had to handle a lot of self-adjusting across viewport widths to accommodate different content layouts. But that was only part of the dev lift: Accel also wanted all of the content on the site to be updated via CMS collections & much of it displayed conditionally or randomly. This meant working around a number of Webflow limitations that restrict how much collection content you can display on a page & building in fallback support for incomplete datasets.

The 15 featured company cards on the homepage, for instance, are all 2-deep collections, which are shuffled on load via javascript with only the first entry displaying. So users receive some combination of the 30 total cards each time they come to the site, preventing the page from feeling stale on repeated visits. Other content, like the randomized header video & the featured blog slider content, are pulled from other pages via ajax in order to skirt Webflow's total collection lists limit.

The heart of the site, though, is a Jetboost-powered search form that queries the team members, partner companies, & blog databases.

Jetboost's API-driven search was a life saver here, allowing us to easily overcome Webflow's 100 collection item display limit. But to improve initial page load speed, we moved the search results content to another page & only loaded it via ajax upon interacting w/ the search form. And the result is a relatively snappy query of hundreds of image-heavy collection items across multiple data points.

For team member profile pages, most of the content had to display conditionally based on whether a team member was an investor or an administrative team member & whether or not they had a complete data set. So the layouts vary from team member to team member. But by surfacing so much supporting content, the end experience is a frictionless path between investors, companies, related blog content, & back.

The contact page, built on a custom Google Maps integration, was also fun to build, as the map moves in real-time as you click through their various office locations.

The shear volume of data & the scope of data organization defined this project for me, even beyond the very dynamic front-end work. But the result was a product that Accel lives in, updating constantly as their firm & their portfolio continues to grow.

‍