The challenge
CogCo’s website was outdated and not reflective of our expertise, work and growth over the last 6 years. The site felt static and clunky with blocks of text, multiple pages and little animation.
Building on work done to define our brand pillars and tone, my goal was to translate that into a brand new website that would showcase these and attract new business. The three brand pillars we wanted to exemplify through the website were CogCo’s specialist expertise, global reputation and cutting-edge methods. CogCo had also made developments in the AI space yet this was not showcased on the site and needed to be. At the same time, we wanted to maintain the approachable tone the current site had.
The result
CogCo’s design system was updated and utilised in a brand new way to create a transformed site reflective of its brand pillars. The site was streamlined and cut down from 8 pages to 5, showcasing a variety of work across different sectors and the company’s global reach. The design reflected our cutting edge approach through the use of a dark, bold colour palette and bespoke illustrations created using Claude Code.
The approach
As this was a big overhaul of CogCo’s existing site, I had the scope to experiment with a different visual direction, so I took some time to create themed moodboards to explore where we could go. CogCo has a fairly bright colour palette but also uses black as a primary colour, so when looking for inspiration, I looked at dark sites and sites with bold accent colours.
There was a lot of experimentation with how to mesh the two colours together, but eventually I landed on focusing the yellow on buttons and illustrations, with black for backgrounds and image gradients.
The illustrations were made using a custom Claude Skill I created and took the form of thin, isometric line art shapes which felt modern, clean and tech-focused, which is reflective of the developments CogCo has made in the AI space through its own AI product.
As CogCo is a behavioural science consultancy, it was difficult to source imagery as many projects focused on services or offline behaviour, so I opted for using stock photography but was intentional about choosing imagery that was a little more abstract, as well as adding a gradient effect and transition to elevate them beyond regular imagery and mesh them with the dark theme of the entire site.
The final version of the website can be seen below.
Alongside this was an updated design system and a custom Claude skill to create illustrations that could be used not only on the website, but across our internal work. This was also the first use of a Figma and Claude Code workflow at CogCo, making it a great source of insight into how we could begin incorporating AI into our design work.
Reflections
While having the space to experiment with different visual directions was nice, it was also meant that there were lots of, often conflicting feedback before we really knew what we were working towards. For example, two different people saw the homepage and one asked to bring in more colour, whereas someone else asked to remove colour.
It was easy for this asynchronous feedback to happen as I would often quickly share a snapshot of the prototype with whoever I was in a call with at the time to demo something, but if I were to redo this project, I would ensure all key feedback sessions happened in a call where everyone required was present and comments were logged chronologically, with reasoning, in a shared Google Doc.
This would save design time by reducing back and forth and changes and ensure everyone was clear throughout the process about what decisions were being made and why.