UX/UI Design Case Study

OVERVIEW

Paw-Dopt is a native mobile app for people who are looking to adopt an animal into their lives. It helps users find exactly what type of animal they are looking for, search by specific locations, and gather detailed information about the animal itself.

Purpose + Context

Paw-Dopt is a project that is part of the UI Design course from Careerfoundry. This project focused on creating an iOS and Android version of my native mobile app. I wanted to create a pet adoption app that simplifies the search for adopting a pet.

Objective

Searching for an animal to adopt can be tough when you do not have the right resources. When I was looking to adopt my current pet I felt that information was scattered allover the internet which I found overwhelming. I wanted to develop an app that would make it easy for future pet owners to aquire all of the information they need in one place.

Paw-Dopt lets the user search by setting a location and by utilizing the filter feature on the search screens. Users are able to favorite and share animal profiles, “Paw-Files”, and shelters they are interested in. Shelters can submit and update Paw-Files in effort to get their animals adopted. Users can also participate in an adoption forum to connect with like-minded individuals who are also looking to adopt.

Paw-Dopt is designed to make searching for a pet easy and fun with zero fluff (pun most definitely intended).

My Role

My role was to develop the UX/UI design of Paw-Dopt. I gathered research, created user flows, developed Wireframes, and created prototypes and mockups.

MY APPROACH

Research

I started by researching similar apps (Petdar & Petfinder) and identified features I liked and didn’t like. I made notes of the basic featues an adoption app would need, as well as unique features that would make Paw-Dopt stand out. During my research it was very important for me to closely observe the differences between iOS and Android. I had to extensively look into the Material Design Guidelines for Android since I am iOS user.

User Personas

I created fictional user personas to help me identify what users want in a pet adoption app.

User Flows

I created User Flow Diagrams that would demonstrate how a user would complete a task. User flows act as a guide when creating Low-Fidelity Wireframes.

Low-Fi Wireframes

I started out by sketching Low-Fidelity Wireframes of the IOS mobile version of the app.

Mid-Fi Wireframes

Once my Low-Fidelity Wireframes were sketched out, I then digitized them into Mid-Fidelity Wireframes through Sketch. I created the Android version of Paw-Dopt making sure this version would adhere to Material Design Guidelines.

Visual Design

Before I could move on to adding life to my High-Fidelity Wireframes, I had to establish the design direction I wanted to go in. I wanted Paw-Dopt’s design to be happy and playful. Animals bring so much joy to people’s lives so it made sense the app’s overall design was colorful and fun.

Mood Board

To bring a playful vibe to the design, I created abstract shapes for the background and sketched out little bones that you see on every screen. I used bright clean images of animals for the Animal Category Screen.

Color

The primary blue and yellow contrast well together. The soft pastels compliment the muted charcoal bones in the background and do not overpower the primary colors.

Typography

Icongraphy

Elements

Hi-Fi Wireframes

Establishing my visual design direction helped me bring Paw-Dopt to life in the High-Fidelity Wireframes.

Prototyping

After I created my High-Fidelity Wireframes I tested prototypes of the iOS and Android version with 5 different users. I uploaded my wireframes to InVision where I linked hot spots to each screen to demonstrate how a user would flow through the app.

Challenges

It was challenging at first figuring how to differentiate Paw-Dopt from adoption apps that already exist. Another challenge that presented itself was learning the differences between the iOS Human Interface Guidelines and the Android Material Design Guidelines. It was quite a challenge learning how similar yet different iOS and Android

are when compared to one another.

Final Showcase

Takeaways

For a second iteration I’d like to expand and create more screens. I followed the tasks guidelines suggesting to keep the number of screens relatively small since I was designing for both iOS and Android. These expansions would allow Paw-Dopt to function at its fullest potential.