Pass the pup
About this proJect
In my art 337 class, we were tasked with creating a "calculator" app. It could calculate anything we wanted, it had to have a cohesive and intuitive design, and it had to be user friendly. After looking at several examples from past classes and my peers, I got to work brainstorming.
Brainstorming
I started by creating a word map. This helped me come up with ideas for an app by word association and grouping. My starting words represented what ideas I already had; reading, gratitude, practice, pet care, chores, diet, health and so on. After filling out the page, I circled words that were related to each other with their own respective colors.
Now that I had a full word map, I created a list of possible app ideas. Many of the ideas that I came up with were pretty similar, but I was able to pick five that I thought were worth pursuing.
First, a meditation app that tracked how many minutes you had meditated. Second, a hiking/ time in nature app that tracked how much time you had spent outside and gave hiking trail suggestions. Third, a pet care app that calculated how much time you needed to play with your dog and tailored to what breed you had. Fourth, a sleep calculator that no only tracked your sleep, but recorded how long it took you to get to sleep. And finally, an app that calculated how many miles you had driven and told you when you needed to change your oil.
I decided to go with the pet care app as it interested me the most. Personally, I have a high maintenance dog that requires a lot of care. I thought that an app that tracked each of her needs everyday and reminded me which ones she needed more of would be a real asset to me and to my family.
After I decided to go with a pet care app, I knew that I wanted to name it "Pass the Pup". My brothers and I have a game that we play with our Border Heeler, Naga. We run with her in our arms from one end of the room and back, then pass her on to the next person. She has so much fun with it, and we get a good workout. I thought it would work for my app since I wanted to have a feature where you could somehow share the responsibility of pet care with your family. With my app you and your family can "pass the pup" to each other and have everyone contribute to the dog's wellbeing.
Image 1 (left): The word map I used to come up with ideas for a specialized calculator app. Image 2 (right): List of app ideas. My top five ideas are in blue.
Research
I began my research by figuring out what the core needs of every dog is. I found six. Dogs need a space of their own, whether that be a dog bed or a doghouse, food and water, exercise, play time, love, and grooming. However, since every dog is different, the amount they need of those things varies. For example, a Chihuahua won't eat the same amount of food that a Great Dane does. And a Greyhound won't ever need to be brushed, but a Golden Retriever will need to be combed frequently. With this in mind, I wanted to include a feature that calculated your dog's needs based off of their breed.
When I started to research app designs, I was surprised with how colorful and fun they were. I knew I wanted to implement that. I was also drawn to the cute illustration style of the ones below:
Target Demographic
My main audience would be all types of dog owners, but specifically families who want to share the responsibility of taking care of the dog together.
Persona One: Hannah is an outgoing 23 year old college student who lives alone with her dog. She is often out of the apartment and feels guilty leaving her dog home alone during the day. She has a goal to spend more time with her dog and strengthen their bond.
Persona Two: Tyler is a sedentary 43 year old husband and father of four. He and his wife have decided to get a dog, but want to make sure that everyone in the family helps with the responsibility. He thinks that getting a dog will help him stay active and teach his kids responsibility.
Persona Three: Anna is a 10 year girl who loves the outdoors and taking long walks with her dog. They often play in the mud and dirt on these walks and come home dirty. She isn't sure how often she should bathe her dog though, since they have a sensitive coat.
Persona Four: Jacob is a 62 year old retiree who has recently taken up dog fostering with his daughter. Many of his fosters come to him in bad shape, and in order for them to heal and get adopted, he needs to earn their trust and give them their needs regularly.
Scenarios
Scenario #1- You just bought a dog. Use the app to learn how often a Border Collie sleeps at 6 months old.
Scenario #2- You won't be home from work for dinner and need to make sure your dog is fed. Use the app to remind your son to feed the dog.
Scenario #3- You notice that your dog is stinky. Use the app to check when their next grooming appointment is.
Sketches
I knew when I started sketching, that I wanted to design three different options for each scenario. This would make me push myself to explore different options and in turn, make my designs better in the long run.
Scenario one was relatively easy to sketch. I knew exactly what I wanted to do with the page, and changing the designs for those elements was simple. From the start I wanted to include a search bar to find the dog breed, and two drop down menus. One for a number, and the other for a unit of age (months and years). Once the user put that information in, a brief summary of their dog's needs would appear. Icons would represent each of the dog's needs and the amount of that need would be directly to the right of the icon. For example, an icon of a food bowl next to the instructions of: One cup twice a day. Feed your dog one cup of food two times a day. At the bottom of the screen I wanted to include an overview of the dog's breed that informed the user even further about their dog.
Sketch #1 (left): Search bar and drop down menus below the dog's photo. Sketch #2 (middle): A pie chart to show the hierarchy of each need. Sketch #3 (right): Bars to show the importance of each need in relation to each other.
Scenario two was a little challenging. I found it difficult to portray the same idea in three distinctive ways. After spending some time, I think that each sketch brought something new and worthwhile to the table. The idea of displaying the last time each family member fed the dog came in the middle of my second sketch. This would make it easier to delegate the task, as it would keep track of whose turn it is.
Sketch #1 (left): I like the empty food bowl and fly to indicate that the dog needs to be fed. I also like outlining the person's name that you have selected to remind them to feed the dog. Sketch #2 (middle): I'm not a fan of how I designed them, but I do think including drop down menus to select the person and the time to remind is a good idea. Sketch #3 (right): The inclusion of a countdown on the bowl made this one my favorite designs. I also like the remind everyone button, since you can't be sure who is home at all times.
Scenario three was the most difficult to design. I felt as though I didn't have much to work with and it took me a while to come up with variations of my initial idea. Once I got to the third sketch however, I let myself relax and have fun. That resulted in my favorite sketch for the scenario! I noticed that the sketches I like the most have the most personality and a sense of fun to them. That spirit of fun is something I will definitely utilize in the future with this project.
Sketch #1 (left): A basic calendar design with a button that would take you to the groomer's website and help you schedule an appointment. It would then save that appointment in the app. Sketch #2 (middle): I made the calendar bigger and added an icon that showed you the last time your dog was groomed so you could gage when you needed to schedule them for another session. Sketch #3 (right): I added a fun element by putting a dog at the top that showed you how much your dog needed to be groomed. The longer you waited to groom your dog, the dirtier the dog would get.
Usability Testing
The next thing to do was to test my sketches to see what made sense and what didn't. I tested my app on two people: my brother (who is pointing in the pictures) and my mother (who is standing). The gave some really good feedback and pointed out somethings that didn't work. For example, on the calendar, they thought that the grayed out week was when the groomer wasn't available when my intention was to indicate that week as the week the dog would need to be groomed again.
The parts they thought worked were the ones I had the most fun designing. The countdown on the food bowl, the dirty dog, and the pie chart just to name a few. I now have a good idea of what works and what doesn't.
Revised Sketches
After reviewing what my brother said, I put together the best parts of each sketch into one. This is what I will be basing my prototypes on. My brother made a good point concerning the dog info screen. Including the drop down menus in that screen would increase the chances of accidentally changing the dog breed, or age. It would make more sense to set that information up either on the home screen or on the initial sign-up page when you first download the app.
Image #1 (left): Revised feeding reminder screen. Unfortunately I forgot to add the feature that displayed the last time each family member fed the dog. I will make sure to include that in my prototype. Image #2 (middle): Revised dog information screen. Image #3 (right): Revised grooming scheduler.
Wireframes
I spent a lot of time on Figma trying to figure it out. After watching tutorials and searching up specific functions on the internet, I started to get the hang of it.
I initially had more screens, but after a meeting with my instructor, I reduced them to these four. Using his feedback, I changed the pie chart to a ring chart to give it a more interesting look. I also had to change one of my scenarios since my first scenario worked better as a home screen. To do this, I added a feature that would give you a glance of your dog's needs. But when you clicked on one it took you to an information page that went into greater detail.
Image #1 (left): Prototype of the home screen. I changed the pie chart to a donut/ring chart. Image #2 (center left): The "more information" screen that pops up when you click on one of the needs icons on the home screen. Image #3 (center right): The remind screen, my professor added some kibble in the bowl, and suggested that the bowl will get emptier the closer it gets to feeding time. I had that idea as well, but I'm not sure how to execute that. Image #4 (right): Grooming calendar prototype.
Usability testing #2
After I designed my first prototypes in Figma, I tested them on two of my co-workers and my husband.
Test #1
I did my first test on my co-worker, Rachel. She had a very easy time navigating my app and understanding it's features. She knew exactly what the food countdown meant, how to schedule a grooming appointment, and what all of my icons represented. She did recommend that I add another screen to navigate between different dogs, seeing as many people have multiple dogs. In addition to that, she expressed that some sort of checklist would be beneficial.
Image #1 (left): Co-worker #1 looking at the "remind" screen. Image #2 (middle): My co-worker explaining what she thinks the donut chart is for. Image #3 (right): Looking at the "more information" screen.
Test #2
The second test I did was with my other co-worker. She had a harder time navigating the app. She got confused on the "more information" screen and pointed out that if I connect each icon to the "sleep" portion of that screen then it would cause further confusion. Her other feedback was helpful, and she suggested that I change the grooming icon to something else since it matched the brushing icon.
Image #1 (left): My co-worker looking at the remind screen, she pointed out that she was confused about how to remind someone to feed the dog. Image #2 (middle): Her explaining to me how the "more information" page confused her. Image #3 (right): Her navigating the home page and suggesting the grooming icon change.
Test #3
I did my final test on my husband. He played around with it for a minute, and clicked on everything to see just what the app did. After that, he said he liked the grooming calendar page and the home page the most. He gave me exclusively positive feedback. After pressing for something I could improve, he told me that it could use some more color.
Image #1 (left): My husband clicking on everything to see what each thing did. Image #2 (middle): The grooming screen. He liked that the dog would get more stink lines the closer their grooming appointment got. Image #3 (right): Navigating the "more information" screen.
Refinements
After receiving feedback from my two co-workers, my instructor, and my husband, I refined my prototypes. I added a screen to add another dog, included more color, and changed the grooming icon. In addition to that, I made sure everything was aligned and looked clean. This is what I came up with.
Image #1(left): New and improve home screen. Complete with a check list. Image #2 (center left): Improved "more information" screen. I got rid of the gray background and added only a simple green line to indicate which section is highlighted. Image #3 (center): Remind page remained the same. Image #4 (center right): Nothing really changed here. Image #5 (right): New dog screen.
Final Product
After meeting with my instructor one last time, I expressed my disappointment with my designs. I told him that I wasn't excited about my app. When I looked at it I felt bored and underwhelmed. Luckily, he suggested that I invert my color values and go for a "dark" background instead of a "light" background. My accent color became my main color, a light tea green became my secondary color, and a bright electric blue became my accent color. I think that this color scheme is vibrant, energetic, and inviting. I feel a lot better about my designs because of those color changes.
Finally, I read some more feedback from my peers and changed the icons to be more square than rectangular, and switched the generic person icon to actual profile pictures.
Image #1(left): Final home screen. Image #2(center left): Final information screen. Image #3 (center): Final remind screen, now with profile pictures. Image #4(center right): Final grooming calendar. Image #5(right): Final add a dog screen.
Thank you for reading!
