Re-designing dotcentric

Last week we launched our new website! We thought it might be of interest to discuss what we were aiming to achieve and some of the design decisions we made.

In essence we wanted to communicate our brand message a little louder in an already highly competitive market. We have always had a strong vision for what dotcentric represents. Simply put our brand proposition is to build better websites for our clients and their audiences. This means combining a user-centred approach to design along with powerful back end development that allows us to deliver a diverse range of solutions from small micro-sites right through to fully content managed e-commerce solutions.

And so these questions led us to consider - how best do we communicate all this?

Objectives and goals

Our original web presence was a striking and memorable one page site that communicated our proposition in a brief but succinct manner. We had great feedback from clients and it served its purpose well. However it was only ever designed as an intermediate solution and we knew that in the not too distant future we would need a site with much more content. Essentially our main objectives for the new site were to:

• Give clients a stronger idea of what our brand stands for
• Provide more detail with regard to our services and expertise
• Explain how we solved a selection of client problems with detailed case studies
• And finally, share more of our expertise and experience with the web community

The site needed to accommodate more of our current work and go into further detail on the services and expertise we provide. This couldn't easily be accommodated elegantly into our existing 'one page' solution. Essentially we needed something that would scale up suitably and easily allow us to publish new content on a regular basis. We also wanted to share more of our expertise and experience via a blog dedicated to providing articles for both clients and the web community.

We were also aware from the beginning that however beautiful and creative our 'one page' solution was it would never perform well with the major search engines. The fancy scrolling effect we had implemented didn't sit well with smart phones and tablets so was also something we wanted to address. Finally we wanted to focus on a number of different audiences and were keen to make sure that we would appeal to each one in the right manner.

Designing with a purpose

Once we were happy with the aims and objectives and the specific audiences we had in mind for the site, the structure came together very quickly. This was largely due to defining a strong brief initially. At dotcentric all projects start with pen and paper. As a team we sat down over a coffee (or two) and planned our approach, working up the various levels of importance of the content we wanted to focus on. Wireframes came together quickly and we were easily able to work up a strong structure to house our content. Below are a few early examples:

Creating a bold look and feel

When it came to thinking about the visual side of the design we scribbled down a list of descriptive words that summed up our brand values. This allowed us to have a 'look and feel' and 'tone of voice' to really hone our design against. We aimed for a striking bold look that would be memorable but always put the focus on the content. We had previously spent some time on our visual identity so much of this could be re-used from the original site. The design we hope feels bold yet friendly, professional but approachable. More importantly we hope it engages our key audiences in the right way.

Creating easily digestible content

We wanted users to be able to take clearly defined routes from the home page and throughout the site to find content of interest to them quickly and efficiently. We attempted to achieve this by engaging our core audience on the home page with a number of key questions as well as providing lots of links for our secondary audience to delve further into the site. Each internal page then uses a side bar and specific call to actions to allow users to move into other areas effectively.

We looked at how our audience could easily scan the site quickly and get a feel for our values and approach without having to read every word. We're well aware of all the research on the average amount of time users spend on web pages. With this in mind we created strong headings and short lists to help break up our content and provide pages that were easy to scan and absorb our important key messages.

Designing in the browser

Rather than creating a set of static photoshop mock ups of each page, once we had both the wireframe structure and the look and feel defined we moved into HTML and CSS to get a better feeling for how these designs would work in practice, in various browsers and at different screen sizes. Because we were using quite alot of CSS3 effects throughout the design we needed to also make sure that they would degrade gracefully in older browsers that do not support some of these new advancements. Once we were happy with the various interactions and after a round of user testing we created the full set of templates and integrated our own custom CMS to make easy updates both now and as the site grows with time.

Although this post only covers a brief overview of some of the decisions we made in our design process we do hope it gives you a better idea of what we were aiming to achieve with our re-design.

Do take a look around the site and let us know your thoughts.