With all this talk about shoes, I can't help but draw a comparison with our current (or former, depending on when you read this) site. While it's been a comfortable pair of shoes for us for some time, things around here have changed. We do things differently compared to a few years ago. We’ve evolved the scope of our work, we’re tackling larger problems, and it felt time to say goodbye to those old, worn out kicks.
Focus
In order to better represent what we do, we decided to focus more on the work we do. We needed a new visual representation of us that matched our substantial rebrand... our first in 11 years, and the topic of a whole set of other posts coming soon. We wanted to better express who we are and how we go about things as a strategic design consultancy.
Hack it
During a week-long hack at the tail-end of the summer, a bunch of us got together and hashed out how we would tackle this thing.
Side note: redesigning your agency's site is far harder and more of a challenge than I think any of us expected.
During the hack week, we uncovered some home truths. We found what our current site did well, and the areas where it came up short. We established three core personas - amalgamations of all the lovely clients we've worked with over the years - and used them as our guiding lights. Getting under the skin of our clients helped us understand what they were looking for and how we could help them once they arrived on our site.
Showing the work we do
So many agency sites tend to speak about themselves first - we’ve been no different. But in our new site, we’re striving to make the story about the client first. Their needs, their challenges, and how we help them get to where they need to be. My challenge has been designing to maximise the impact of this new approach...
Confident and clear
I'm not going to lie, designing our site was hard work. Lots of opinions, lots of feedback and a rolling lack of availability due to client work meant it was a serious slog.
Yet the guiding light of our personas, coupled with a growing body of content and a strong narrative structure, made the design language come to the fore... starting with typography first.
We wanted the design to have a resilience and understated confidence, which - to me at least - has always felt very Clearleft-like. The strong, short and imperative phrases we developed to speak directly to our personas throughout the site called for a typeface that was equally strong and solid.
A dependable, self-assured sans-serif meant we could convey our message for those imperative statements, but we found in tests that it suffered at smaller sizes.
Considering our intent to publish even more content in 2017, we looked long and hard to find alternatives. We eventually came back to an old favourite that perfectly addressed the readability concern while dovetailing nicely with our display font. The web-ready sans-serif pairing then made its way back into our brand work, which was still in flux at that stage.
Art direction
The direction of the site followed the same path as the typography. We wanted a strong foundation on which we could build, which meant we dialled back the bells and whistles and doubled-down on less is more, with bursts of colour to help emphasise and focus.
For our 'stand out' case studies we needed a more compelling way of communicating our work, without resorting to the general 'here is the work we did on some devices' approach.
Though we show our work in situ where needed, the essence of each piece of work was intentionally summarised as an art directed approach. The style of each was then echoed throughout the rest of the case study, helping to bring the narrative structure to the fore.
Animation
It's one thing to paint pictures of websites, and something else entirely when it's 'alive'. Working with resident JS wizard Graham, we browsed, shortlisted and storyboarded a raft of animation ideas and concepts, from homepage messaging scenes through to text link behaviours. Truth be told I felt a bit like Dr. Frankenstein laughing maniacally as his creation came to life.
Next steps
As Charlotte created the pattern library without losing her mind (due to my incessant changing of the design) we'll be creating a living style guide, powered by Fractal.
That pattern library will then plug into our Craft CMS install, meaning any tweaks and changes we make will be updated in real time. As we continue to push new blog posts, publish new case studies and add new team members, the CMS should alleviate any burden on our front-end team to keep pushing Git commits for every single editorial change.
Overall we're happy with our new pair of shoes. They fit better, they feel more grown-up and they say more about us than those tatty old kicks were doing. Hope you feel the same!
Read the next blog post about the new site and rebrand: Where to draw the line and how to get over it by Rowena Price