As Watershed grew, it needed to use modular templates for speed without downgrading the overall look and feel of the website. The goal was to raise the bar for quick-turnaround pages while utilizing custom pages as opportunities to evolve the overall web design.
First, we refreshed the product illustration style to bring a little life to modular template pages, using shadows and gradients to emphasize key product elements when breaking down data-heavy screens. We could then pull from this library to plug into pages with tight turnarounds.
Simultaneously, we audited our modular templates, aligning the live site with the Figma file and enhancing user experience through weekly reviews with our developer. We also added new components and patterns as needed and when possible.
The combination of the product illustration library and modular templates allowed us to create basic pages quickly. For example, these proved valuable when a major piece of climate legislation was pending in California. We were able to prep the page with short notice and publish once the bills were signed into law.
The last piece of our approach was to take advantage of opportunities to design custom pages. We explored new patterns of interaction and animation to not only distinguish these as high-touch pages and push the overall look and feel of the site, but also to have fun designing new things.