We won the work to completely overhaul the ctbto.org website. The CTBTO appointed us, as a specialist full-service agency, to migrate their website to a whole new design. We worked closely with the internal communications team at the CTBTO to deliver on their vision.
This was an interesting project for many reasons, not least because it was a wonderful opportunity for our design team to do a complete redesign. The CTBTO had major content and navigation challenges to overcome during the process of moving to a modern CMS, so there was a major piece of UX and information architecture work associated with this project. As well as building the end product, we also trained their staff, on site in Vienna, to enter and maintain their content.
UX and information architecture
We spent a week on site with CTBTO initially, to capture and expand on their requirements and goals. The workshops from that week were diverse, but included:
- Stakeholder interviews (to discover the differing priorities within the organisation)
- Creating personas and aspirational user journeys (to discover the desired flow of information)
- Analysis of existing analytics data (to test assumptions about what the public want)
The information we collected from these exercises combined together to give us the proposed grouping and ‘weight’ of the menu items, which we presented back to the organisation using an Invision project shared with their team, which you can see below.
Having agreed getting the menu right was fundamental to the design aspect of this project, the diagram above formed the discussion point, allowing us to get the information architecture of the new website out of the way early. It got everyone to agree the ‘weight’ and grouping of the menu is correct, so we then moved on to the actual look and feel of the menu. The menu ended up being designed as a “mega menu” (a large fold-out menu structure) and we spent a significant amount of effort making sure we got that right. Below you will find some examples of wireframes for different viewport sizes (e.g. different devices to test responsiveness and access to key items):
Where and how the search experience is presented to the users of a website is undoubtedly a key part of the navigation conversation and CTBTO was no exception. The fashion at the moment is to have a very simple “Google-like” single search box on every page (see our client the National STEM Centre as an example), however in CTBTO’s case this wasn’t appropriate. To make search immediately useful, we needed to find a way to let users filter directly before they even submitted their keyword search. The nature of the content, that it is in unique silos and there is an awful lot of it, made the ability to pre-filter important for good search user experience (UX).
Having worked out the navigation and the search experience - effectively the “header” of the website and the information architecture - we could get on with wireframing the key parts of the rest of the website. We worked in Invision again and wireframed all the key “content types” and pages, search listings, section headings, special content (like reports and video) and so on, as whole pages. We put the Invision prototype together as a clickable experience, so we could demonstrate to the client the actual use of the proposed website and they could start to understand how the website will actually function.
Of course we continued to think about device support and modeled the content in at least three different viewport sizes: desktop, tablet and smartphone. CTBTO could see how both content and navigation would respond to viewport changes, responsively, via a set of wireframes like this:
Applying the visual design
Once CTBTO were happy with the wireframes, we started to put together visual treatments of all the main pages, at which point we also started to think about accessibility - colours and contrast, type sizes and clarity, multimedia replacements, and so on.
Visual treatments grow out into a wider set of designs and are also turned into actual HTML, so we can break them down into reusable components and ensure we have a coherent design “language” across the entire website.
Throughout the CTBTO project we favoured a “content first” approach. It is always better, where possible, for designers to work with real content as there are always unexpected points that emerge when you have to meet the requirements of an active editorial team.
Build, host and train
Once the initial design phase was completed, our designer dropped into a supporting role for the developers working on the project. The Drupal build could be assembled, the appropriate modules put in place, any “glue” code required could be written, content types built out, taxonomies created, search technology configured, and so on. In parallel the designer started to apply the component library to the website, so piece by piece the actual website began to come to life in the CMS.
In parallel again our systems team were in conversation with CTBTO’s internal IT experts to provision adequate hosting for the new website. We helped them identify the correct packages, deal with any gaps in what was available in the Red Hat Linux repositories and help them with things like firewall configuration, optimal web server configuration and so on.
Finally we trained their editorial team on the use of the new website, so they could begin to enter content (content migration was out of scope for this project) and we could be sure they were self-sufficient and able to continue managing their new website.
Keys in hand
The CTBTO had a brand new, fully up to date website, built with a modern CMS, ready for them to enter the content into and launch. Their IT team had all the information they needed to deliver the environments required, we continue to host a staging version of the website to facilitate their editorial team in their content entry efforts.
Contract value
Although contract value varies a lot depending on the length and depth of an engagement, the value for the design, build and training contract, for indicative purposes, was approximately $120,000 (exc. taxes).