engineers without borders netherlands

design / code / wordpress

Overview

Engineers without Borders Netherlands is the dutch branch of Engineers Without Borders, the international non-profit organization that facilitates engineering projects in under-developed areas all over the world. I was contacted by one of the team members to help shape up their online presence.

The problem

The existing website was quickly put together by the team and while the content was good, it was split across too many pages and failed to tell a cohesive story. The overall look was too gloomy and there were no clear CTAs on any of the pages. The project pages didn’t engage the visitors, didn’t encourage sharing on social media, donating or volunteering. There was also no clear way to tell in what stage a project is (finished, just started, in need of funding, etc.)

old website The old website.

The goal

We identified the following goals for the new website:

Website Goals

  • Add clear CTAs across the website
  • Increase visitor engagement with projects (share, donate, volunteer)
  • Reflow the pages to tell a more cohesive story
  • Use more photos taken on project site

Research

To create a clear definition of what we needed to build, we did a market research of other non-profit organisations and built a better understanding of what works and what doesn’t in this particular sector. From this research, the need for strong, focused CTAs and use of natural looking imagery (as opposed to stock photos) emerged.

Various examples of non-profit organizations

User Profiles / Personas

We also started to better define our target user groups, what goals they need to accomplish on the new website and what features would make those goals easier to achieve.

User Group: Donors

Regular people who'd like to support the organization or some projects in particular.

Needs and goals:

  • spread awarenes for supported projects
  • contribuite financially to the success of projects

Pain points:

  • must have an easy way to asses stage of projects
  • must have easy way to share projects on their social channels

User Group: Volunteers

Volunteers are engineers that are willing to donate their time and skills to help developing communities around the world.

Needs and goals:

  • share their knowledge with other engineers around the world
  • build experience
  • gain recognition for their social activism

Pain points:

  • most have a day job, so free time is limited
  • must feel that their time investment is worthwhile and gets results

User Group: Local Partners

Local partners connect with EWB and request engineering projects in their local area. They are also responsible of maintaining the project after it’s completion.

Needs and goals:

  • learn and share their knowledge with other engineers around the world
  • update the standards of living in their local community

Pain points:

  • steps to require assistance are too complex and take a long time to complete
  • must feel that their time investment is worthwhile and gets results

User Group: Corporate Partners

Corporate partners help EWB with funding and other resources.

Needs and goals:

  • gain visibility for their social activism
  • build up work satisfaction within the organization by contributing to global causes

Pain points:

  • must feel that their time and financial investment is worthwhile and gets results
  • must feel security that projects are well researched and their name will not be involved in any controversy

Design

After clarifying the user goals, it was time to move on to the design stage.

Wireframes

Creating wireframes helped us validate the new page layouts and asses how efficient the new CTAs were, without spending too much time deciding on colors or typography.

Visual Design

Color Scheme

The color scheme was designed to complement the existing blue in the logo and reinforce the image of a young, vibrant organization that gets results and motivates people into action.

Typography

The heading font was selected to work with the existing condensed sans-serif of the logo and build the kind of repetition needed to bring the design together and fully integrate the logo into the page. The body font is a modern geometric font, with a friendly open curve that fits nicely with the theme of EWB. Because the headings and body font are from the same family, they create enough energy and contrast through their subtle differences while keeping the overall layout consistent at the same time.

Imagery

We decided to institute a strict "no-stock photos" rule and only use photos taken on location by members of EWB, even photos of not so perfect quality. This supports the authenticity and honesty of the design, increases empathy and makes the organization and the people it helps more relatable.

Final Outcome

Below is the final result of the design process.

The home page. The product page.

Development

The website was built on a Wordpress backend, heavily customized for increased ease of use by the non-technical members of the team. It's also built on a custom responsive framework based on Bootstrap.

Final Thoughts

I enjoyed working closely with the EWB team and rebuilding the new website from the ground up, from content strategy, to redesigning and simplifying their online forms. Now that the website is online, I will continue to collaborate on this project and implement new solutions and any necessary tweaks after gathering real user feedback.

See website live.

Let’s work together! Get in touch.