Boilerplate Style Framework

All of webflow.com is made up of 15+ separate Webflow projects that must all come together with a consistent brand, voice and experience to drive product growth and awareness. When I joined the team, we didn’t have much for a system to consistently build new pages with in order to most easily collaborate and support each others projects at any time. So, one of my most passionate initiatives was to create, implement and continue to encourage iterations on a design and development system we called the Boilerplate.

The system consists of a set of type, color, layout and utilities styles that are intended to solve for a max amount of use cases, with the smallest amount of pre-built elements. Through thorough written documentation and team education, we began to implement this system across the various webflow.com projects, while periodically re-grouping on ways we could improve it.

Home Page

The most iterative, collaborative and complex single web page projects I have been a part of to date. I was brought in to the project post-kickoff, and played an early feedback role during initial research and design work, followed by taking more of a lead role as the project neared its final direction and moved into development.

With this page being on of the most valuable across webflow.com in terms of traffic and conversions, I put everything I had into ensuring every aspect from aesthetics and structure, to performance and responsiveness was as optimized as possible. Several aspects of the page involved iterating upon how a component could be built multiple times, while also experimenting with the new at the time Dot Lottie library to ensure we had the most crisp and performant animations possible communicating the power of our beloved tool.

Accessibility Checklist

Webflow’s mission is to empower everyone to create for the web, and we also have a deep internal drive to ensure anyone can do it in a responsible, inclusive and accessible way. This project was one that started as an internal initiative to create tooling for higher quality QA processes on the Brand Team, and evolved into something we were excited to share publicly with the Webflow community and beyond to further practical web accessibility education.

We initially tested multiple modern doc and database tools like Coda, Notion, and Airtable to find the best route to generate a maintainable and repeatable checklist we could sync for every new page we build, as well as get live metrics from to check our progress along the way. After landing on using Coda, we curated, wrote and organized all task checklists, then migrated all of them to the Webflow CMS. Finally, I paired with a Senior Engineer at Webflow to write all of the custom Javascript that powers the checklist saving and sharing functionality on the final site.

Pitch

A project resulting from a no constraints internal brain storm, and ended in a great example of how you can build micro products within Webflow to drive new brand engagement channels. The goal of Webflow Pitch was to create a simple presentation builder tool that would allow anyone to generate a personalized deck link to send to a colleague to convince them why they should consider Webflow.

Once someone enters their name and email, they can personalize the recipient name and image, as well as configure various key Webflow features they feel are most valuable for the recipient to read. Once they complete and submit the presentation, they receive an email with their custom presentation link that takes them to a CMS generated page which snap scrolls (also works with arrow keys!) so the recipient can move through the slides in a typical deck like experience. After over 1,000 decks have been generated, we continue to see new people get excited about discovering the project over a year later.

Year in Review 2020

One of my very first projects at Webflow was to build a year-in-review page to celebrate and inform the world of Webflow’s role in the chaos of a year that was 2020. This turned out to be an exceptionally challenging project on both the end of consolidating final content, while also building a page that had enough “wow” factor to foster organic social sharing, while also being performant alongside its great length and size.

Ebooks

An iteration focused project with a primary goal to streamline how it’s built and managed. After a light design refresh, I focused heavily on optimizing the CMS to ensure it was as efficient and intuitive as possible to add new Ebooks. The site also required a more scalable way to gate content alongside our third party marketing software that powered our lead funnel, so I worked on a custom javascript approach that was also easily scaled entirely form the CMS and dynamic in it’s approach to sending data to our external marketing tools.

Merch Store

Since I first discovered Webflow, I have told just about anyone that was even a little curious along the way. So, I was incredibly eager to lead the design and development of the first Webflow Merch Store, that would enable our passionate communicate to sport the Webflow brand proudly no matter where they are. The site was one of my first Ecommerce builds, that also integrated with Printful for easy on-demand printing and shipping. Although there were a few unexpected obstacles along the way, I was excited to launch the minimal and scalable site in January 2021.