Telling a story

When the CEO of Make A Difference (MAD) asked to meet with us to discuss a project, I knew this was something that would be close to my heart.

MAD is a movement of young people working towards empowering children living in orphanages and street shelters.

They had just finished a rebranding exercise and were keen to translate the new design to their website. When we met, he told us how much he loved the illustration based sites we had created in the past. He said that MAD was looking to work with a creative team that could help tell their story in a fun, engaging way.

madvision

Not good enough

The main issue with their existing site was that it wasn’t compelling. They wanted potential volunteers to be assured that working with MAD would be good for them. They needed stakeholders to be able to see what their time and money was going into.

To understand what MAD was all about, I met with their digital content planner. We tossed some ideas around and he shared with me his vision for the website — he wanted it to be vibrant and full of energy. I also met with the young volunteers to find out what it was that made them join MAD. “To help out!”, was the common answer. They just wanted to do meaningful work and this is the sentiment I wanted to see reflected on the website.

MAD data

But first we needed to sift through the content MAD had sent us. It was quite complex — facts, figures, vision and mission statements — all marketing speak. We knew it was essential that people had this information to understand the impact MAD was making, but we needed to simplify the data and make the language conversational in order to communicate effectively.

mad-data

.

Solution

After much brainstorming we decided to go with a story telling approach, using the right mix of illustrations and images coupled with text.

We created these illustrations using MAD’s vibrant colour palette — a fun process! We finalized the information architecture based on the content we’d been given, tested out the flow of information on the website, wireframed all the key pages and then began prototyping.

We prototyped a lot of layouts and did A/B testing as well but the client wasn’t convinced — everyone at MAD had their own idea of how the site should be and they weren’t able to agree on one!

website-prototypes2

website-both-prototypes

website-prototypes3

.

Time-out

With the client’s consent I took a break from the project but then lost touch when I left BeeBuilt to work independently. A few months later, I took it upon myself to get it done. I got in touch with the illustrator and grateful to have her on board, set up meetings with the client online.

I returned to the project with a newfound clarity and fresh ideas that the client loved. I suggested the use of Sticky Navigation — transforming it into a one page, vertical scroll website — a quick and efficient way to explore all of MAD’s content.

A project that lasted almost 2 years, the site finally launched in January 2014 and it was a hit! It even picked up an award for best website in the non-profit category.

makeadifference-website-screens

website-FINAL

makeadifference-winner

.

Reflections

It’s easy to get lost in the work we do. Taking a break and refocusing refreshes the mind and helps see things differently.

You can see the MAD website here.