UX Design: PET Adoption (3 day task)

This is a post regarding a task I was given with while applying for a UX Designer role. The task was to be handed over in 3 days time. I thought I could share my journey of how I went from a blank mind to a fully working High Fidelity Mock-up and document each step on the way. Hope this helps somebody out there.

I. The Challenge

Design an experience that will connect people looking for a new pet with their ideal companion (mobile and tablet views).

Provide a high-level flow and supporting wire frames to help adopters find a pet that matches their lifestyle, considering factors such as breed, gender, age, temperament, and health status.

II. Timeline

I. Research

  • UI ideas & brainstorming: 1 hour
  • App features & layout: 3 hours

II. Design

  • Wireframe: 3 hours
  • Coloured: 3.5 hours

b. Tablet

  • Research: 1.5 hours
  • Wireframe: 2 hours
  • Coloured: 2.5 hours

III. Documentation & Prototyping

  • Prototyping: 1 hours

III. Research

a. Understanding the Problem

The challenge is to create a system that would allow potential users to successfully adopt a pet that matches their need in a hassle-free manner. This means to make a system where-in the user is kept motivated, reminded & made aware of the facts about shelter pets that is commonly misinterpreted by the general mass.

b. Problem with Existing apps and Services

  • The adoption process was not clear.
  • There was no automation or real-time data syncing. This made manual work a lot hectic and thereby decrease service value & efficiency.
  • The app UI and overall experience was sub-par. There was nothing in the app that would make the customer want to use it again.
  • There was no way to connect to other users online or try to search for a pet collectively.
  • The app doesn’t deal with the common misconceptions of shelter pets or to spread the awareness.

User-facing Problems

  • Most of the descriptions about a certain dog leave us with more questions than we had before
  • It is not guaranteed that a dog that looks like a great fit in the app would actually respond well to the user in person

Shelter-Worker facing Problems

  • If customers would open their minds and spend more time here to actually get to know all the different personalities, instead of just finding the cutest-looking dog, all will be better
  • Ps, the breed always doesn’t say too much about an animal’s behaviour.
  • What these people often don’t know: the dogs are in a situation of incredible stress and behave differently inside the shelter than they would on a walk with a potential owner or inside of a home.
  • Dogs in animal shelters often have rather complex stories and sometimes also challenging personalities due to their history. So it is far more important to talk about what is important for each individual dog, instead of focusing on the breed.
  • Getting dogs adopted as quickly as possible is critical for animal shelters.

c. Current Adoption Concerns and Common Misconceptions

The pets from shelter is feared in:

  • Not getting along well in a family.
  • Trust and behaviour issues due to the past unpleasant experiences
  • Age and new born.
  • Health, short life span, etc…

It’s needless to say that all these are just misinterpretations are not true at all. In fact, research showed that pets from shelters are the ones with low maintenance and high support.

d. Goals

  • Find the right match for the customer.
  • Spread awareness about these shelters & pets
  • The user has access to the shelter they want to visit & book an appointment with them as well.
  • The app focuses on maintaining the interest and motivation of the user.

e. Solving the Problem

  • A Daily Fact Subscription to spread awareness and deal with the common misconceptions.
  • Include Social media so as to share your progress & keep the user motivated.
  • Include a ‘Breed Info’ page for every type of breed in order for the user to clear their minds of any doubts.
  • Include after-adoption services & regular reminder/notification of auto-added pet activities to keep the momentum, which in turn rewards the user.

IV. Design Stories

There were a lot of features that could be added in order to ease the use. I’ve picked out a few of those that goes well with the flow and contribute to the goals of this project. A few of them that stood out from the complaints of similar apps was the need for notification, pet activities & to share your experience with others on-the-go.

Here is the result:

Feature List (Initial thoughts)

V. Navigation Flow

a. HomePage

b. My Pet

c. Chat

  • Connected friends online
  • with booked Agency
  • with chat bot (to help with FAQ’s)

d. My Profile

VI. Sketching

a. For Mobile Devices

Sketches for Mobile Devices

b. For Tablets

Sketches for Tablets

VII. Wireframing

a. For Mobile Devices

OnBoarding Screen
Notification & Initial Setup
First, Second & Third Tabs
4th Tab, Pet Details & Breed Info
Booking Process

b. For Tablets

Main 4 Tabs
Pet Details and Info
Questionnaire & Confirmation Page

VIII. Design Decisions

In turn, the stack based design can be moulded to reshape and fit screen of any size and ratio, without the need to re-design from scratch. The tablet implementation was much easier because all the information was already gathered and placed in packets of stacks. The tablet implementation also follows the stack design. Here, you can see that the importance / flow of navigation is always from left-to-right, left being the foremost task & right the last one. The colours and placements of widgets are also placed in such a way that the user responds to the stack hierarchy.

All design decisions were thought of and implemented with the developer in mind. As a fellow flutter developer myself, I can say that these designs are perfectly code-able and production-ready as of now. This design was made with flutter framework in mind. It’s also easily adaptable by SwiftUI. As for Kotlin or other native languages, the case might not be the same.

As you go through the final snaps, you’ll notice that the design is consistent, and minimal.

As they say, “making a feature packed s/w is easy. But making one with minimal, yet effective s/w is a challenge”.

The colours were taken from material colour palette. The design follows the latest guidelines from Google and iOS combined. The widgets used are vanilla & custom easily code-able ones. The fonts used were also from the new TypeFace family & only a combination of 2 fonts were used throughout the application.

IX. High Fidelity Mock-up

a. For Mobile Devices

OnBoarding & Initial
Main 4 Tabs
Pet Details & Info
Booking Process

b. For Tablets

Main 4 Tabs
Pet Details & Info
Initial Setup & Confirmation

X. Future Updates to Improve App

  • Multiple Users seamless integration. i.e, option to share the favourites pets OR add status or feeds to a timeline for more interaction.
  • Adoption Management app for Shelter-Workers. (for real-time data sync & fresh feed)
  • Add custom pet activity — share it with friends.
  • Add group activity

XI. Conclusion

And there it is, let me know what you think of it. Of course, there are plenty of areas to improve and change, but as a first try and as a task done within 3 days, I’d like to know where I’m at. Btw, the company to which I was applying for recently rejected my application. If any of you can point out any performance or similar issues as an evaluation of the above, please do mention it. I’m all ears and looking for ways to improve.

uxmujahid.com | Aspiring to make an Impact.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store