Overseas Development Institute

Clean, simple and easy-to-use microsite design

We were commissioned by the ODI to produce a clean and simple site design, which would allow users to read one of their more popular publications – Good Practice Review – in the browser.

The Humanitarian Practice Network (HPN) was established by the Overseas Development Institute (ODI) in 1994 to provide an independent forum for policy-makers, practitioners and others working in or on the humanitarian sector to share and disseminate information, analysis and experience, and to learn from it. The only network of its kind, HPN plays a key role in examining policy developments and distilling practice. It is fast in capturing major new initiatives and good practice from a wide range of players, and documenting and disseminating this information to field staff and policy-makers. HPN’s aim is to improve the performance of humanitarian action by contributing to individual and institutional learning.

We were commissioned by HPN to produce a site design which would allow users to read one of their more popular publications – Good Practice Review – online. The site had to be simple to navigate, offer a comfortable reading experience, include a full table of contents, footnotes and give users the option to switch between different languages. It was also essential that the site was lightweight and have fallbacks for older browsers, as users would be accessing it from in the field and developing countries.

We designed the sites interface to be incredibly intuitive. Users are able to navigate through the publication by using the table of contents menu which is permanently visible on the right-hand side of the screen. We also built in features such as an image gallery overlay, so users can expand smaller images out over the screen and night mode, for when reading in lower light. We ensured the site was kept lightweight by using minimal javascript.

The site is built using WordPress. We built the CMS so that it is simple for admin to add complex and varied content but in a standardised way.

Fiasco have designed a fantastic microsite for our publications – which has dramatically improved the user experience and readability. They have a great understanding of design, layout and visual identity, and how to best showcase the content.Tania Cheung, Senior Communications Officer at Overseas Development Institute

To visit the full site, click here.

  • ODI Intro page on all platforms

    A publication's Introduction shown across desktop, tablet and mobile.

  • ODI Chapter page on all platforms

    A publication's chapter page shown across desktop, tablet and mobile.

  • ODI desktop chapter header

    The chapter header is very flexible to incorporate the wide range of imagery used across the publications.

  • ODI desktop text highlight and share

    Important snippets of text can easily be highlighted and shared straight from the publication.

  • ODI desktop image gallery

    Desktop image gallery overlay. This helps to pull focus to an image or other content when clicked.

  • ODI desktop night mode

    Night mode can be activated as an alternative for hard of site viewers.