Digital Design, Web Development
About Innovation Bay
Innovation Bay’s purpose is to create valuable membership communities made up of incredible humans from the tech ecosystem. They bring founders, leaders and investors together to share experiences and learn from on another through carefully curated events, programmes and content.
Making A PRINT DESIGN SCREEN-READY
At the start of the project, Innovation Bay already had a website design that wasn’t quite complete.
We set out to create a better design that was flexible and worked adaptively with screens. We worked with Innovation Bay to clarify what elements needed to stay to maintain the integrity of their brand without compromising on accessibility or user experience.
One of the additional considerations was ease of editing for Innovation Bay’s marketing team. We made sure that our final design and the site we built from it were easily editable by the Innovation marketing team so they can do their best work with the least friction possible.
the tech we used
STYLE GUIDE challenges
Innovation Bay had a large style guide, but it didn’t properly cover any screen applications. Strict adherence to this style guide in the past had led to broken layouts and unintentionally hidden content on their old site.
We worked with Innovation Bay to find the right solution that connected their brand elements and digital usability.
One of the ways we did this was creating a design system that adds Innovation Bay’s brand shapes to any element on the page.
This allowed us to integrate important parts of the Innovation Bay brand to any block in the Gutenberg editor with ease, with minimal impact on performance and no chance of breaking any layouts.
the brand colours
Innovation Bay’s style guide defined a palette of specific colours, and one of the non-negotiable parts of the build was integration of this specific selection of colours.
To make things easy and consistent for the Innovation Bay team, we created custom Gutenberg blocks with a customised palette accessible by a single click.
We also made sure that any custom-coded parts of the websites used the same palette. To ensure consistency, we added these to the site as CSS custom properties, and called them rather than setting static colour values during development.
A frontend that exceeded requirements
We built the frontend of this website to exceed expectations. It meets all of the brand and design requirements Innovation Bay has, adds on exceptional performance and page-speed, a huge list of accessibility improvements, a great user experience, and a massive reduction in energy usage and carbon production.
Nothing but custom
We built the backend of the site with ease of use in mind, with a strong focus on getting the on-page editing experience right.
There’s virtually no difference between how content is displayed in the editor and the site’s frontend, and our implicit, adaptive design system allows the Innovation Bay team to copy and paste content and layouts to any part of the site they need them.
We worked closely with Innovation Bay team to customise the structure and functionality of the backend to fit their needs and workflows exactly.
“The team at Kings Digital were such a joy to work with. They customised and cleaned up the backend, in the process, completely simplifying the user experience so that continual website updates are made so much easier and without the need to learn code. They also provided concise and easy to follow training so that there were no grey areas. What you see on the front is mirrored in the backend which minimises the guesswork. We’re really proud of our new website and super thankful to Kings.”
ELLA PETITE, HEAD OF MARKETING & COMMS