Quinte Energy Storage Centre Microsite
A web design system built to last
Project BrieF
At Hydrostor, building a facility takes more than 5 years of work. Because of these long lead times, each facility ends up needing its own custom microsite to distribute information to the local community as we progress through development.
I work as the only designer on the Hydrostor team alongside a freelance, part-time web developer for support. If we were to make a brand new site for each project, we’d need a much larger team that we don’t have the budget for.
To address this, I developed a Figma web design system that could be mirrored in a designer-friendly WISIWIG system (DIVI 5 on Wordpress) with some support from Realmade.co. This gives us a prototype to lead our design and content reviews seamlessly before development and reduced our total dev time to push a new site live to less than a month. We already have two sites live!
DELIVERABLES
Web Design System, Ongoing Frontend Maintenance
GETTING THE SYSTEM RIGHT
As the need for individual project websites came up, I saw this as an opportunity to raise the bar for Hydrostor web design. No design system or web documentation had existed for Hydrostor's web presence before, so we had the chance to start from scratch and make sure that we were creating an excellent user experience for our project websites going forward.
We needed a system that was built with the future in mind so we didn't need to bolt on features in a rush. I wanted to punch above our weight without needing more resources, but still establish solid UX practices.
A sampling of some of the basic components. We tried to keep this as minimal as necessary so we had less to keep track of as we duplicated the sites.
Our primitives. These form the basis of all color usage on the site – and all usage is tested to be sure that we pass for AA accessibility standards. As we create future microsites with other color schemes, we’ll only need to update the Chlorophyll column and match that in dev. Super easy!
A custom interactive technology diagram. Because we won’t have quick-turn development support,
I kept the interactivity to a minimum and used it only for high-impact moments.
The system also has the mobile type styles and components as well, ensuring we have a beautiful and responsive site!
The best news about this work is that it’s live and working exactly as I’d hoped!
As a designer with limited development skills, I’m able to make edits to the sites as I need to! The WISIWIG DIVI backend is powerful, user-friendly, and allows us to iterate fast.
We have two microsites live right now: QuinteEnergyStorage.com and WillowRockEnergyStorage.com. The second was built and live in less than a month, from Figma prototype to live site.
The design system is documented such that we have almost no questions between design and dev. We can focus less on confusion and more on improvement!
Take a look at the Figma prototypes below: