Pet Care Mobile App UI/UX Case Study
This project was created as part of my final project in Rakamin Academy UI/UX Bootcamp. I was responsible for the whole process, starting from research, conducting interviews, competitive analysis, creating product design, prototyping, and usability testing.
Overview
RumaHewan is a pet care app that provides pet supplies and complete health solutions to meet your pet’s health needs, such as online veterinarian consultation, grooming, vaccine appointment, and buying your pet’s needs through an online pet shop.
Duration: 3 months (August — November 2022)
The Challenges
We want to make a pet care application to know pet owners’ needs, obstacles, and behavioral habits while caring for their pets.
My Roles
Because this is a final project, where this project is in groups, my friend and I worked together on this assignment, we divided the roles that we were carried out depending on the circumstances of the tasks given. We do everything from start to finish, from Research, Design, and Testing together.
Here are the things that I have done while working on and making this case study :
- UX Researcher: Conduct research plans, create survey questionnaires, and conduct user interviews to obtain user data.
- UX Designer: Analyze the problems and classify them from the data that has been obtained, find solutions, create user personas, create user flow, and design wireframes.
- UI Designer: Looking for mood boards to get the design inspiration, create design guidelines, create high-fidelity designs, design prototypes, and usability testing
Design Process
In making this study case, I used the Design Thinking framework to create a structured Design Process to solve the problems. It has 5 stages: Empathize, Define, Ideate, Prototype, and Testing.
Empathize
We researched by empathizing with users in the first stage to get the desired data. We have done things like planning, making a research guideline, and conducting research. Before doing that, I will try to define a few things first:
Defining the Objective
This case study aims to find out the motivations & pain points experienced by users in caring for their pets.
Want to know pet owners’ needs, obstacles, and behavioral habits while caring for their pets.
Scope
Some of the scopes that I have defined are:
- 5 Interviewee
- Age of 20–30 years old
- First-time pet owner
- Been a long-time pet owner but don’t have enough prior knowledge about taking care of pet
Research Question
Several main questions must be answered when conducting research. These main questions were the reason why I wanted to do this research. Here are some of the main questions :
- What did you consider when choosing a veterinary clinic?
- How do you find a veterinary clinic online?
- Do you feel that you have taken good care of your pet? Describe how you take care of your pet.
- Where did you learn how to take care of your pet properly? Are you sure the treatment that you are doing is already correct?
- What obstacles did you experience in getting knowledge about properly taking care of your pets?
Qualitative Research — User Interview
Afterward, we conducted a user interview session to dive deep into the problem and find the root cause. Each one of us had to interview one person. Before conducting the user interview session, we made guidelines for structuring the discussion we wanted to have with an interviewee. I interviewed via chat. Interviews can be conducted via chat, phone, or video, depending on the interviewee’s preferences. In addition, there are two types of respondents when conducting interviews, which are :
- First-time pet owner
- Been a long-time pet owner but still don’t know how to take care properly their pet’s health
Research Summary
Some of the summaries that we obtained when conducting in-depth interviews and divided into three initial research results :
Based on their habits :
- visits the vet for health checkups
- pet grooming
- vaccine and sterile
- looking for reviews about the vet
- vet visit costs
- looking for information on vet clinics through online
- looking for information on pet’s health through online
Based on the needs of the participants who want:
- 24 hours services
- a reliable source of pet health
- easy access to find the vet clinic
- saving time
Based on the obstacles of the participants who :
- unable to find the nearest veterinary clinic
- unable to find a pet shop or vet clinic to buy pet supplies (inc. medicine)
- unable to find trustworthy articles on pet health information
- busy life
Based on what we have found in the in-depth interview, results can be concluded that :
- pet owners want the nearest vet clinic from their location and open 24 hours
- pet owners want to find a vet clinic or pet shop that has their pet’s drug prescription in stock
- pet owners want to get information about pet’s health from reliable resources
- pet owners want to save time in caring for their pet
Define
User Persona
we created a user persona based on the research results to understand user behavior, needs, experience, and goals.
Ideation
How Might We
We use the “How Might We” framework to find solutions to problems found during user research. The HMW questions must be focused and related to the user’s needs and pain points.
Problem Solution
Based on the HMW that has been made. We’re trying to make solutions to the problems that have been found.
Feature Prioritization
We decided that we needed to prioritize our features to be able to decide which features would be the most important for our app.
We decided the immediate focus was the features that affected a user’s current problems that most of the participants are dog and cats owner. Later features would be aimed at helping users who are either out of town or temporarily unable to provide suitable care for their pet by providing pet hotels, and if this application adapts to the changing demands of consumers we provide online vet consultations for other pets.
Competitor Analysis
We created a competitive analysis to determine our competitor’s features and how our features would set us apart. There are several things to consider such as :
- vet consultation feature
- payment method
- grooming and vaccine service
- medicine prescription
- article page about pet health information
User Flow
We created user flows using Figma to illustrate how the user will navigate the application. There are several user-flow scenarios that the user will pass in an application to complete a task :
- after download the application, create an account or log in, and set the pet profile.
2. Online vet consultation
3. online petshop
4. Looking for the nearest vet clinic or pet shop
5. Article Page
Prototype
Low Fidelity Wireframe
Once the user flow was established, we started sketching the low-fidelity wireframes using Figma, which was made based on the user-flow creation that was done before.
Style Guide
Before creating the UI designs I made a style guide first. The style guide is made to make the overall UI Design look uniform and cohesive. Here is the style guide for the design of RumaHewan application:
The reason for choosing these colors is because :
- Blue is often used to help someone have the ability to balance emotions and communicate with the vet and the pet owners and also to show calmness and serenity.
- Peach also shows gentle, caring, and romantic traits. this means to show that RumaHewan gives love and care to the pets.
- Purple can give a sense of peace and royalty.
The reason for choosing those icons is adjusted to the needs.
The reason for choosing Open Sans typeface is that it looks cleaner, modern, and attractive. It demonstrates honesty and simplicity. Open Sans typeface emphasizes primary information text and can be used in Android and iOS.
The size of the font used follows the size of the frame used. Also, it follows the rules of visual hierarchy for large sizes used in emphasizing primary information text. Whereas for small sizes, it is used only for secondary information text.
High Fidelity Design
We’re using Figma to design the high-fidelity wireframe, from onboarding to the article page.
Prototype
This is a prototype display of the high-fidelity design that has been made. The prototype was made using Figma. To see the prototype of RumaHewan App, click the link below and try the prototypes!
Usability Testing
We tested the prototype with five interviewees. They appreciate the interface but also they gave us suggestions that could improve the overall user experience and how to be more user-friendly the application is.
Conclusion
I learned so many new things here. Through this project, I realized we must understand the users first to make a great app that is truly valuable for them. Always test our hypotheses in the early stages. Yet, many things are still my shortcomings, which of course, could not have been completed without the help of my team members, and this also made me understand more about my next step in creating UI/UX case study.
