Persian Leopard Conservation

UX Design | Responsive Website & Mobile App
Persian Leopard Conservation

Project Overview

Products Icon

The Product

P.L.C. [Persian Leopard Conservation] is a non-profit organization focused on saving endangered Persian Leopards. The organization needs a tool that helps people learn about the importance of protecting the Persian leopards and their Habitats. P.L.C.'s primary target users include local people, local students, and adults concerned about the wildlife, especially Persian Leopards, and would like to learn more about what they can do to protect them.

Duration Icon

Project Duration

January 2022 to February 2022

Problem Icon

The Problem

The Persian Leopards are one of the most endangered feline subspecies. The population living in the wild is about 870 to 1.290 individuals. Researchers at the P.L.C. identified the lack of general knowledge and understanding about the negative human impact on wildlife.

Goal Icon

The Goal

Design an app and a responsive website that will improve education on saving endangered Persian Leopards and their habitats by bringing awareness and inviting people to be more engaged and involved.

My Role

My Role

UX designer. I led and designed the app and responsive website from conception to delivery.

Responsibility Icon

Responsibilities

I conducted interviews, paper and digital wireframing, and low and high-fidelity prototyping. I also conducted usability studies, accounted for accessibility, and iterated on designs and responsive designs.

Understanding The User

User Research Summary

I used the available data to develop interview questions and conduct user interviews. Most interview participants reported feeling bad about humans' severe impact on wildlife. The feedback received through research made it very clear that users are willing to be mindful of their negative impact and are open to being more involved once they have access to tools to help educate them.

Persona: Mori

Persian Leopard Conservation | Persona
Persian Leopard Conservation | Persona

User Story

As a busy individual and aspired wildlife photographer, I want to have access to information and data that brings awareness and see the progress of actions so that I can act accordingly to help save the life of endangered animals.

Problem Statement

Mori is a busy young individual and wildlife photographer who needs access to transparent results and the progress of the activities and actions because they can't find detailed, accurate donations and projects status.

Persona: Maryam

Persian Leopard Conservation | Persona
Persian Leopard Conservation | Persona

User Story

As an artist, educator, and nature lover, I want to be more involved in wildlife organization activities and movements so that I can be a supporter and do my job as a responsible human being toward endangered animals.

Problem Statement

Maryam is an artist, educator, and nature lover who needs an easy process to become an active member because being an advocate provides more authority to act on threatening activities.

User Journey Map

Mori's and Maryam's user journey map showed us how helpful it is to create a cross-platform tool for individuals who care about endangered animals.

Persian Leopard Conservation | User Journey Map
Persian Leopard Conservation | User Journey Map
Persian Leopard Conservation | User Journey Map
Persian Leopard Conservation | User Journey Map

Competitive Audit

An audit of a few competitors' products provided direction on gaps and opportunities to address with the Persian Leopard Conservation app and responsive website.

Persian Leopard Conservation | Competitive Audit
Persian Leopard Conservation | Competitive Audit

Crazy 8s

I used Crazy 8s to quickly ideate and develop ideas for addressing gaps identified in the competitive audit alongside the users' needs. My focus was explicitly on donations and tracking the progress.

Persian Leopard Conservation | Crazy 8s
Persian Leopard Conservation | Crazy 8s

Starting The Design

Paper Wireframes

I drafted iterations of each screen on paper. Then, after I completed the mobile app, I started sketching ideas for screen variation and a responsive website.

Persian Leopard Conservation | Mobile App Paper Wireframe Sketches
Persian Leopard Conservation | Mobile App Paper Wireframe Sketches

I also started to work on designs for additional screen sizes to make sure the site would be fully responsive.

Persian Leopard Conservation | Paper Wireframe Screen Size Variations
Persian Leopard Conservation | Paper Wireframe Screen Size Variations

Digital Wireframes

After ideating and creating paper wireframes, I made the initial designs for the Persian Leopard Conservation app. These designs focus on users' needs and guide them in being involved and engaged.

Persian Leopard Conservation | Digital Wireframe
Persian Leopard Conservation | Digital Wireframe
Persian Leopard Conservation | Digital Wireframe
Persian Leopard Conservation | Digital Wireframe

Low-Fidelity Prototype

To prepare for usability testing, I created a low-fidelity prototype that connected the user flow of making a donation and tracking the progress.

Persian Leopard Conservation | Low-Fidelity Prototype
Persian Leopard Conservation | Low-Fidelity Prototype

Usability Study Parameters

Study Type

Unmoderated usability study

Location

United States, remote

Participants

5 participants

Length

30 minutes

Usability Study Findings

- Navigation

Users want clear navigations and way findings. Some pages stopped our users to move forward or complete the task.

- Usability

Users were confused and overwhelmed when interacting with the app.

Persian Leopard Conservation | Before and After Usability Study
Persian Leopard Conservation | Before and After Usability Study
Persian Leopard Conservation | Before and After Usability Study
Persian Leopard Conservation | Before and After Usability Study

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Refining The Design

Mockups

Based on the insights from the usability studies, I applied the design changes such as providing a clear navigation system and a more straightforward flow and also, changing the overall layout for a cohesive design.

Persian Leopard Conservation | Mobile App Mockups
Persian Leopard Conservation | Mobile App Mockups

High-Fidelity Prototype

The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes made after the usability study.

Persian Leopard Conservation | Mobile App High-Fidelity Prototype
Persian Leopard Conservation | Mobile App High-Fidelity Prototype

View Persian Leopard Conservation High-Fidelity Prototype for; Desktop | Tablet | Mobile | Mobile App

Accessibility Considerations

1. I ensured that all the colors and contrasts align with accessibility guidelines.

2. Clear labels for interactive elements that can be read by screen readers.

3. I used headings with different sized text for clear visual hierarchy.

Responsive Design

Information Architecture

With the app designs completed, I started designing the responsive website. I used the Persian Leopard Conservation app's sitemap to organize and structure each page's design and layout to ensure a cohesive and consistent experience across devices.

Persian Leopard Conservation | Information Architecture
Persian Leopard Conservation | Information Architecture

Responsive Design

The process for the responsive web was the same for the mobile app; I started with paper wireframes, then digitized and refined the screens. The designs for screen size variation included mobile, tablet, and desktop. Again, I optimized the design to fit the specific user needs of each device and screen size.

Persian Leopard Conservation | Screen Variations Mockup
Persian Leopard Conservation | Screen Variations Mockup
Persian Leopard Conservation | Screen Variations
Persian Leopard Conservation | Screen Variations

Going Forward

Takeaways

Impact

Users shared their feedback that the Persian Leopard Conservation website and its companion app give them the tools they need to learn, educate themselves about the impact humans have on wildlife, and act to help save the lives of endangered Persian Leopards.

What I Learned

I learned that although the problem I was trying to solve was huge, diligently going through each step of the design process and aligning with specific users' needs helped me develop feasible and valuable solutions. I also learned the importance of use cases when designing a cross-platform tool.

Next Steps

1. Conduct research on how successful the app and responsive website are after launch.

2. Add educational resources for users to learn more about the endangered wildlife.

Sticker Sheet

No items found.

Other Projects

Hello,  Let’s Talk!

Fill in the form to contact me or send an email to shana.safarzadeh@gmail.com

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Understanding The Users
Starting The Desing
Refining The Design
Responsive Design
Going Forward