Thank you also for all your hard work with the website, we are so pleased with how it has turned out and have had some really lovely comments from our supporters and volunteers.Emily Condley Supporter Development Officer, ORCA
We chose Craft as the CMS to build this website because it allows for bespoke and accessible elements (such as typeface, font size and images) and is more intuitive than other CMSs. It allows for a live preview and is constantly being updated and improved. It’s also less likely to be hacked compared to other CMSs.
We started with the sitemaps and then audience personas to understand the different types of people who would be using the site. We then created the wireframes to ensure the layout was correct and that all the content was on the page before launching into the design.
The previous site used a lot of white and orange. In the new site, we wanted to bring in natural colours of the sea - blues, blacks and greens. We also rounded the corners of the imagery to reflect the curved, smooth bodies and fins of dolphins and the curves of waves. The silhouettes of the people standing on a boat, looking out and spotting whales, add a human element to the website’s footer.
Throughout the website, many intricate details and allusions tie back to what Orca does. Some of the content blocks’ backgrounds have a contour grid map texture on a blue background, representing Orca’s ocean whale and dolphin spotting. The arrow icons have circular frames with lines cutting through them to represent looking through a boat’s porthole - a metaphorical window to the next opportunity lying ahead.
The old website had a lot of dead-end pages. We therefore ensured that each of the website’s new pages directed users to other pages within the site, keeping users on the site longer.
The overall result of this project is a bespoke website that is grown up but approachable and an effective mechanism to convey research.
On the home page’s Call To Actions (CTAs) (‘Whale & Dolphin Sightings’ and ‘Make Donations’), we used striking imagery. On the ‘Make a Donation’ CTA, we used a looping video of Cetacea to draw the user’s eye to it and push people to the donations page.
The photo gallery has the images positioned vertically up and down to signify the rise and fall of ocean waves.
In the ‘The State of Cetaceans’ section, we turned some of Orca’s statistics into modern infographics to allow the users to understand these numbers visually. Originally, these statistics were on an internal page of the site, but we moved them to the home page to draw more attention to them. A benefit of using Craft for this is that it allows the statistics to update by the client.
A video showcasing elements of the site
The photo gallery has the images positioned vertically up and down to signify the rise and fall of ocean waves
Whale & Dolphin Sightings page
On the Whale & Dolphin Sightings page, under the Species and Sightings section, we created three different informative sections on Whales, Dolphins and Porpoises. We used iconography on these pages to visually convey key pieces of information quickly and easily.
Using the Antarctic minke whale page as an example shows how we created four icons to represent the size, colour, baleen (the filter-feeding system inside the mouths of whales) and whether the species has a dorsal fin (fin at the back of the whale) or not.
Orca wanted to promote the Join page to encourage more donations. On the old site, it wasn’t as prominent and now we’ve made it a feature on the home page. On this page, you can see the different price plans. We gave the £10/’Most Popular’ price plan more prominence by using a subtle grey box behind it and a text box saying ‘Most Popular’ to direct people there.
Orca can now maintain, update and enter content into the website themselves as we set up content templates for them to do so.
Like what you see?
Book a meeting with our experts and let’s find out how we can help you.