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
Millions of animals are currently in shelters and foster homes awaiting adoption.
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
The project took me roughly 25 hours to finish. I shall describe each process in detail and try to reason the decisions and thoughts made to complete the project. The Project was split to 3 categories. The following times for each was tracked by an application named ‘Boosted’ for android.
I. Research
- Problem Research: 4 hours
- UI ideas & brainstorming: 1 hour
- App features & layout: 3 hours
II. Design
a. Mobile
- Wireframe: 3 hours
- Coloured: 3.5 hours
b. Tablet
- Research: 1.5 hours
- Wireframe: 2 hours
- Coloured: 2.5 hours
III. Documentation & Prototyping
- Documentation: 4 hours
- Prototyping: 1 hours
III. Research
a. Understanding the Problem
Each year, approximately 1.5 million shelter animals are euthanized. Among those are majorly dog & cats. Even though his has been a fact and well known amongst common mass, yet they do not think or act on it. There are many reasons to this.
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
A quick research of the existing apps showed me what the people needed and where they were facing problems. A number of highlighted problems that came across multiple apps & services were:
- 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
There are quite a few concerns people have regarding the state, health and overall quality of pets of those in shelter. These are raised due to the financial situation and support of these shelters.
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
After coming up with the research results, I pretty much had a vague idea of what all are going to be needed & added to the system in order to have a pleasant experience. The goal of the app is to:
- 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
The aforementioned goals can be achieved with simple, but effective additions.
- 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
Stories give an overview of the features that needed to be created. They helped me to think through my design decisions, to build and provide a useful user experience.
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:
V. Navigation Flow
I decided to split the app to four tabs:
a. HomePage
This will be the on-coming screen. The user can search for the type and breed of pet they want. They can also further filter the search using filter option. On clicking the pet, they shall be taken to the ‘Pet Details’ page, where-in they can book an appointment with a selected agency after filling out the details.
b. My Pet
This will display the currently adopted pet (confirmed and accepted by the agency in their database). This page shows a timeline view of important activities, medical check-ups and other similar activities automatically added by the app based on the pet type and breed.
c. Chat
This tab allows the user to chat with
- Connected friends online
- with booked Agency
- with chat bot (to help with FAQ’s)
d. My Profile
This tab displays a quick look at your profile. A few points to note here is the profile completion percentage, awards, followers and followings. The settings panel is also embedded here.
VI. Sketching
After doing some more research and brainstorming on UI and layout. I came up with a minimal, yet feature packed design. So my next step was to put these ideas on paper with quick sketches.
a. For Mobile Devices
b. For Tablets
VII. Wireframing
The next step was to make a Wireframe out of this design. I used Adobe XD for this. I shall upload the uncut version of pages so as to let you understand the app as much as possible.
a. For Mobile Devices
b. For Tablets
VIII. Design Decisions
The whole structure of this app is based on stacks and hierarchy that they provide. Every element is a child of another. This provides easy readability, priority for important parts of the page & a natural flow of navigation.
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
b. For Tablets
X. Future Updates to Improve App
There are a few steps / features in my mind that could improve the over-all user experience and make it a complete app. A few of those are:
- 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
Designing an app from scratch after researching and brainstorming was an interesting experience. I finally used Adobe XD (I was hesitant before). I am content with how I managed my time and resources given the recent power cuts and heavy rainfall in Kurukshetra (the place where I was staying at the time). I was able to make a design that was in my mind the way I’d like it to be.
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.
