👈 Back to Home

Shelter, Online Pet Adoption

Case Study - Mobile App
Project Overview
This is the case study I made when I doing an intern at a Software House Company as a UI/UX Designer
My Contributions
UI/UX Designer, Copywriter, Product Researcher
Multiple High Fidelity design screen of Shelter Mobile App

Problem Research

I interviewed some friends about their problems with buying and pet adopting process during the pandemic. Some through chat and some participants from an online survey I made with Survey Monkey.

Then the following information was found:
• The number of respondents is 7 people. 4 boys and 3 girls
• 4 respondents are under 18 years old, 2 people are between 18–24 years old, and 1 person is between 25–34 years old
• All respondents have a desire to adopt a pet
• Respondents are interested in finding adoption info through the nearest pet shop, social media, relatives, and online stores
• Respondents experienced several difficulties, namely; limited types of animals, the location of the seller is far, takes a lot of time and effort, limited information, and the quality of the shop and the animal is not clear
• All respondents are more interested in buying pets online

User Personas

Furthermore, to make it easier to determine our user scope, and also to answer the question “Who am I making this application for?”, I created a User Persona “card” containing the target user profile for this problem.

User Persona Description

Pain Points

After being analyzed, several core problems experienced by users were found, namely:
• User have to find the location of the animal adoption shop and information about the opening and closing times of the shop which are sometimes not written on the internet/newspapers
• User does not know the quality of the store so there are doubts about the quality of the animals in each store
• User says that some pet buying and selling applications mostly look uncomfortable and sellers are quiet
• User has to give up a lot of time and energy to go to the store one by one until there is a match
• User doesn't get the animals they want due to limited resources

Action Points

Then, I change the Pain Point earlier into an Action Point in the form of questions about what I should do to deal with the various problems above. The Action Points I get are:
• How do you get buyers to know firsthand all the pet shops in the surrounding area as well as information about the store without looking from other sources?
• How can you make shoppers have no doubts about the quality of the animals in each store?
• How to shorten the buyer's time in the pet buying process?
• How do you get buyers to get the animals they want?
• How to make this application crowded with users
• How to make it easy and comfortable for users to use the application

Solution

After collecting various kinds of ideas, it was decided some of the most solution ideas, namely:
• We make an online pet adoption application for smartphones, not only that, I give features in the form of :
• Included are reviews and ratings of buyers at the pet shop so that other buyers know the quality of each store
• There is a list of animals in each store that are ready for adoption along with their characteristics
• There is a list of any pet shops in the surrounding area, without having to search for too long
• Individual sellers can sell animals or their equipment for delivery, which can be delivered to the buyer's location
• Buyers can communicate via chat with buyers via the application
• Create user-friendly applications, and easy to use
• Presenting articles, news, and tips & tricks related to the pet world
• Not only selling animals, but shops or individuals can also sell animal needs, accessories, and equipment such as cages and food

Sketch

here I just need paper and a pen to sketch how the design will look like. Explore as much as possible from various layouts to content hierarchies.

Early Sketch of Mobile App Design Screen

Wireframes

Then, the first thing I design is the wireframe, which is a rough layout design that doesn't need to be too detailed but I can already identify the layout of this application.

Multiple mobile design wireframes

Moodboard

It would be nice if I explore existing designs to add inspiration to the ideas of design styles, layouts, colors from our application later. Usually, I search on Dribbbble and Behance.

Multiple dribbble shots for inspiration

UI Guidelines

This is the step that determines the branding style of our application, from colors, typography, margin sizes, logos, etc. This makes it easier for us to be consistent in using resources and maintain the Branding DNA of our application.

a set of UI Guidelines made on figma (typography, colors, logos. etc)

High Fidelity

Next, I start visualizing the rough design into a Hi-Fi design. And from here later, I can consider our design to enter the production stage because I can say that our design is quite mature.

Multiple High Fidelity design screen of Shelter Mobile App

**Update : I made a web app design for Shelter a couple day ago to enter an internal school ui ux competition (did not win haha)

Multiple Desktop Design Screen of Shelter WebApp

Testing

At this stage, I validate the prototype earlier to our users, so I get an insight into whether the prototype is suitable and whether the user's problem is resolved properly?
I will do Usability Testing, which is where I will prepare several scenarios that the user needs to do with our prototype. Here I use a testing tool called Maze.

Maze Dashboard Screenshot

Test results

From the test results that I got, some users are still having problems using this application, for that, I do a checkup on the path interaction that the user goes through. Then it was found that the user could not interact with one of the features, in this case, the filter feature.
So, what needs to be improved is the prototype, so also for those of you who want to try Usability Testing, try testing all the existing features, because I also don't know which one the user will interact with, I can't force the user to do testing through the flow. that I create, let the user naturally use the prototype. And also from the prototype that I made, there are many paths that the user can take to achieve the goals of a testing scenario. You can see the user heatmap on the path that the result failed so that it is clear what the user interacts with and I can also easily inspect what still needs improvement from our application prototype.

Conclusion

Design Thinking is very valuable in solving problems because each stage of this method is mutually sustainable with each other, I cannot proceed to the next step because I need each step to be completed coherently. So for this Online Pet Adoption problem, I can find out and analyze the problem thoroughly, because the stages that need to be passed are coherent and structured. As a result, I can understand the user's problem, identify the right solution, evaluate our solution, and achieve the goals.

👈 Back to Home