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
Images sources: Unsplash and Knot On My Planet
PAIN POINTS
Feeling shamed or guilted rather than empowered
Feeling too disconnected from the issue
Feeling helpless when not having the means to contribute financially
IDEATE
I then conducted a competitive audit, analyzing three similar projects and platforms:
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
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.
"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)
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!