A case study about how my team and I made a pet care application from scratch after studying the market needs, conducting research and doing all the necessary steps to build the User Interface of an App.
Introduction
In April 2023, I joined a hackathon organized by Noble Transformation Hub. My team and I decided to create a pet care application due to the lack of quality pet care services available in India. Our goal was to develop an app for pet lovers to help them take care of their dogs, cats, or fish. The app would offer services such as pet food delivery, pet training, pet sitting, veterinary consultations, pet welfare checkups, and animal rescue.
Project Walkthrough
If you don't have time to go through the entire case study, to give you an in-depth look at "Happy Pets," I've put together a walkthrough video. This video will guide you through every feature and functionality of our app, showcasing the user experience we designed with care. From the easy onboarding process to smooth navigation and comprehensive pet care services, you'll see how we aimed to make pet care simple and enjoyable for all pet owners. Check out the video to experience how "Happy Pets" can make taking care of your furry friends a breeze. Enjoy the tour!
Project Overview
The three-month-long hackathon started in April and the groups were formed, each group had to decide their team's name. All the group members suggested their favourite names and after some discussion, our team's name was kept as 'Titans'. In the hackathon, our first task was designing a team logo. So, Bala Ganesh, one of our team members, designed our team's logo. The four members who contributed to this project were Bala Ganesh, Sujana, Sundar and Me. Bala Ganesh and Sundar took the logo designing and graphic designing part including the presentation-making part of the whole project and helped in brainstorming for the problem statement and the branding style of the application. Sujana contributed towards making the initial problem statement, completing a questionnaire for primary research, conducting secondary research, creating user journey mapping, ideation and brainstorming for wireframing, designing the low, mid and high fidelity wireframes before testing, helping in Usability Testing and improving the Final User Interface. I prepared the final problem statement brief, conducted primary research and made user personas, prepared a competitor case study, did ideation and brainstorming for wireframing, decided on colour and font styles and created the whole brand style, designed the low, mid and high fidelity wireframes before testing, prepared the prototypes, conducted Usability Testing and made the final improved User Interface. The tasks for the coming week were given to us and we had to work in a team to finish the particular task which was part of the process and present it at the weekend. The points were given based on how well the teams completed each week's tasks. Thankfully every week our team was able to present the PowerPoint or the Figma presentation to showcase our work and get the points consistently, even if there were not many active members in the team. The first two weeks were given to select a name for the team, make the team logo, and select and form the correct problem statement.
A Glimpse Of The Final Product
Project Goals, Features And Problem Statement Brief
At first, our goal was to develop a pet care application that would be a one-stop solution for every pet-related need for its owner. But we forgot that too many features in the starting stage of the product can mess up everything. The goals and features at the beginning of our product were as follows:
We are glad, we did the research thoroughly, took the necessary feedback and changed our approach towards our design. We made many iterations throughout the process, we decided to remove the product shipping feature of the app, we revised all the services and kept the necessary services needed to the owners and we also narrowed our pet ownership service to only dogs, cats and fishes. These were the major changes we made to write our new problem statement brief to have a clear vision for our product in mind, but we made many small iterations along the process. We prepared this new problem statement brief after deciding which features and services to keep in our application:
Secondary Research
We started the process by collecting some secondary data about the industry and the market as we were unfamiliar with the pet industry and neither of us had done such a project in the past. So at first, Sujana collected some statistics related to the pet industry and the final data was selected after a few discussions in the group. Then Bala Ganesh prepared the presentation for the same. This study helped us a lot in making various decisions like choosing the target audience and the core product and services in the design process. So, here is the data for the same:
Statistical Data Related To The Industry And Market
- Over the decade ending in 2017, sales of pet care services doubled, to a total of $5.8 billion, according to the latest Economics Census statistics.
- The population of pet dogs in India amounted to around 19.5 million in 2018. The population was forecast to reach over 31 million by the end of year 2013. The growth in the number of pet dogs in India has increased pet food sales, from approximately 139 million U.S. dollars in 2014 to around 285 million dollars in 2018.
- 60% of people in India have a pet. The pet food market in India is projected to register a Compound Annual Growth Rate of 4.7% through 2027. India's pet care market is projected to grow at a value of INR 7,500 Crores by the end of 2026. Over 32,000 Indians admitted to possessing exotic live animals.
- Without a doubt, the United States is the top country in the world for both dogs and cats. There are approximately 70 million domestic dogs and 74 million domestic cats in the United States.
Market Overview 1. The global pet-sitting market size was valued at USD 2.38 billion in 2021. It is projected to reach USD 5.41 billion by 2030, growing at a CAGR of 9.56% during the forecast period (2022- 2030). 2. Bengaluru is the most pet-friendly city in India followed by Mumbai. 3. The right to keep a pet outlined in Article 51 (G) of the Constitution grants every citizen of India the right to choose to live with or without a companion animal. It also states that people should show compassion towards all living creatures. 4. In 2021, 41% of people in India did not own a pet. Every year 6,00,000 pets are adopted in India. There are approximately 80 million homeless dogs and cats in India, living either on the streets or in shelters. The pet food market in India is over $310 million. 5. Pet services are expected to have the highest growth of any segment of the pet industry, with spending now predicted to be 143% by 2030 to $118 billion, versus our previous outlook for $127 billion for pet services by 2030. 6. Globally, the majority (57%) of consumers own pets, according to more than 27,000 online consumers whom GfK surveyed in 22 countries. Dogs are the most popular pet globally, owned by 33% of respondents, with cats coming in second, at 23%.
Competitor Research
When Sujana finished her secondary research, I started collecting information about competitors. Here at this stage, we were also expected to do a deep study on one of our competitors along with general competitor research to understand the product and the industry properly. So, the general research about the few competitors was done by me and Sujana together where we picked a few applications that were providing similar products and services that we were planning for our product. Here is the data about the general competitor research:
After finishing the general research it was time to select one of our competitors to do a deep research work. Everyone in the group gave a few facts and reasoning about their favourite brands and startups in India for why our group should select that particular brand for deep research. After hearing everyone's point of view, the brand that I selected was agreed upon for the deep research. We chose Heads Up For Tails as our best competitor and did thorough research on it as it was the most successful startup in India and it was the oldest startup of all in the pet care industry. This research helped us a lot to get the right perspectives for our product and to learn about the industry. Here is the case study file for the research, and I also made a video presentation for the same in Figma if you don't have time to read the entire case study:
Primary Research
After finalising the problem statement and conducting secondary research, we moved on to primary research. We surveyed our target audience and conducted interviews with several pet owners and pet shop owners to gain valuable insights and better understand the data. For the survey, we developed a series of relevant questions and distributed the form among the target group to comprehend their needs, wants, and pain points. This helped us identify important insights and patterns. Here is the data that we gathered from the survey:
After conducting the survey, we interviewed a few pet owners, and pet distributors & shop owners. We got some very useful and quality insights into the process that we recorded as user personas as below:
Brainstorming And User Journey Mapping
After gathering all the necessary data from the primary and secondary research we started to brainstorm about our products and services. We started to put our ideas on the board in the discussion according to our problem statement. When a few things didn't make sense in the problem statement, we also revised our problem statement. Finally, we made a board where we decided on various features, categories and some important points to have a reference for everyone in the group as sticky notes to get ideas for the further design of the product. This was still not perfect but it gave the group a rough idea for working in the same direction. Here is the board that we prepared:
After brainstorming on our product's features and services, we explored our competitors' Apps and services. We realised it would be tough to design both an App and a Website. So, we dropped the idea of making a website and decided just to build an App. We also realised that the points system will be tough to implement at this stage. So, we decided not to keep any points or rewards system in the App. After this, we discussed how each feature and service should be displayed on our App and what our users' journey should look like. Sujana took the responsibility to prepare the user journey mapping after the discussion in the group and this is what she prepared for our App:
Designing User Interface
Low-Fidelity Wireframing
After brainstorming and creating user journey mapping, we started creating low-fidelity wireframes the next week. Me and Sujana were doing low-fidelity wireframing, we divided the work and made various alternatives for the screens. The rough sketches were a good start for our product design. We explored many ways of creating solutions and it became easy with rough sketches. After a few iterations and discussion, here are the low-fidelity wireframes we created for the App:
Creating Mood Board, Brand Style And Logo
After creating the rough sketches for the App, we started discussing the various aspects of the brand style. I started making the mood board for the further process. I wanted to make a mood board that helps me in deciding on the colours, gives me ideas from similar products and gives me ideas about the brand logo and overall brand image. Here is the mood board that I prepared, I also wrote some keywords that helped me to create a mood board that was right for our brand:
Creating a mood board helped us a lot in various ways. Firstly, I got a starting point for creating a colour palette for our product. The original photos related to pets and pet owners gave me an overall view of our brand style. I picked the prominent colours from the board, which I used to create various colour combinations and colour palettes to choose for our App. Here are the various colour palettes that we considered for our App:
Before selecting any particular colour palette or any particular brand look we decided to have a clear idea about how we want to execute our brand look and style so that we all can work in the same direction. So, I wrote a brand look execution brief guide for us as below:
Creating a brand look guide helped me a lot as I was creating the whole brand look. After creating a mood board and guide I started to work on making the right colour style, font style and icons set for our App, Sundar began to work on the Logo for our App and the rest of the members started to work on middle-fidelity wireframes. We all had to work in coordination with one another. Before creating a logo for our App, we had to decide on a name for our brand. Everyone gave their opinions and different suggestions for the brand name, the name that Sujana suggested 'Pet Verse' was mostly liked in the group so it was selected for our product at first. And, Sundar made a few ideations of the logo for the name. But, somewhere I did not feel right with the name and I felt like it was not going well with the brand values and the kind of vibe that we wanted to bring in our product and services. So, I suggested another name for our brand which was 'Happy Pets' and I provided my reasons for keeping this name for the brand. Everyone agreed with my views and Sundar made another logo for our brand. He made many iterations of that logo after review from our mentor and made the Final Logo as below:
Finally, Sundar prepared a simple 'Happy Pets' logo with Candice Fonts for the brand name. As Sundar was preparing the logo, I was creating the Font Style & Colour Style and everyone else was creating middle-fidelity wireframes. Before creating a colour style for our brand, we discussed in the group and selected a primary colour for our brand taking the ideas from the mood board and the colours extracted from the mood board. Everyone gave their opinions and finally, we selected the 'Yellow colour' that Balaganesh suggested as our primary colour as it gave the joyous and vibrant energy as per the colour theory and the brand style that we wanted to create. Then I started experimenting with different shades of Yellow and different colour palettes by taking Yellow as the primary colour. After a few trials and errors, I created a colour palette everyone agreed upon and selected for our App. I also started to collect the needed icons that go well for our App and look similar to each other. And, I created an 'Icons set' for our App.
The colour style, font style and icons set created were used in making wireframing and the whole App design from now onwards but after completing the wireframing, taking reviews from our mentors and doing internal & user testing we made many iterations in the colour and font style as well as the whole design. After the brainstorming part of our App, the further process was taken care of by me and Sujana. We both initially made middle-fidelity wireframes that were white & grey and not so close to the final ones. And, it was based on the initial problem statement and the idea we had about our App.
Middle-Fidelity Wireframes
Our initial attempt at designing our app's interface was promising, but after a review by our mentors, we realized that many features and services wouldn't work practically. Additionally, there were some typography and layout mistakes that needed correction. When we tested the design internally with our cohort members, we found that the wireframes made it difficult for new users to understand what we had designed and what we aimed to offer. As a result, we decided to iterate on our design, bringing it closer to the final version for further testing. We updated the problem statement that I have shown in problem statement section, redesigned many features, and improved the layout and spacing.
After Making the design we made the prototype of the middle fidelity wireframes for testing. The prototype was tested by our mentors, our fellow students and also the real users where we got multiple insights and we understood where we could improve our design further. This is the prototype of our middle fidelity wireframes that we used for user testing.
Usability Testing
Before testing our prototype with the users, I prepared a questionnaire and a script for the users so that we both could stay on the same page and get the needed and quality answers from the users. This is the questionnaire that I prepared before user testing.
These questions helped us address all the major doubts we had about our app. Sujana and I tested our app with four users, personally interviewing them to understand their thoughts and observing their actions and expressions to better identify their problems. Here is the feedback we received from our users. We also created a user persona after testing to compile and consider all the necessary and varied feedback.
After doing the user testing and getting feedback from the users, we realized that we needed to improve our design at multiple levels. These are different insights that we found from the testing:
Insights From The User Feedback
📱 App Usability Feedback • Tutorial screens are difficult to understand due to language and illustrations. • Fonts used in various screens are hard to read, especially from a distance. • Users find it confusing to differentiate between pet and owner profiles.
🐾 Confusion About App Services • Users are confused about the purpose and usage of features like Blue-cross emergency and Audit. • Some users are unsure about the main product or service offered by the app. • Difficulty in understanding services like Pet Audit and Pet Sitters.
🎨 Aesthetics and Design Feedback • Users feel the app's look and colours do not give a pleasing vibe. • Fonts in certain screens are too small to read clearly. • Button sizes and font styles need improvement for better user experience.
📝 Suggestions for App Improvements • Users suggest renaming services for better understanding, like renaming Pet Sitters to "Pet Care Takers." • Recommendations for adding search options, providing contact numbers for doctors, and simplifying the report option in the Petstagram section. • Users recommend adding more user-friendly features like search options, product recommendations, and easier navigation between pet and owner profiles.
We considered the necessary feedback and started thinking about how we could improve the issues. We brainstormed each problem one by one, coming up with a few good ideas for some of them. While we couldn't find solutions to all the problems identified during user testing, we did manage to address the majority of the issues users were facing.
First, we improved the font and color style of our app based on feedback about our fonts and the colors used in the illustrations and tutorial screens. When we tested our old color style on a few demo screens to make it look like a high-fidelity design, it wasn't as pleasing as users had mentioned. So, we experimented with different color palettes and ultimately realized we just needed to adjust the shades and combinations of the existing palette.
We tested different shades of yellow and other colors from the old palette on the demo screens, checked for color contrast with various combinations, and decided on the final color palette. We did the same for the fonts. Here are the new font style and color style for our app:
High-Fidelity Design
As we created the new colour and font style for our App, Sujana and I started to implement our new ideas into the high-fidelity wireframes of our App. We corrected our language at various places in our App, introduced the pets' profile section, removed the report option in Petstagram's posts, improved doctor service for the pets, designed a pet listing page and kept all possible user-friendly options like search, sort and filter on that page, we also changed names for the services like Pet Sitters, Pet Audit, Blue-cross Emergency Service and Pet Hand-over Service. Likewise, we made many small changes in all the service features and finally created the design components and our high-fidelity design. I designed the tutorial screens, home screens, pet's owning section and its entire flow until the successful payment screen, petstagram screens, cart, basket, notification, profile sections and the setting screens. Sujana contributed towards designing all the services' screens & their flows and subscription options screens. Here is the final design that we created:
Our high-fidelity design was also reviewed by our mentors at various points which helped us a lot to improve our design further. Finally, we created a prototype for our App which made our product design complete and hackathon as well. You can see the entire prototype video if you don't have time to test it yourself or you can also check the prototype yourself if you want.
Conclusion
The three-month hackathon was completed with us submitting our entire presentation until the high-fidelity prototype along with the extra assignments that we did in between, which Balaganesh designed for our team and submitted to our mentors. Next week the results were announced and our team's project got 1st runner up position. Although our team got second position, it was a great achievement for me as my hard work was recognised at the end. You can also check why we got the second position in this certificate. It was a great learning experience for me.
My Learnings And Takeaways From The Project
This project was a great learning experience for me as a fresher. I not only learnt from our project but I was also learning so much by looking at other teams' projects and hearing the reviews of our mentors. The iterations that we made in our project at various stages made me realise the importance of failing faster and improving ourselves again and again. I also understood the importance of teamwork and how to make important design decisions at various points in any product design process.
Lastly, I would like to thank my mentors Noble Arya Sir and Jagadeesh sir for guiding us on various stages of the project and my teammates for being a very helpful hand in completing this project.
Last but not least, Thank you for taking the time to go through my case study. You can connect with me on LinkedIn. My LinkedIn profile: https://www.linkedin.com/in/payal-talekar-472a73246?lipi=urn%3Ali%3Apage%3Ad_flagship3_profile_view_base_contact_details%3BpiMrx50XQwaJZmJuEGjVug%3D%3D