The Citizens Online website redesign
In with the new
We needed a new website! Everybody at Citizens Online agreed. The previous version had served us well but it had become over-grown and harder to use and navigate over the years. Additionally, our old logo felt tired and out-dated, and we wanted a fresh image and to feel confidence in our website again.
The website redesign formed part of a wider rebranding exercise through the autumn of 2017, where we worked with Mark Epton of Advocate ethical design agency on a fresh brand and visual identity for Citizens Online. We were delighted with the work Mark did with us to clarify who we are as an organisation and to help us communicate why the work the work we do is so important.
This website and our social media accounts have been updated to reinforce our identity as digital inclusion experts, and to help us communicate more confidently about what we do and why we do it.
This blog post introduces the new site to the world, and explains some of the design and technical decisions we made. It has been quite a long process but now we are ready to launch!
This is just the start. Websites are rarely static creatures, and we have plans in place to keep the site fresh and the information accessible. We would be glad to receive your feedback about the new site design — tell us what works for you and what things you think could be improved, via our contact form.
Beginnings
We began with some detailed and impassioned team discussions about what we wanted from the new site! My role was to hold together our intentions, as an organisation, for the site, with the technical details of how the site would be implemented.
The first part of the process for us was to think carefully about audience. Before making decisions about blogs and colour schemes and contact forms and menus and widgets, we needed to think: who is this site for and what do they need to get from it?
As an organisation we have varied audiences that we expect will visit our site. We therefore decided to prioritise Calls To Action (CTAs) on our front page that would immediately speak to our key audiences and take them to the information they need, and make it easy for them to contact us. We got together and thought about our various visitor personas and what their expectations of the site would be, and particularly what key words and language they would be able to engage with most readily. These personas helped us think about the potential needs and intentions of:
- an enthusiastic person who is interested in volunteering to help others get more from digital technology and the web
- a manager at a local authority who needs to find out more about a requirement to implement a digital inclusion strategy in their area
- someone from a potential partner organisation in our sector who we have perhaps met at an event, who then visits our site to find out more about what we do and how we might work with them.
We wrote out a selection of words and phrases on the inevitable (!) coloured post-it notes and played around with which ones we thought our visitors would want to see on our site. We sorted these into a hierarchy where some would become elements on our main navigation and others would be words that would be highlighted within our content pages and blog posts.
We then tested these by sending out a survey to some colleagues in our sector to ask them what language and labels they would expect to see on our site and which words and phrases would be meaningful or appealing to them. This helped us narrow down and confirm the wording we would use on our navigation menu and page titles.
Our approach to re-thinking the site and its design was based on Dan Klyn’s three-aspect approach to information architecture. Dan talks about developing an information architecture based on ontology, taxonomy and choreography. Before thinking about “choreography” and how the site is going to function, you need to think about how the site content is structured conceptually — its taxonomy and hierarchy — and before you do that you need to establish the “what” of your site — the “ontology”. What are the objects and materials that your site is going to consist of? What kinds of things will need to be given a home, included, labelled? What will need to be written or collected, and who is going to do that?
We believe it is a mistake to start off a website design with the question, “what do we as an organisation want to say to the world?” This risks ending up with masses of content that we have to find a home for, that almost nobody will ever read.
There is an argument that it’s mistaken to think of your site as a marketing tool. Once someone finds your site, the chances are they are already somewhat interested in what you have to say. The site has a slightly different function, then: not one of reaching out to an audience and “raising awareness”, but of reassuring the visitor they are in the right place, and easily allowing them to find the information they need to decide if your product is the right one for their needs.
Decisions, decisions
Our first decision was to build the site using Wordpress. This is because we knew that the platform’s support for accessible design was excellent, and we already had some familiarity and expertise with Wordpress customisation within the team. After considering some potential themes and the layouts they would support, we decided to base our new site on Aaron by Swedish developer Christina Nymark. We knew this would enable us to build a site that had well-structured pages with ARIA labels where necessary (important for accessibility); and a responsive design, as it is a priority that the site should be fully accessible on various screen sizes including mobile devices.
As you will see if you compare our site to Christina’s, we have done a lot of customisation of her theme!
Some decisions we made were in relation to the layout of our main navigation menu. This is a single menu, where some more complex sites might have two or even more different navigation menus. It does not have any nested sub-menus, and contains links only to our core content pages. In this way it supports our hierarchy and prioritisation of content, and avoids the accessibility and categorisation problems that nested menus can create.
As a result of this decision, our full list of pages is available in the site map in the page footer, and some of the content that could have been given its own static page is instead being produced as blog posts, blending insight into our work and expertise with the latest news on what we are up to.
We opted for a single-column design, with no sidebar, as we thought this would help with readability and clarity especially on smaller screens.
We could have made fewer pages for the site, at the cost of making them longer, but we have tried to keep our pages of reasonable length so information is easy to find and things don’t get “hidden” or forgotten at the bottom of overly-long pages. Having looked at our word counts, it turns out that our longest page is Meet the Team (1500 words) — make of that what you will!
We also considered the issue of a page for Frequently Asked Questions. While there are proponents of the FAQ page as a good way of making information easily accessible, we were ultimately swayed by some of the advice out there that suggests FAQ pages are often a poor substitute for having a good information architecture in the first place, with the information properly presented in context on the site’s actual content pages.
Currently we are not using tags as a way of structuring our site content, but we have set up a few categories for blog posts. As the site content grows we will assess how to use categories and tags in a way that is helpful for navigation and searching without becoming messy.
Accessibility by design
In developing the site design and content we have aimed at all times to follow the main guidelines for accessible web design and to create content that is as widely accessible as we can. For us, accessibility is not an add-on: it’s not about compensating for design flaws by providing special features for a minority of users who are disabled. It’s about inclusive design: design that enables everyone to have a better experience.
There is not space here to detail our whole process, but in summary we are proud to say we have:
- aimed to use clear and relatively jargon-free language so that text is as comprehensible as possible
- avoided long paragraphs in general
- set the line length (measure) of the page text to within the recommended range, and used generous line spacing (leading) and paragraph spacing
- provided captions or alt text for images and icons
- used appropriately descriptive, multi-word text as the content of links
- used colour combinations with sufficient contrast
- styled links with an underline and a light background so they stand out from surrounding text
- not represented visual information purely via colour differences but with pattern or texture as well
- used table mark-up for tabular data only, not for general layout
- tested that our site is accessible to keyboard-only navigation
We hope that all visitors are able to access all the information on the site without difficulty, but if you come across an accessibility problem, please let us know.
Our new brand
The site structure and content is only half the story. The most visible part of the new site launch is our new brand identity and the graphic device which you can see in the logotype at the top of each page and in the site icon. The purple circular swoosh device conveys our passion for inclusion, for projects and partnerships that include everyone. The darker purple colour of our previous website and logo has been transformed — being split into a lighter, brighter purple and a smart, accessible blue that we will use for many of our text headings and for the name of our organisation in the logo.
Alongside the fresh visual identity we have a new strap line: “digital inclusion experts”. For us, our years of experience in the sector and the depth of our knowledge and research base are central to our identity, and we wanted to emphasise these in our re-design.
Our social media channels (twitter, facebook, medium, youtube) are the primary ways we will be communicating outwards what we are up to. Let’s face it, almost nobody checks your website directly on the offchance, just to see what you are up to. Visitors are most likely to arrive having read an article or seen a juicy tweet or update on social media.
Our thanks and appreciation go to Mark Epton of Advocate ethical design agency for his work in supporting us with our re-branding process. We recommend his services!
We would also like to thank Ben Jarlett, Rob Smith and Harriet Hungerford (Digital Unite) for their kind and helpful feedback on accessibility, user experience and some technical issues. Responsibility for any remaining problems in these areas rests with Citizens Online not with them!
Lessons learned
We have learned a lot from the experience of the redesign. As well as a better understanding of the nuts and bolts of Wordpress and CSS, there are some things from managing the process in a more general sense that we want to document here:
- Test earlier. We learned loads from initial user feedback and it’s true what everyone tells you: you will miss things in your own work that other people will spot straight away. It can be hard to share a prototype for feedback when you know it’s just in draft, but it’s so helpful to have that feedback before you go too far down a particular path. So get those eyeballs on it!
- Draft your content early. Before you start doing interface design, it’s really useful to have some proper copy to work with, not just dummy text. This gets you thinking about links and connections between pages and what needs to be said where, and in what order.
- Launch when you’re ready. We took down our old site relatively early because we were keen to launch our new brand identity and our new site design. However, this led to us doing quite a lot of further design work on the new site while it was already live and online. If you need to replace your old site before the new one is fully ready, put together a basic holding site out there that you can live with for a period of a few months, say.
- Integrate social media. Your social media strategy should be integrated into your website development process, not seen as a separate area of work. Social media activity and regular new content is a significant way of generating inbound links to your site, and your site needs to be able to reflect and reinforce the messages you are emphasising through your other channels. We believe we are going to be putting this into practice, so that our social media presence and our website complement each other well.
We hope this review has been helpful! Let us know what you think about our new site via our contact page or send us a tweet.
