Brief 3: Adopt an Animal - Style Guide

I decided to create a style guide for the project, as I have stuck to a lot of rules. I feel like previously I haven't done a style guide that is very in depth, but I feel ready to do a more comprehensive one now.

Here it is:

I found it a lot easier than I previously found style guides. It was really fun to make, and didn't take me long. I definitely feel more confident in making them now.

Brief 3: Adopt an Animal - Email Newsletter Design

Why an Email Newsletter?
The idea is that when you adopt an animal through the website, you receive email newsletters when there is an update on your animal. This helps keep the user involved, and they can see where their money is going.

Size
The width of the email design should be 650px.

Sketch

Content

• Introduction to newsletter
• Update on adopted animal
• Photo gallery of animal
• How the user's money is helping them
• Latest stories of chosen species

Final Email Newsletter

OUGD603 - 27/10 Critique

This is the first crit of the year, looking at the work we have done so far.

What Have I Done
I have completed two briefs, have one ongoing brief, and nearly finished a fourth. To make the most of the crit, I decided to prepare boards for each brief, and a set of questions to be answered about my fourth brief (adopt an animal).

Boards

The first brief I did was some album artwork for a client, so I put the final designs onto one board for people to see.

I have also been working on a brief called 'an illustration a day' and here is what I have done so far for the project. This gives people a chance to see the kind of illustration work I have been doing.

These were the resolutions I came up with when Dr. Me came in for a workshop last week.

Here is part of the social media I have done for the Adopt an Animal brief, so people can get an idea of what content would be shared.

I have decided not to create boards for the website, but to show them on a computer and print out the pages. This is because they are so long, they wouldn't fit on a board and wouldn't communicate the message properly.

Questions - about Brief 3 (adopt an animal)

1. What do you think to the form?
2. Is there anything else you would want when on the Adopt page
3. Do you think the 'Why Adopt a Primate' section on the Adopt page is necessary?
4. Is the Project Timeline easy to understand?
5. Should it have a different name?
6. Is there anything else you would want to see on it?
7. I want to make a quick video showing how the site works - does anyone have any advice on how to go about doing this?

Brief 3: Adopt an Animal - Social Media Assets

These are what companies use on their social media pages to gain interest and engagement. I did a lot of them while working at Twentysix, so I thought I would do some for this project as it would be relevant.

Platforms
I think Twitter and Facebook are the most appropriate platforms for this because they are very popular social media sites that people can share content on.

Content
I started thinking of the different content I could put in them:

• Calls to action - encouraging people to adopt/donate
• Did you know? Facts
• International Primate Day
• Facts/Figures
• Suggest as a Christmas present

Dimensions

I used to work in 1200x1200px while at Twentysix, so I will do the same now. 

If I wanted to do paid for ads, I would have to stick to Facebook's 20% rule - where you can't have text on the ad that covers more than 20% of the image. There is a grid that helps you do that.

Development

I started playing around with a few different layouts first.

I also thought of the description that would go with the images in the caption.

I thought just having a Did you Know would let me put a bigger amount of text in the description. I was also happy with this layout - having a dark green border, and lighter green box with text in as the content.

Baby mountain gorillas cling to their mother's chests for the first few months after they are born.

Thinking of Christmas ideas? Adopting an animal is the perfect gift for animal lovers. You can find gift cards here (link)

September 1st is International Primate Day, which exists to highlight the troubles monkeys and apes face. Find out more about their threats and how to help them here (link)

50 years ago there were around 2 million Chimpanzees in Africa - today there are around 150,000 to 250,000. Help save them from extinction by adopting a chimp today (link)

Bonobos are known as the most gentle natured of the apes - they live in harmonious troops of up to 120. Like humans, they are very emotive and intelligent animals.

Black Spider Monkeys are known as arboreal animals - which means they spend most of their time in the trees. You can find out more about these animals here (link)

I was wondering whether to just have a Did you know caption, with all the content in the description.

Facebook In Situ

At work I would put the assets into 'situ' so that the client could see how they would look in a real life situation. Here are the Facebook posts that I mocked up with the content and images. I also made sure the date reflected the post.

Twitter in Situ

Here is what the Twitter page would look like. I used a screenshot of an existing Twitter page then went onto Photoshop to edit it to the right branding and content.

Brief 3: Adopt an Animal - Final Pages

Home Page

Chimpanzee

Contact

Project Timeline

Adopt

Brief 3: Adopt an Animal - Website Development

After thinking of the content, gathering the photos and drawing the scamps, I can now start to digitise the site.

I decided I would design it on Photoshop, as that is what I learnt to do it on at my placement. I figure it is best to use this, as it is what industry use at the moment.

I wanted a double navigation to have a hierarchy of information.

I tried shortening the navigation to see how that would look, but it looks unbalanced

I tried the navigation bar shortened to wear the content is, but it doesn't feel like a proper navigation - more of a widget.

I lengthened it which I much prefer.

I also added some text and a black gradient at the bottom of the header for content.

I really didn't like the image I chose, so I picked another one which I think works better. The orange contrasts with the green.

I also scrapped the black gradient in favour for a box. This makes it more different to the wwf website, and fits in with the blocky layout of the nav.

I also added slider arrows. I changed the lorem ipsum into content - advising users to read more of the oranguatans story - would lead into specific page of project timeline.

I added more of a black gradient so the title stood out more against the photo.

I made the top of the header full opacity, and the 2nd nav 90% which I prefer.

This is what I have so far - I am happy with how it is looking up to now. I feel like it flows well, but I need to add the illustrations underneath the hero image to give it more personality. I wonder if it looks too green right now.

I added a section for 'what we do' so users get an insight of the charity. I also put 'latest stories' so users can get an idea of the type of content the timeline/website has to offer. I have tried to keep it as simple as possible so it is easy to understand. I feel like the 'why we need your help' section needs to clearly state why you need to donate as there isn't anything else on the site that tells the user about donating/adopting aside from the buttons. I am wondering if it needs more calls to action?

I finally thought of the content for the top and decided on 'Why Adopt a Primate?' as it gives users reasons on why to engage with the site.

Here is the final page.

When doing the other pages, I realised it would be more consistent if the background colours were swapped around, so I did that:

Project Timeline

I decided to start working on the project timeline now - I wanted to wait until the crit to see what people thought I should put on the remaining part of the home page.

I began by changing the slider image - I did consider whether an image slider was necessary on this page - but I think it makes it more consistent across the other pages. I changed the content to say the page name and what it's about. I feel like it is too small here though and out of the way - I will try this in other places.

I also wanted to add a filter to the page, so that users could easily find what they wanted when there is a large quantity of content. I wanted to sort it through the type of content and through species. 

I began by having the heading 'sort by' on one line, and the categories on a 2nd line.

I tried moving the arrow to the right as it didn't sit well next to sort by previously. I also changed the cross into an arrow, so that it shows the user it would slide up and down.

I then tried it back next to sort by because it was too out of the way on the right hand side.

This is how it would look closed with this layout

I then tried it all on one line to save space

I then tried having sort by like this, which would go at the bottom of the hero image.

I decided to put the filter into practice, and placed it on the header. I think this works the most so far.

I also moved the content on the hero image, as I didn't feel like it stood out enough previously. I'm still not sure if this is the right place for it, but an improvement I think. I changed the colour so that it stood out more against the green background. I added a white gradient behind the title so that it stood out more.

I started making the petition section. I wanted it to be full width so that it matched the rest of the page. I started by trying a big image background.

I felt like that perhaps didn't match the rest of the site, and was a bit too distracting, so I divided the section into two. I feel this is laid out better.

I added a goal bar underneath so the user can visually see how much has been signed.

I noticed that two photos were on one side and looked a litle unbalanced.

I tried this layout where the images were on opposite sides, which worked better, but it then clashed with the blog so I reverted it back.

I also wanted a section for the blogs, and this is the layout I thought for it. When the user clicks on the arrow, the page will slide down and more content will show.

I decided to start working on this section, as it's the last part of the page to do. I thought of the five important things that show how the charity help the primates.

I started drawing icons on Illustrator that match the text.

I also tried adding a splatter of colour behind them, by using the brand green. I realise this doesn't look very clean..

I tried it with the background colour on Multiply which works better.

I tried a few different splatter patterns.

Here is the final page:

Contact

I started working on the contact page, and thinking what people would want from this page. I decided to use a picture of a map of where the office would be, so the user can visually think where it is. I tried to keep it all the same layout as the rest of the pages.

I decided to have a section where you can subscribe to the timeline updates, giving more engagement 

Here is the final contact page:

Primates

For the primates pages, there will be 5 different ones, specific to each primate. I made a call to action on the header so people can go to adoption if they want.

I wanted to have an overview of the chimps at the beginning of the page.

I also found a realistic petition I could add. I just want this page to have everything to do with chimps that is on the whole website, inc news, petitions etc.

I started to build up the content that was needed in the same layout as the other pages.

I changed the latest stories to Chimpanzee related.

Here are the icons I made for the Quick Facts section. These will stay the same on each primate page, just the content will change.

I also created a secondary navigation for when the user clicks on Primate. This will just slide down.

Here is the final page for Chimpanzees:

Adopt

I decided the adopt/donate section should be on separate pages.

I started by making the form that would need to go on the page.

I tried the form over two columns, but it just looked too boring and wordy.

As it is a step process, the first one is selecting which primate you want to adopt. The user just clicks on the one that they want, on the Gorilla image you can see what it would look like when selected.

I also altered the form, so that there is only one column of form. This led a big white space, so I filled it with an image, which I think matches the rest of the site then.

I had to make the form longer due to the amount of content that needed to go in.  I also used the same arrow that has been used throughout the site when I needed to use a drop down menu.

I then started on the third step, using the same layout as the 2nd.

I added what cards they would accept, and a button which goes on to the next page. This just takes you to your bank and confirm the payment process.

Here is the final adopt page. I think it has everything you would need to know about adopting a primate on it, and is easy to use.