The NEPAD-Infrastructure Project Preparation Fund supports the development of regional and continental infrastructure projects in Africa

The Brief

The NEPAD-Infrastructure Project Preparation Fund supports the development of regional and continental infrastructure projects in Africa, by providing grants to African Regional Economic Communities and Specialised Institutions.

Their brand and website needed a drastic overhaul in a very tight time frame to show case at an important Donor and Stakeholder meeting, so they came to us for help. They needed a new logo that not only represented Africa, but also their regional focus, and their 4 key sectors of activity.

Their website also needed a complete redesign. The purpose of the new site was to communicate the Fund’s operations to its Donors, Partners, Stakeholders and the general public.

There was also a need to promote best practice and show case the positive achievements that the Fund has helped to make possible around Africa.

The Challenge

Africa's web stats are high in mobile usage, and that of older browsers, therefore the new website needed to work across all these platforms. Page load size was also an important consideration as a lot of Africa is on slow internet speeds.

Due to time constraints we chose to run an "agile build" processs, which focused heavily on information architecture, user experience & mobile first principles. We condensed the design process from the usual "initial / final design / keyscreen" stages. Instead opting to create "style tiles" which are functional design documents, that summarise the look & feel, colours, typography, user interface design & image treatment in one page, allowing the client to rapidly approve a design style without being bogged down by detail.

The possibility of obtaining real world imagery for the website was limited, so the design relies heavily on the use of bold flat colours to create impact.

The Result

We worked on a logo design phase and created a vibrant, energetic logo that answered the brief whilst retaining clarity and impact; it also introduced a family of colours that informed the design of the website.

The website itself is clear, bold & functional, built in our powerful <link>CMS TYPO3 on time and in budget. It is fully <link http: blog article what-is-a-responsive-web-site external-link-new-window>mobile responsive, as well being compatible with older browsers down to IE7.  It's light in page load due to minimal use of images and flat UI, and very flexible in layout, all of which is great for use on mobile.

There are a number of data charts around the site, which are built in a dynamic way using the <link http: _blank external-link-new-window>Flot JavaScript library to allow for ease of creation and updating straight into the CMS. The homepage banner is built using the fantastic <link http: plugins royal-slider _blank external-link-new-window>Royal slider plugin.

"Liquid Light were a great team to work with! They are responsive, creative and take great care in ensuring they meet their client’s needs. Our Fund now has a functional, modern and interactive website that reflects clearly our operations and strategy."

Hanna Hagos - Consultant, NEPAD-IPPF