The challenge

We inherited the Teckro project using a Prismic backend & Next.js. We wanted to ensure that this was tuned up to the best possible performance and as flexible as the team wanted it.

We needed to get this up and running as fast as possible, with scalability in mind, as there was already 100 something pages built with a further 150 coming over the next year.

So how do you launch a site and design system in record time, with a focus on still being maintainable 3 years down the line? With a rock solid design system, an extremely well thought out content management structure, and a team to back it up... of course.

Teckro design system using Chakra UI, building fonts, button and checkbox with Figma

Standing on the shoulders of giants

First things first, we needed to convert the current brand guidelines they had to a fully fledged design system. This is where Figma and Chakra UI comes in. We create an accessible colour scale using the Colorbox from Lyft here.

Then we took this color stepper and built it into our own fork of the Chakra UI Figma Kit. This way we instantly leveraged Variable components, auto layout and colour overrides, identical to that within the Chakra UI framework.

Pretty nice considering that's 100+ hours of work condensed into a day or two.

Prismic design schema, with browser for reference

Measure twice, cut once

Because Prismic is notoriously easy to build incorrectly (we're on our 5th inherited project we've had to fix), We wanted to ensure that every single aspect of page building had been thought about, evaluated to scale and polished before adding it to our slice inventory. Meaning every page should feel consistent, predictable and intuitive.

Our criteria of success is measured by how easy it is to throw together a page that looks like it's been built from scratch by a top-notch developer.

Mobile designs of all the pages, UX first, Prismic friendly pages

Accessible & responsive

Despite the level of flexibility, we had to balance this with creating clear and beautiful page layouts. We think we nailed the balancing act as every single element on page is semantically built meaning screen readers, accessibility tests and web crawlers will list top marks.

On top of this, we've put efforts into ensuring the UX is just as good on mobile, whether you're using an iPhone or even a Palm Pre, you're in for a treat. Pssst, if you really want to see a UX trial-by-fire try navigating to the resource section and filtering.

Jono and his team are absolute rockstars. They blend technical savvy with practical business sense. They are in lock-step with our website goals and have really made our website come to life.

Kelly Brown - Chief Marketing Officer