all case studies

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.

Before

After

the tech we used

Figma

wordpress

React

Data studio

google analytics

“We recently asked the Kings Digital team to help us relaunch our website. We could not be more pleased, not only with the end result, but the process. The team was professional, on time, creative and effective in delivery. I’m passionate about promoting great brands and this is one of them.”

PHAEDON STOUGH | CEO & CO-FOUNDER, INNOVATION BAY

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.

shape system

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.

Visit Innovation Bay

Lighthouse Test

These results are from mobile Lighthouse tests on home pages, conducted on the same device.

Before

Performance – 77

Accessibility – 89

Best Practices – 92

SEO – 67

New Site

Performance – 95

Accessibility – 98

Best Practices – 100

SEO – 100

WAVE Accessibility Evaluation

These results are from audits of home pages.

Before

Errors – 28

New Site

Errors – 0

Website Carbon Calculator

These results are from audits of home pages.

Before

Worse than 99% of websites

6.78g CO2 / pageview

New Site

Better than 79% of websites

0.16g CO2 / pageview

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

more case studies

Seedlab Australia

View Case Study

Healthy Heads

View Case Study

Taste of Summer

View Case Study