Defense logo composed of a large bold "Defense' and on the right, a definition in French and in English
Mockup view of the Defense homepage on a laptop

Mockup computer psd created by rawpixel.com

Défense fights for the protection of the African forest elephants (Loxodonta cyclotis). This was a sample project conducted for my Google UX Design Specialization certificate, for which I served both as a UX researcher and designer. The goal was to create both a responsive website and a mobile app for social good.


Target audience
Users with little knowledge of the issue

Project duration
2 weeks (2022)

Design tool
Adobe XD

MOODBOARD

Moodboard for the Defense website

Images sources: Unsplash and Knot On My Planet

PAIN POINTS

  1. Feeling shamed or guilted rather than empowered

  2. Feeling too disconnected from the issue

  3. Feeling helpless when not having the means to contribute financially

IDEATE


I then conducted a competitive audit, analyzing three similar projects and platforms:

Knot on my Planet

    • Unique proposal: Dedicated to ending ivory trade, collaborating with luxury and fashion brands

    • Area of improvement: Focus on the user as a consumer rather than on the elephants themselves

Save the Elephants

  • Unique proposal: Offers concrete solutions at the national level

  • Area of improvement: Does not involve the user at the individual level, but rather supports governmental initiatives

Elephant Protection Initiative

    • Unique proposal: Informative website on the importance of elephants for biodiversity

    • Area of improvement: Very dense website which appeals mostly to users who are already familiar with the issue


DECIDE


As this project calls for both a mobile app and a responsive website, I had to choose which to begin with. I went for graceful degradation, with a desktop-first philosophy. This choice was based on the fact that most users (specifically first-time users) do not donate or support causes on the go, and often want to take time and research the project before committing.

Hand sketched wireframes for the Defense website
Hand sketched wireframes for the Defense website
Hand sketched wireframes for the Defense website

Someone who would download an app to help conserve the African forest elephants would likely already be interested in this topic. For that reason, I wanted to first design a comprehensive, helpful website for first-time users, and have additional features in the app for users who are committed to fighting this issue. I used the Crazy Eights method to come up with ideas for the homepage of the Défense website.

USABILITY STUDY


Once my digital wireframes and lo-fi prototype in hand, I conducted a moderated usability study with 4 participants, in person and remotely. Here are some quotes from them and the insights that I came up with.

"One of the buttons is not functioning"

"The layout of the home page reminds me too much of a PowerPoint presentation"

"Where is the information about the mobile app?"

Make sure that all interactions are working properly (P0)

Adapt the layout of the homepage to give it a more interactive design (P1)

Mention the existence of an accompanying mobile app (P2)

Mockup view of the Defense website on a mobile

Mobile mockup psd created by riandra

HI-FI PROTOTYPE

When ready to add color, typography, and iconography to my prototype, I chose neutral and green colors and plant motifs to evoke the natural habitat of the forest elephants. This was meant to both contextualize the user and refer to the critical threat that the tropical forest is currently under.

I also decided to keep the design as minimal and modern as possible, in order to allow first-time users to relate to the cause and not feel like this platform is only for dedicated enthusiasts, which is often the case with comparable websites (see competitive audit). I made sure to emphasize other ways to help than through monetary donations. Finally, clear labeling, high color contrast, and extra breathing space were added for increased accessibility.

The full prototype of the website can be accessed here (desktop website), here (tablet website), and here (mobile website).

Home page | Desktop

Home page | Tablet

Home page | Mobile


Organize page | Desktop

Organize page | Tablet

Organize page | Mobile


Finalized donation page pop-up | Desktop

Finalized donation page pop-up | Tablet

Finalized donation page pop-up | Mobile

SUMMARY & NEXT STEPS


Working on a project that combines a website and a mobile app was a great challenge to come up with device- and platform-specific features and benefits. Overall, interactions is an area that I need to explore in more depth.

A major challenge with the design of the website was to keep it simple and modern without seeming too grim. After a few tries, I think Défense is an effective way to raise awareness and call to action!