Brown Bear Conservation Project

This is the use case of the design for an app and responsive website for a Brown Bear Conservation program based on the protection and reintroduction of the species in the north of Spain

Project Overview

Finally, I had to design a user experience for social good. It had to be a mobile app and a responsive website. My idea was to undertake the design for the brown bear conservation project in northern Spain. This bear was bound to disappear in the early nineties of the XX century, but since then, the brown bear population in the Cantabrian area has increased, after a stage of strict protection and recovery.

So to continue improving the situation, the foundation needs a web and mobile app that offers information about the bear, their work, and communicates the conservation efforts, and opens a way for people to collaborate.

Duration of the project:

February 2023 – March 2023

My role:

Research, interaction design, visual design

Project development:

Google UX Design professional certificate

Duration of the project: February 2023 – March 2023

My role: Research, interaction design, visual design

Project development: Google UX Design professional certificate

The Problem

The project must constantly educate the public and the bear’s neighbours about the need to respect the environment. The foundation also needs a constant flow of support and collaboration from volunteers, sponsors and supporters to keep the machine running.

The Solution

The design must help to make the brown bear a more well-known, friendly, and significant piece of the Cantabrian ecosystem.

That’s why options like ‘Sponsor a Bear’ have been part of the structure from the beginning.

Primary Research

I studied two websites related to the brown bear conservation programs in the north of Spain and used that information for interviewing people, even though those webs are not in the same line as this project.

I also interviewed participants with general questions about responsive websites and mobile apps to address common UX issues in many webs and apps. Most interviewed participants wanted an intuitive design to engage with the project because these webs usually offer lots of information that is not well-structured or too difficult to access.

The feedback received made it clear that users wanted to collaborate on conserving species if there are enough flexible ways to support a project and have access to information on where their money and time goes to.

That’s why the ‘Sponsor a Bear’ option became, already in the initial research phase, a critical feature for users to be involved and part of the conservation effort.

The Process

Ideation

In this case, I started designing the mobile app, which later was the base for creating the responsive website.

Digital Wireframes

Low-Fi Screen Flow

Usability study

Key Questions

Task 1: Go to ‘Who we are’ from the’ Home’ page. Explore the different ways to arrive (Main menu and page links).

Task 2: In the ‘Who we are’ page, use the menu to go to the ‘Sponsor a bear’ page. Confirm the form and explore the confirmation page.

Task 3: Click on the account icon, explore the ‘Account’ page, and look at the ‘Notifications’ page.

Insights

Participants wanted the hero section down arrow to be clickable, instead of just being a visual indication that there is more content below.

Some participants found the main menu confusing because they didn’t realize that most of the menu items were clickable for submenu display.

Most participants wanted the whole menu item to be clickable, not just the arrow.

Mockups

After iterating to make changes to include the insights of the usability study, we arrive at the mockup phase.

The Second Part of the Project

After the mobile app, the work continued with the responsive website. First of all, the information architecture.

The Sitemap

Responsive Designs

Desktop dark mode, tablet and mobile phone responsive layouts.

Hi-Fi Prototype