Water & Sanitation for the Urban Poor

We worked with Water & Sanitation for the Urban Poor (WSUP) to give them more control over their content, a consistent brand experience, lower bounce rates and faster site speeds.

• Industry: Non Profit
• Services: Design, Development
• Technology: Google Maps, Mailchimp, Stripe
• Link https://www.wsup.com

In 2017 Water & Sanitation for the Urban Poor approached us wanting to completely re-design and re-develop their website.

WSUP is a non-profit organisation who provide help, assistance and education on sanitation and water provision for cities in less economically developing countries.

The brief

WSUP work side-by-side with local providers in cities across the world to help improve sanitation. They have offices in Asia, India and here in the UK.

They wanted to build a new website to reduce the bounce rate of visitors, engage with visitors, encourage them to read publications and provide a fast, modern, robust website which would be an investment into the future.

It became clear during our discussions with Steve Metcalfe, Head of Communications, that the website needed to be flexible enough to allow WSUP to build a variety of page layouts. However, these flexible layouts needed to work within a strict set of brand guidelines to keep the website on brand.

Our approach

This project involved a complete re-design and development of their site from the ground up. The project was divided into 5 distinct stages:

1. Project discovery
2. Wireframing
3. Visual design
4. WordPress development
5. Testing

Project discovery

During project discovery, we engaged with WSUP for a number of weeks before starting any design or development and had several video conference calls with their team. This enabled us to build up a detailed project specification, giving Steve and his team an outline of what would be built and the confidence that the project could be delivered within their strict budget.

Wireframing

Wireframes are low-fidelity mockups of web pages. They are used to focus on content structure and hierarchy and enable fast iteration.

We used the information from the project discovery phase to construct wireframe layouts for the each of the page templates.

The wireframes gave WSUP a complete overview of the site content, navigation and functionality.

Visual design

Alongside the wireframe stage, we also started working on the visual identity. WSUP had a strong set of brand guidelines to adhere to, so there wasn’t any branding work to be done. This allowed us to focus on designing a usable web interface.

The skyline

One of the biggest design challenges was to incorporate the ‘skyline’ graphic that is critical to the new brand. Although this worked well with the printed material, the fluid nature of the web and the difference in resolution made finding the right way to use the skyline a challenge.

We tackled this challenge early in the project and provided WSUP with a series of concepts to choose from.

We gradually refined these ideas into the skyline header that you can see on the website today.

WordPress development and build

Site speed and ease of content management were two of the main goals when building the new website. For site speed, we used modern practices to minify and concatenate javascript and CSS to load as few files as possible when the site loads.

We also took advantage of “responsive image” techniques to make sure that only the right sized images were delivered based on your device, screen size and connection limitations.

To assist the team with easy content management, we took a modular approach to page building. Each page on the site could be constructed from a series of pre-defined modules.

These modules could be added in any order on a page and drag and drop allowed easy re-ordering of the page content. This allowed the WSUP editorial team to quickly build dynamic pages on the site.

Statistics Module

A good example of the custom admin interface that we built is the ‘statistics’ module.

WSUP wanted a way to easily show key statistics about cities or other areas and this module allowed them to do this easily.

With only the necessary content fields available, building modules in this way means that the content can be easily edited without worrying about breaking the design on the front-end.

Testing and feedback

Highrise Digital and WSUP were constantly testing the site and providing feedback throughout the project. We tested the site on all major browsers and a variety of different screen sizes and devices.

We used a staging site so that Steve and his team could help us work through some bugs and to make sure they were dealt with before the site went live.

The results

The new WSUP website is a truly bespoke WordPress solution that gives WSUP a modern, robust communication tool for their organisation today and into the future.

• Complete control over site content
• A robust design system that adheres to brand guidelines
• Improvement in site speed
• Reduction of bounce rates
• Publication downloads have doubled

Steve and the rest of the WSUP team were very pleased with what we delivered, as are we!

Here is what Steve had to say about the work we did for them.

Can we help your organisation?

If you’re looking for a website that is easy to manage, fast, and robust – then we’d love to hear from you. Please get in touch.