08 / 11 / 13

We were asked to improve usability, organise content and provide a better experience for the Sacro website.

When we were approached by Sacro to help create a new website we jumped at the chance to work with such a renowned organisation.

Founded over 40 years ago, Sacro works independently and collaboratively within Scotland’s communities to provide support, prevent conflict and challenge offending behaviour wherever the need arises.

You can visit their site at sacro.org.uk or you can read on and find out how we worked with them to overcome their challenges and help solve their problems.

Focusing on Users

When we design and build websites we make it as easy as possible for users to get to the content - we don't want to hide things away, we want users to find the information quickly. Using a website shouldn't be a challenge, we believe it should be intuitive.

We began by understanding the nature of Sacro as an organisation - who they help, where they work and what they do. Once we'd gotten to grips with this we began a content audit of their previous site. It had grown wild and out of control and become an insurmountable jungle of information, pages were out of order, menu's weren't always available and a colour coding scheme was introduced to sections but varied from page to page - this required some rationalisation. They had good information, it was just tucked away from users.

More efficient and easier to manage

Our new restructuring had to cope with a lot of information for a lot of different demographics on a lot of devices - one of the main design challenges was to provide an experience that still felt "native" on smart phones as well as desktops. The new site had to incorporate content ranging from information designed to help people wanting to visit a relative in prison, original publications from Sacro, upcoming job vacancies to office locations and services available there.

We needed a system for breaking down the existing content in to more manageable chunks and organising it in a more semantic manner. With the Communication team at Sacro we devised a menu structure that allowed users to find information easily as well as giving the site search functionality. By focusing on the demographics that will be using the site we were able to split the site in to four main sections: Advice, Our Services, Our Organisation and Our Thinking.

Organising the Content

To avoid confusion and clutter, the site uses a very simple template that focuses on the main content and plenty of white space. We didn't want to distract users from their purpose - we want their visit to be efficient and easy.

The content was rewritten for the launch of the new site - this was a huge undertaking but it allowed for information to be updated, brought in to line with other projects and to set a tone throughout the site. Through our research it was highlighted that the literacy level of some of our demographics was considerably lower than expected - our solution to this issue was to provide overviews where possible and to highlight key information rather than force users to wade through walls of text to find the relevant information.

Based on an understanding of visitor numbers to the old site we identified that both Service and Office pages were the most visited. Previously Office pages had missing or differently ordered information when compared with each other, the new site uses distinct fields when editing that helps alleviate these issues. We added in a number of new fields to help Sacro grow both in the online and real world - we've improved social media connections for each office on a hyper local level as well as making each Address field link directly to a Google Map showing the location of the office. By adding in the connected Services that the Office offers we've linked useful content together - people who are looking at a specific office need to know what they do - and allowing users to stay focused on their goal rather than distracting them extraneous content.

We introduced 4 new colours to be used alongside the existing branding and throughout official materials. The strong, royal blue of the logo was complimented by fresh, bright colours to bring about a sense of rejuvenation that Sacro gives to it's clients and to draw upon the innovative ideas that they use in their restorative work. These colours are used throughout the site to provide a visual break between sections. The Orange is used for Advice due to it's warm, friendly hues, the trust-worthiness of the Blue allows us underline the importance of the work undertaken, the vibrant Pink creates the impression that the organisation is forward looking and enthusiastic whilst the Lime highlights the Thinking section pushing the notions of an organisation that is producing solutions and researching ideas.

By matching the colour of the breadcrumb with a tint for the sidebar we provide visual feedback that allows a quick understanding of the users location within the site. By making the breadcrumb bold and bright we've helped break up the navigation area from the main content making it easy for users to process the information.

The Future & Usability

As all of the content had to be repopulated it gave us a chance to organise the content's metadata. Thanks to this we are able to show relevant locations and case studies on the Service pages, sort through Publications by topic and find advice by subject - it allows us to knit various parts of the site together and provide a more useful experience for visitors.

The site was built using modular structures so that it can adapt and evolve over time in to something should still fit within the templates but has room to grow. The metadata can be used to help the site grow and expand and will provide valuable information for linking new content with existing and new sections to form and mutate.

As with all of our recent builds we wanted the site to work on a number of devices - we use a number of techniques to pull this together which allows us the most flexibility. All of the content and images used will cleanly resize for the device and the information has been handled semantically so that search engines (and people) can find the relevant information.

You can visit the site at sacro.org.uk.