Cobbler’s shoes – the story of our website

Written on 28 February 2017 by Kate O'Rourke

This month, Tobias & Tobias launched a brand new (and much improved) website. As many can sympathize, being a digital design agency and redesigning your own website is a huge feat. Not only does everyone have their own strong opinions, but there’s also the matter of having the time and resources to actually launch it.


In a perfect world, we would have treated the redesign like any other client project (research, workshop, sketch, wireframe, design, develop) with a team dedicated to making the launch deadline. However, as a busy, smaller agency, this was just not realistic; designers are typically resourced 100% or more on client work, which always takes precedent. The website redesign became something designers would pick up between client projects, which was usually not for very long. As a result, months, even years passed and the website became even more out-of-date. And we start feeling like the “Cobbler’s children” – we make shoes for everyone else but go barefoot ourselves. So I will attempt to explain our “process”, and challenges we had to overcome in order to finally make the pair of shoes that we’re all now quite fond of.

First impressions

Six months ago I started working at Tobias & Tobias as a Visual Designer – I’ll just say that the website is definitely not what sold me on accepting the position. From the job description, I was intrigued by the opportunity, but as your stereotypical judgemental designer, I was hesitant as their website was underwhelming. Nevertheless, I was open-minded, and I’m glad that I was. After my interviews, it was clear to me that Tobias & Tobias is made up of highly intelligent, talented people who valued design and user experience of their clients’ products to the very core – but this came at the price of their own website’s quality. So I accepted the position, recognising that their website was not an accurate reflection of the quality of their work. But in the back of my mind, a redesign needed to happen soon, and I had a funny feeling that I would be the one stepping up to the plate.

New to the team

I think that a fresh perspective was needed to progress on the designs that the other designers had been working on sporadically over the last year. New to the team, I had the objectivity that’s often lost after working on something personal for so long. About a month after starting at T&T, I had some downtime from client work. I thought I’d give it a go, so I began by gathering all existing brand elements, documents, works-in-progress, mood boards and sources of inspiration from the other designers who had worked on the site. There were already some page layouts and visual elements that had been designed, but there was still lots to do. The layouts needed to be refined, interaction details to be fleshed out, the colour scheme needed to be decided on and most importantly, we needed real content.

Making decisions

As a new designer to the team and taking over a personal project, I felt weird about making bigger decisions (e.g. colour scheme) without consulting the other designers and management. I held a few meetings to discuss, but quickly realised this would only slow down the process – too many cooks in the kitchen! I decided it was best to hold fewer meetings and ask fewer questions. This saved a lot of time and really helped make good progress – topics like the company brand turned into lengthy discussions about company history and values, when all I wanted was to figure out the colour scheme!

tobias-and-tobias-new-website

 

It was clear that in order to make any progress I shouldn’t rely on anyone else to help make decisions – after all, they weren’t on a deadline so they didn’t have the same sense of urgency that I did (we had arranged for a developer to start working mid-December). I took what had already been designed and discussed and fleshed out all the details of the desktop page designs, making decisions regarding the colour scheme, UI elements, tone-of-voice and imagery.

Adding real content

The next task was bringing content and design together. I created a rough copy deck, filled it with a copy from the old site I thought was still relevant as well as my suggestions. One of our directors, Chris Millar, edited and added more copy. With this content, I hacked most of the remaining page designs together in a 2-week ‘sprint’. I found it much easier to get decisions on layouts and designs with real content and ‘almost ready’ copy in-situ. Once the team was happy with it, I spent a couple days designing a few of the mobile screens.

ux-agency-redesigned-website

I met with and handed over the page designs to our fantastic developer, Penny Scaffold. We reviewed every nook and cranny of the site so that it was clear how the interactions worked on all devices.

The hard part was done – or so I thought.

Showcasing our work

A big challenge was the case studies, as T&T primarily works with large finance sector clients with strict confidentiality clauses, so we are unable to show anything on the site that reveals their identity. This is a copywriting challenge of course, but even more tricky when it comes to imagery. One of the more time-consuming aspects of the project was re-working existing imagery to be anonymous yet relevant and a compelling showcase for our work.

Photography

ux-design-company-new-websiteThroughout the design process, I often reflected back to my own experiences of looking for a job and the thing that usually entices me to reach out is the ability to visualise what it’s like to work there. I felt strongly that the T&T site should have quality photography throughout the site, but especially for the banner images on the “About”, “Work” and “Contact” pages to complement the content of the pages and give insight into the company.

We decided to use Ian Andrews, a previous employee of Tobias & Tobias but also a talented freelance photographer. I produced a detailed brief with inspiration as well as details like the size of the banner images. He came in for two separate sessions to shoot meetings, interactions around the office and headshots. A big part of the theme for the photography was our own team members – they needed to be the stars. I was sure to provide lots of warning to everyone so they could plan to be in the office. Ian was fantastic, and the photography was both fun and a great success! It was a great way to get everyone involved and excited for the launch of the new website.

An end in sight

Our superb developer, Penny, and I formed a fun and productive partnership throughout the month of development. While I worked on another client project, she built the site in WordPress and would contact me every week or so to update me on progress or with any questions. For the last week before launch, I blocked out all other distractions and put my head down to complete the last bit of production work (e.g. mobile banners and thumbnails) as well as testing the site on different browsers and devices. There were a few hiccups and revisions made to tablet and mobile views, but for the most part, it went smoothly. Final copy was simultaneously edited in WordPress by Chris, who had engaged a copywriter to help with the fine-tuning. We were ready to launch!

Beautiful shoes

A week ago our website finally went live. It took a while, but in the end, we all have something of which we are all very proud. The cobbler’s children finally have a beautiful pair of brand new designer shoes!

 

About the Author


Kate O'Rourke

Kate O'Rourke

Designer with a passion for collaboration and translating complex ideas into useable and meaningful outcomes. Canadian, Seinfeld nut, avid snacker, cat enthusiast and good listener.

Linkedin Profile

More from the blog