Net Magazine Design Challenge Issue 304

Net Magazine Design Challenge Issue 304

Recently, Net Magazine got in touch with me and asked if I would participate in their monthly design challenge. Firstly, what an honour. Over the years I’ve been an avid reader of the number one magazine for professional web designers and developers, so it was an opportunity I couldn’t turn down. It’s great to give something back once in a while. Here is what I designed!

You can catch it all in Issue 304 (April 2018), available now from all good newsagents and some rubbish ones too.

The brief

They asked for a design for a fictional environmental charity. The site needed to have an impactful homepage that explained the problem clearly and concisely so as to engage visitors and encourage them to donate or volunteer. Time was extremely tight - I only had a week to come up with a design - but sometimes deadlines push you in a good way.

I was asked to explain my ideas behind my design, what the site will do and how it will work. They were interested in the technical thinking behind my design too, so we could explain things like technologies and tools, and how you would make the site responsive and so on.

Design process

Straight off the bat, I decided to approach it like a typical UX project considering who my target audience would be, their goals and needs and carried out some initial research and competitor analysis.

I landed on the type of charity I wanted to design for after some brainstorming. Their mission will be to free the world’s oceans of plastic pollution and I decided on a snappy name, One Planet. Some further questions I mapped out with post-it notes, for example, what features make it unique? What messages would I be promoting?

20180227 164711 (1)

As I sketched out some ideas and then moved onto designing in Sketch, I noted down as I went along what drove my particular design decisions so that I could explain them and so as not to forget as I neared the end. I also needed to source some quality open source imagery as my charity wouldn’t have the budget for a professional photographer.

One planet desktop
Above: One Planet on desktop

Design notes

One Planet is a charity dedicated to working toward a world free of plastic pollution and its toxic impact on humans, animals, and the world’s beautiful seas and oceans. The funds they raise contribute directly to running campaigns to limit the use of plastics, as well as highlighting and finding solutions for reducing plastic household waste.

The emotional message of marine life struggling to cope with the amount of plastic pumped into the oceans by humans was the main goal of the site. One Planet’s supporters feel a big responsibility to reduce the amount of plastic in their everyday lives, so the design showcases the various ways they can help get involved.

A smart, professional blue colour palette was logical, but it is the use of impactful background videos that will best tell the One Planet story and mission. Striking imagery will also add to the storytelling.

For extra flair and effect, I’d add a small CSS3 animate-on-scroll library to animate various elements, such as the One Planet news module, as users scroll down the page.

One Planet mobile
Above: the mobile layout
  1. The background video grabs attention and gives a dynamic dimension to the UX, which should lead to longer engagement. Research says video is five times more engaging than imagery.

  2. Users can read the latest One Planet news, including volunteering opportunities and urgent appeals. Large images and a browsing catalogue style layout will encourage users to explore content more easily. Users can see all the latest content or can simply choose to filter on a specific topic.

  3. I needed to make giving a donation as easy as possible. Our donate button is in a stand-out turquoise colour at the top-right corner - a trend many charities adopt so users will expect it to be there.

  4. A quick-donation module also sits on the homepage and I’ve pre-selected specific values to guide users into donating a worthwhile amount. I could also add a snippet of text for each amount for people to know the impact of their donation.

  5. The hero banner will have dynamic content that they can use to surface important campaigns and provide value and interest for returning visitors.

Here it is…in print!

20180227 164920 20180227 164858 20180227 164836

Why not give yourself a design challenge this month and solve a real world problem just for fun? It’s a great way to practice and sharpen your UX skills all from the comfort of your slippers.

You can buy this month’s edition or subscribe

Neil Berry

Senior UX Designer @cafonline. Previously Senior Designer @newsfromfta. I blog about UX, design, and the latest tech.

Do you want to understand the best way to convert visitors to customers in 2018?

Let's design something incredible together.