Rhino Rewild Microsite Campaign
Rhino Rewild is a campaign led by the nonprofit African Parks to "rewild" 2,000 rhinos to African wilderness locations. Through my work with Brick Factory I led the design of a microsite for the campaign as well as a unique donation experience.
My role:
Product Designer
Company:
African Parks
Project type:
Responsive Web App
Timeframe:
Dec 2023 - Aug 2024
Team:
Agency: Brick Factory
Project Managers: Maylene Kuahiwinui, Jake Harrison
Additional Design: Tom McCormick
Project Overview
Summary
A microsite to promote a specific fundraising project
African Parks already has an existing website which talks about their various programs. Rhino Rewild is a new program and AP wanted a dedicated web presence for the project.
The Problem
Create a website which will create excitement and donations.
It was important that the website could both serve as an effective overview of the project and it's goals while remaining engaging to navigate. African Parks also wanted a unique donation platform where users could pay for the relocation costs associated with 'rewilding' a rhino.
Hypothesis
Create a design that appeals to user's emotions.
Creating a design that engagingly communicates the project goals, while giving user's a more emotional connection to the rhinos they are helping, should lead to a more effective campaign.
Design Exploration
I began the design by focusing on the home page and the hero section. I wanted this page to explain the story of the campaign in an engaging way. I explored various options for a full-viewport hero section, which leveraged the engaging imagery and video that African Parks had for the campaign
The hero section
I went through a number of iterations using video assets that African Parks had on hand. These were very dramatic introduction to the website, but ultimately it was decided as a team that it was not worth the tradeoff for loading times. The Rhino Rewild site is ultimately a fundraising platform, and we wanted to ensure that performance was prioritized.
A full screen background video hero iteration.
A video with clipping mask.
Finalizing the hero
Ultimately we landed on a full screen static image for the hero of the homepage. I designed this with a light fade-in and movement transition, to heighten dramatic impact. The CTA to donate is clear, as is the relationships with the African Parks brand. A learn more button guides users down the page if they want to find out more about the campaign.
Final hero design
Homepage content and animation
The main content on the home page I devoted to explaining the campaign. This is broken into sections that show the different phases of the process. A small breadcrumb tracker by "Rescue" "Rewild" and "Renew" animates on scroll, adding interactivity to the page and helping to tell the story of the campaign.
Load and scroll animations add interest to Rhino Rewild's homepage.
Additional content
While the most important information for the microsite was on the homepage, I created a number of supplemental pages to round out the website.
A news page - dynamically updated via CMS.
An about us page with full bleed imagery.
A partners page.
Designing the "rewild a rhino" donation UX
It was always a goal of the Rhino Rewild project to have a unique donation flow, where patrons could help pay for the costs to "rewild" one of the 2,000 rhinos that are being moved as part of the campaign. Theses rewilding costs varied depending on which of a number of wilderness destinations the rhinos were being relocated to, but they started at over $1000. This presented a design challenge, since the campagin was intended to appeal to two types of donors:
Small donors:
The campaign needed to appeal to donors that only wanted to chip in small donations under $100, which is not enough to cover the rewilding costs of an entire rhino.
Large donors:
Wealthier donors as well as organizations and companies would be more interested in 'sponsoring' a single rhino's costs by themselves, and getting special recognition for this larger contribution.
I decided early on that in order to best serve these two groups, that the donation flow would branch into two at the very start, based on whether the user wanted to make a small contribution, or sponsor an entire rhino by themselves.
The small donor flow would take the user to a "group sponsorship" where they could add any amount they wanted to help a specific rhino alongside other users, similar to a GoFundMe campaign.
The large donor flow would take the user to an interim page where they could select a price tier, followed by being presented with a "matched" rhino they could sponsor.
Mid-fidelity wireframes sketched out the small / large donation flow early in the process. As the design process moved forward, the language and presentation of these two options went through a number of iterations.
Refining the landing page language and presentation
The donation landing page went through a number of iterations in order to refine and prioritize the two donation flows, as well as give the landing page a dramatic introduction, and provide information about the progress of the campaign.
V1: Donation flows described as "Rewild a Rhino" and "Join a Group Rewilding Fund".
V2: This iteration added more visual emphasis on these two distinct options.
V3 Hero: African Parks wanted a full-screen hero that conveyed the magnitude of the project. I added in an animated mosaic composed of individual rhinos.
V3 Donation: The donation flows were further refined to give higher emphasis to the smaller donation flow, while still having the large donation flow easily discoverable.
Final Touches
It was an important requirement for the project that there was a certain level of visual polish throughout the design. I added a few key interactive animations that helped tell the story of the campaign, as well as create visual interest.
An interactive map feature allowed users to learn more about the campaign, as well as highlighting the difference in "price tiers" for different rhinos.
The landing page hero features a subtle background animation, and remains fixed in place when scrolling down to create a parallax effect. Both these design choices were made to give this page a bit of extra visual polish that was important to African Parks.
Final Designs
The final designs for a the Rhino Rewild microsite created an engaging journey for users to learn about the campaign, and ultimately get involved.
Selected screens from the final desktop designs. Additional features included a breadcrumb navigation to clarify the flow, a billing and payment screen that clarified user choices, and a thank you screen that encouraged social sharing functionality.
Interested in working together?
Have a project I can help with? Have a question about something on my website? Reach out using the form below, or send me an email.
