The process of re-designing and building our company website began several months ago.
We had a number of reasons for wanting to refresh and re-invigorate our site. As a general rule it is a good idea to consider a refresh every 1-2 years to avoid looking dated and to ensure that the message conveyed is in–line with current business offerings.
Successful companies are constantly evolving in a variety of directions, from subtly tweaking their target markets, to hiring additional staff with new skills, and the company website is one of the best ways to communicate these developments to potential and current clients. The pace of daily business however means that small (like us) and medium-sized companies in particular, can become so focused on serving our clients’ needs that issues like the company website become a secondary concern. It is therefore vitally important to conduct regular website audits at pre-determined intervals to ensure that the outward message being broadcast is in-line with the inward reality of the products and services offered.
When we performed an audit, we realised that our existing website was no longer communicating what we do as well as it used to. This instigated an intense internal discussion as to how we could communicate more effectively.
We eventually agreed on the concept that the site should reflect the normal conversation we might have face to face when discussing our business and what we do with a potential customer for the first time. This approach would help us keep the content lean and to the point. We also hoped that this approach would guide users through our site, and provide a greater chance of them reading all the key content.
Based on this premise we sketched out the key content areas to be included:-
- Who we are
- Who Have We Worked For (with examples of work)
- What We Can Do For You (the services we offer)
- How We Do it (our process)
- Contact Us
Our focus on lean, sharp copy inspired us to streamline the site as a whole by presenting the main flow of content as a single page. This has been one of the big new design trends of recent years, and we decided it would be an appropriate way to present our content, despite a few potential drawbacks (which we’ll get to in a later post).
Armed with this strong basic concept, and a mood board of graphic styles (shown above), I met with Andy, one of the freelance designers we use regularly, to brief him on the project and get the ball rolling on the visual designs. Over a curry and a pint we sketched the layout of the sections.
Several weeks of back and forth followed. The initial designs captured the general concept very well; they were terrific, clean and crisp and bang on scope. But as can often happen with design, it’s not until you actually see it taking shape that you realise a vital ingredient is missing. The pure white background in Andy’s initial designs gave great contrast to the geometric shapes and coloured strips which would lead the user through the content, but scrolling down the page, it felt a little too minimalist and clinical for our busy, thriving business.
The challenge became to find a new, relevant background which would focus users’ attention, but still give us clean and crisp contrast to the main content.
Revisiting our original aims for the site, in particular how to give visitors a true insight into the company and our collective personalities, I came up with the idea of a group photo showing the company in action, real employees taken at our desks, creating a subtle, pertinent background in a parallax effect. The next day we had a photographer take a series of images on this theme selected the most suitable, and sent it on to Andy.
Soon we had a new set of designs which incorporated the office photo.
Now I could begin building in earnest. I used the HTML5 boilerplate as my base, as has become our default process for new bespoke html builds.
We contracted a professional copywriter to produce the final copy for the site. Based on his feedback the sections where rejigged and re-titled to become:-
- Who we are
- What we do
- How we do it
- Who we work with
- Get in touch
The build process initially focused on creating pages for a full-sized desktop screen. I had discussed with Andy previously the value of his designing the site for several specific ‘key’ sizes but ultimately we agreed that this was the wrong approach. Given that the site would have a very minimalist design anyway, it was thought better to tweak the design for successively smaller screens during the build process rather than pre-define three different designs. This strategy would make it easier and faster to progress from idea -> implementation -> test, and was better to suited to our goal of making the site look ‘designed’ at every screen size, not just the established iPhone and iPad sizes.
Once the ‘initial’ build phase was complete the site was released to a group of test users who were encouraged to use the site on a number of different devices to see if they could ‘break’ it. All feedback was catalogued, and each item appropriately actioned. In some cases this involved fixing a bug or anomaly; in others it was simply making a note of a something to return to and check later.
After several iterations of this process, and with the final copy agreed, the site was ready to ‘put live’. There were still a few minor outstanding issues arising from the feedback but these were for the most part ‘nice-to-haves’ and did not detract from the functionality of the site. We knew that this would be a site we would constantly want to improve and evolve, and there was no reason to delay implementation any further. The site was launched last month.
In future blog posts we’ll get into some of the code that we used to tackle specific challenges on the site, discuss the issues we are currently looking to improve upon, and review the evolutions that have already taken place on the site.
