Transforming an unwieldy static website into an elegant CMS driven architecture.
Lindsay Ware, Creative Director
IF I MADE is a website that offers courses and tutorials by a variety of creative partners. I was first hired by IF I MADE to help them design and build out some new website sections on their WebFlow platform. At the time, IF I MADE was using mostly static web pages and their site was becoming unwieldy. Nonetheless, my clients were not convinced that a templated web structure could work for them considering the variety of styles and structures that their creative partners required.
I built them a proof-of-concept prototype using a nested object infrastructure within Webflow's proprietary CMS and the IF I MADE team was responsive the changes.
IF I MADE's course pages are quite robust. There were commonalities across many of the courses, but there were just as many outliers. Some courses had content sections that others did not. Some courses had similar sections but they were place in different locations on the page.... or the images were on the left rather than the right. My first step was to do a lot of review of every single course and to get my head around the current layouts and to start to determine how we could design a common structure. This required spreadsheets and lots of sketching until I could propose a solution.
I should pause here to express how awesome the Webflow platform is. By using Webflow's conditional formatting options on the front end, I could build out common CMS repositories for each Course and allow the course to build dynamically based on which point of content were entered.
Additionally, the team at FinSweet offers a javascript function that allowed me to dynamically nest feeds into a CMS template - something that WebFlow does not offer in their core platform. (If you are planning on using WebFlow, you definitely need to familiarize yourself with the Finsweet team and their robust plugins, extensions and libraries for Webflow developers. You'll need them eventually!)
IF I MADE has a very specific brand identity, but they also work with creative partners who have strict branding guidelines of their own. Link colors, button styles, background colors and images all needed specific controls for each individual course. I managed this by setting a core palette to be used with variable names such as "medium background" or "icon color" and then creating a CMS object named "STYLES" that let me create custom styles that could be applied to each course.
I also created photoshop templates that would assist the IF I MADE marketing team plan out these color palettes. This allowed them to work with their affiliates to create custom styles for each course, while also giving them a bird's eye view to make sure that all of the custom palettes combined told a color-story consistent with the IF I MADE brand.
This project took 3 weeks longer than we had originally budgeted for production time. I had not anticipated some of the CMS and nesting limitations of Webflow, which required rebuilding parts of the nested object structure. To their credit, IF I MADE was committed to seeing this project through, understanding that they would reap the benefits in the long-term through streamlining the time needed to launch new courses.
That assumption was proven quickly. The time we lost setting up the new templates was gained back when we started migrating the older static pages into the new template structure. We had allocated 2 days per course to port over, but we found that we could easily launch approximately 2 courses a day once we had the kinks worked out.
I think a side by side of their courses reveals that we achieved our goal of maintaining a unique voice to each brand partner, while still streamlining production by establishing a templated CMS architecture.
