KIPU Case study
Innovating in Pet training by developing a practical and educational mobile site
Role: UX/UI Designer
Timeline: 4 weeks (80 hours)
Tools: Figma, Maze, Optimal Workshop, Adobe Photoshop
Project Overview
Background
The pet industry is rapidly expanding and incorporating modern technology to enhance the lives of both pet owners and their animals. This tech-driven transformation offers pet enthusiasts various services and information, such as online pet stores, veterinary care, and tracking devices, making pet ownership more convenient. It also updates pet owners on industry developments, ensuring their beloved animals receive the best care.
Problem
But even with this knowledge, Sharkey (my dog) never gave the slightest thought to how drastically technology had advanced. Ultimately, it cost my partner and me a large sum of money to employ a trainer to help Sharkey curb his aggression. In 2020, we wished there was a friendly website available to help us learn how to address his behavior. We felt disheartened, not knowing where to turn next, so we said goodbye to our savings. But then, a spark of inspiration came to me: I could use this issue to kickstart my first project in my portfolio!
Solution
Introducing a revolutionary online program for pet owners! The app platform would provide easy-to-follow instructions, educational videos, progress tracking, tailored guidance, activities and exercises, tutorials, and access to a network of other pet owners for exchanging ideas and advice. Plus, the app would offer pet products to enhance your training and shopping experience. All this, in one place. We would have fewer broken pet owners and more friendly pets. Here we go…Sharkey says hi!
Research Phase
Before heading to my Pet training app idea, I wanted to check with my friends on Instagram what would be more interesting about my other ideas; it seems most of my friends love pets, or their pets are giving them a hard time, just like mine.
“I could also say that since the idea for this project came from the numerous problems I had with my dog Sharkey and his behavior, I have lived a “Contextual Inquiries” ever since. On all my daily walks, I stop to observe how other pet owners handle their pets, and I often exchange dialogues on this and other topics. Also, I have a close friend who has been a dog walker for years and shares many of her experiences. It is fair to say I already started this project with Contextual Inquiries done. :)”
Research Approach
I want to gain a deeper understanding of the needs and preferences of pet owners when it comes to the content they wish to access for training their pets. To accomplish this, I need to gain insight into the relationship between pet owners and their animals, their daily routines, the products and services they purchase, and any other factors that might influence their decisions. By doing so, I can better identify the type of content users would like to see and strive to provide them with the most valuable and relevant experience possible.
What kind of content.
What resources do they use for shopping/training pets.
Their opinion about video tutorials for training dogs.
User Interviews
I had 5 participants who agreed to be part of this project; they all have pets that have already been trained or are still in training.
20-50 years old
Men and women
User Insights
The participants in the study are all passionate dog owners who have a strong connection with their pets, taking them on regular walks and treating them as part of the family.
Half of the participants are having trouble with their dog's behavior, such as aggression toward other animals, due to a lack of pet training experience.
All of them were excited about an app containing pet training content.
Almost everyone prefers to learn through visual content, such as tutorial videos.
If you want to check the Affinity Map for KIPU Project, click here. Organizing all the data collected helped me understand pet owners' needs and preferences. So, feel free to explore the insights I have gained from my research.
Affinity Map
User Persona
Karen begins her days with long walks with her beloved dog, Simba. She views him as a second child and says that with her son in college and her husband working, Simba fills her days. She's always looking for ways to teach him new tricks and strengthen their bond. Unfortunately, Karen finds it challenging to find reliable content about pet training, health, and behavior online.
Competitive Analysis
When it comes to dog training, pet stores are a great option. However, they typically charge for the training, which usually requires the owner to bring their pet to the store. Wag is an exception, which brings the trainer to the client's address, but this can come with a higher cost.
YouTube is an excellent resource for free dog training video content. Still, the quality of the videos is often poor, and it can be challenging to find organized and reliable content. Additionally, many videos are lengthy, which can reduce user engagement.
Card Sorting
To better understand and analyze the information architecture for this mobile site, which has the potential to expand into a desktop version in future designs, I conducted a card sorting exercise. This helped me to structure the sitemap better.
Goal: to understand how users perceive topics related to pet training. Suppose this pet training mobile site is part of an online pet store - How will they organize those themes?
Card topics: 51 cards about pets, training, and website content.
Participants: 7 people (25-40yo) - all pet owners
Method: Open card sort – Remote (OW)
Results
The overall outcome indicates a good understanding of the suggested topic categories. Specifically, there is a clear understanding of the topic of training.
One of the most exciting findings of the study was that participants used labels such as "bad behavior," "commands," and "breeds." This will be one of the main themes in the training aspect.
They had very similar and cohesive ways of labeling those groups. Usually, different words with the same meaning were used, such as "services," "pharmacy/medicine/health," and "supplements/food and treats."
Sitemap
I am considering a simple algorithm to make the sitemap easy to navigate. Shopping for pet supplies or understanding the services offered on the mobile site can confuse many people. I aim to ensure that accessing KIPU content and having an enjoyable and effective experience is straightforward.
Click here to view the sitemap for KIPU.
Task Flow
Before beginning to sketch, I created task flows for two key features of the application. This aided me in the subsequent steps of my project, from designing the screens to determining how to implement these concepts.
The initial task flow was determining how users would access the website's training content, with the primary requirement being creating a user account. After setting up this account, I considered the following steps in providing access to the training content.
KIPU would ask users to create an account for two main reasons. First, the app could personalize the user's experience by providing tailored guidance and recommendations based on their needs. Second, it would allow the app to track users’ progress and provide feedback and encouragement as they work toward their goals.
The second task flow I created was intended to help users in their quest to research information about cat and dog breeds that they find interesting. This task flow takes into account that there are many users out there who are fascinated by the diversity of cat and dog breeds and who wish to learn more.
ACCESSING TRAINING TUTORIAL VIDEOS THROUGH THE NEW ACCOUNT
SEARCHING A SPECIFIC CAT/DOG BREED FROM THE LANDING PAGE
Branding & UI Kit
In addition to the concept behind the name KIPU (explained below), I took the opportunity to learn about color tools, accessibility, and ideas that I had studied in school. However, as this was my first project, I needed help deciding which colors and other elements would work best as my UI tools.
I chose tones of teal blue and dark mauve for the app's design. Teal blue is often associated with trust, calmness, and professionalism, while dark mauve is a rich, sophisticated color that adds depth and elegance. I plan to connect these colors to KIPU's logo and incorporate them throughout the interface. As a tertiary color, I wanted to add green tones to bring more playfulness, reminiscent of grassy fields where pets play and have fun.
The logo is a puzzle piece in the shape of the letter K (for Kipu). This represents the idea of connecting and creating a bond between pets and their owners, which is one of the intentions of pet training.
Storyboard
I made a quick storyboard to help everyone understand the primary goal of the KIPU mobile site. It is easy for users struggling with their dog's behavior to see themselves in this context. Here is an example of introducing KIPU and its concept.
Wireframes
In the wireframes process, my goal was to make the user account creation process accessible from the training content. While creating these wireframes, I needed different screens to represent when the user is logged in and when they are not.
The most challenging part was designing the training content screens. It was necessary to separate the different themes and group them in a way that would allow users to access all the content quickly and effectively.
This was an educational process during which I studied the differences between mobile apps, mobile sites, PWAs, and web apps. I designed this project with a mobile-friendly website format in mind and am already considering different forms for future projects.
Usability Testing
I conducted Usability Testing with 7 users using Maze. The testing provided valuable insights into user experience, helping to identify areas for improvement. I analyzed the results and kept polishing my designs to improve the product.
4 in video call (Zoom)
3 in person
Users were asked to complete 2 different tasks.
Task 1: Signing Up/Creating an Account to access KIPU Online Dog Training (videos tutorial)
Task 2: Selecting a KIPU Tutorial video to watch
Goals of the Usability Testing for KIPU.
Verify that the user can easily locate the Sign-Up call-to-action (CTA) button.
Understand whether it is clear to the user that they must sign up to access the training content.
Ensure users understand the organization of the Dog Training page. It is divided into categories, each containing distinct topics.
Results
All participants completed the tasks.
1 of 7 participants tried to SIGN UP without creating an account first.
2 of 7 participants reached the last screen of the second task by unexpected paths.
All participants stated that it was easy to accomplish the tasks asked.
After the two main tasks, some mini-tasks reinforced the participant's understanding. All participants were able to access the "Explore More Classes" scroll-down screen again to see the options and returned to the main page from the Training topics screen.
“Easy to use.”
"User-friendly and instinctive."
“I would do more contrast background/foreground.”
“Great concept about the dog training content. It seems sophisticated and well-designed.”
“I loved the design of the training pages.”
Iterations
Because of usability testing, I decided to redo the color palette choice and add more vibrant and playful colors. I did this to create a more engaging and visually appealing user experience and make the overall mobile site more memorable and unique.
Choosing a dark theme for the mobile site's training videos can create a focused and immersive experience. It reduces distractions and makes video content stand out, helping users to concentrate and absorb information more effectively. Dark themes are also associated with professionalism and sophistication, enhancing the perceived quality of the training content.
Using bright colors on the mobile site can create a playful and engaging experience. These colors are often associated with energy, excitement, and positivity.
I updated some photos and images because the old ones looked outdated and did not fit the new color palette well.
Based on the usability testing results, the "Shop by pet" carousel was moved to a lower position on the page after the reading materials content/CTA buttons. This was likely done to prioritize the educational content and ensure it was easily accessible to users.
Final Design
Final Thoughts
I spent a lot of time considering what to include in a website for pet owners, and I thought that a key differentiator could be structured training. However, I soon realized that creating complete content with all the necessary features, services, and elements would take much longer than the time I had available.
This project still has a lot of potentials, but I needed more than just time to make it a reality. It would require additional resources, such as people, tools, and knowledge, to develop KIPU according to my initial vision.
Therefore, it was crucial to manage my time effectively and focus only on the essential aspects that would make KIPU stand out based on its fundamental principles, such as consistency, clarity, accessibility, hierarchy, and simplicity.
I found it valuable to learn about the responsive aspects of scalability and to focus on essential elements for a better user experience within this project's scope. It was important to prioritize features and services based on relevance and distribute their hierarchy accordingly.
Next Steps
I would consider conducting usability testing to gather feedback on the wireframes and make any necessary adjustments before moving on to the final designs. This approach would allow me to focus on usability, functionality, and overall user experience before considering branding and colors.
I would have liked to create designs for the desktop version of KIPU beyond just wireframes.
Others you may like
WhatsApp Scheduler
