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

PAIN POINTS

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.

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.

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).

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!