Quattro Design Architects Redesign

Quattro Design Architects are a multiple award-winning architectural practice, based in Bristol and Gloucester. They have a special interest in sustainable design, housing, health, community and education projects. Their clients include local and regional governments, national agencies and education authorities amongst others.

The Brief

The initial brief asked for a conversion of the original site 'as is' to current accessibility standards for disabled and non-disabled visitors. The original design for their web site was visually strong - it was a product of intensive input by the directors who are all architects and designers in their own right. So the visual design was already done. Unfortunately, the distinctive visual design was delivered by an interface built with Flash and HTML tables / frame sets. That meant that much of the site was hidden from search engines, users could not easily bookmark the individual pages, usability was sacrificed to design and accessibility support for disabled visitors was nil. This was a direct contrast to the qualities of the business itself which is noted for multi-purpose, sustainable, accessible architecture.

The new site needed to be accessible, keep the existing design framework and be easily updated. After an audit of the original site we identified the following questions that we needed to answer:

1. Design: Could we convert the existing Flash/HTML design to an XHTML and CSS based interface that would separate the content from the presentation and be accessible?
2. Usability: Could we release the content from Flash/HTML pages, provide more logical navigation, good contextual links and better all-round usability including multiple browser support?
3. Content Management: Could we make the high quality content editable (power it all via a database), easy to update and easily discovered by search engines?
4. Cost: Finally, could all this be achieved without the expense, time and drain on the practice of a complete re-design? A total re-design might have been preferable from our point of view but would have meant significant extra charges to Quattro both in time and money.

It sounded like a challenge so we took it. In collaboration with the Directors we developed a brief that defined how the site would change dramatically behind the scenes but retain the visual appeal they had worked long and hard to create. Development commenced.

Design

The colours, typography and fundamental layout of the web site were reproduced in semantic XHTML and CSS to the WCAG (Web Content Accessibility Guidelines) standards from the World Wide Web Consortium. That answered the first question: Accessibility was now supported in compliance with:

• The Disability Discrimination Act 1995, Part III Access to Goods and Services
• Special Educational Needs and Disability Act 2001
• The Disability Discrimination Act 1995, Part IV Education

Not only would disabled or imapaired users benefit but non-disabled users would also benefit from an easier-to-use interface and easy-to-find content. The only remaining issue was the contrast of red on gray text for the logo but as this was a key part of the original design Quattro decided to retain it. Users who found the contrast difficult also were provided with access to a plain text version of the same page that they could swap between.

During that initial design phase the existing content was inserted in to page 'blanks' so we could precisely match the new pages to the original layout elements that were to be retained. Original CSS styling had to be developed based on existing techniques from the excellent web standards community that delivered complex layouts like the project areas links: On the home page they feature a hyperlink image replacement within multiple unordered lists to achieve the layout required. Using techniques like these with others written just for Quattro, page templates were designed that would eventually be populated with information and images from the content management system.

Usability

The usability of the web site was changed dramatically. Extraneous splash pages were removed. Flash menus and 'calls to action' were rebuilt in XHTML and CSS. Click-throughs to reach the content were reduced by 75%. Key accessibility and usability functions were included like inline text-zoom and plain text versions, a site map and site search facility and contextual links on every page. The second question was answered.

Content Management

The content management system (CMS) was built specifically for the Quattro site based on our existing AMOS applications. AMOS produces content that is easily found by search engines. Costs for Quattro were dramatically reduced by repurposing existing functionality to power the projects database, news and other content. The content was then revised by Quattro internally, with new projects being added and various edits taking place site-wide.

The new site is fully editable on every page with information on every aspect of Quattro's work, its methods, qualities and clients. The projects database has the ability to display results in many different ways and the content can be updated quickly and easily with the aid of a detailed step-by-step guide. The guide and the CMS were both created to make site maintenance fast and simple for all the stakeholders within the company. The third question was answered too with new content also added to bring the site up to date.

Summary

So now, clients and visitors to quattrodesign.co.uk can search for, find, access and use the information faster and more easily. Disabled accessibility is fully supported as far as possible within the existing WCAG guidelines and the brief. We've taken a design and reworked it to be editable and future proof for the benefit of all.

The final stage of collaboration with Quattro means advising on ways of communicating the changes to clients and drawing up a plan for potential future development of the content, the marketing and the design of the web site. Expect to see more great content from Quattro in your browser soon. This what Hugh Nettlefield, Director of Quattro had to say about us:

Quattro are very pleased to have been working with Grow Collective; we have been able to build up a brilliant and really effective working relationship, even though our demands have been quite difficult at times. Our needs and requirements have been understood and interpreted well. We are delighted with our new website which has undergone complete reconstruction and is now fully accessible and easy to navigate.

Acknowledgments

Thanks goes to Greg and Tom of Coast for the invitation to do the project, and special thanks go to Hugh Nettlefield, Director of Quattro Design as our main liason with the practice for his positive collaboration throughout.

More articles