HealthyPup App Design
- pettyabigayle
- Sep 28, 2021
- 4 min read
Updated: Nov 15, 2021
Overview
The HealthyPup app was made to help people keep track of their dog’s vaccinations, wellness checks, and other important information. This app can keep track of microchip information, veterinary information, and records of your pet’s vaccinations while being located on your phone so it’s always available to you.
The Problem
There are millions apps on the market but when I got my puppy, I noticed a hole. There wasn't an app that could keep track of his records, vaccinations, or veterinary information. When I travel, I carry all his original documents that, if lost, would leave me in a bind. I thought, how convenient would it be if I could just have it all in the palm of my hand?
The Process
I started out by gathering all the documentation I have on my dog and went over what would be the most necessary to have in the app. Next, I wrote down all the features I could think of to be included in the app before narrowing it down to the what was most feasible for me to accomplish in the timeframe for this project. I then came up with three different scenarios of instances that you would use the app.
You just got a new Goldendoodle puppy named Cooper! Congratulations! You have downloaded an app that lets you keep track of his health information. Let’s get started in the app.
Cooper just got his first booster shot and you want to record it. Let's input that information into the app.
Cooper isn’t feeling good! He isn’t eating and his stomach is upset. Let’s find his vet's number on the app and give them a call.
Next, I started sketching prototypes of what I'd want my app to look like for these scenarios.
User Testing (Round 1)
The next step in the process was to user test it. After user testing the scenarios on three people, this was some of the feedback I received.
Maybe break up the set up into multiple steps?
Have a way to get back to home screen.
Simplify the options on the home screen.
After completing this round of user testing, I moved onto refining the prototype while designing wireframes on Figma.
User Testing (Round 2)
Once I had completed a basic design of my prototype, I did another round of user testing. Using three different people and the same scenarios, here are the results.
The app should have a username and password so you can log in on other devices.
Need a way to log back out.
“Need Help” button should be on the otherside.
Have a notes option on record page.
Next, I moved onto refining my wireframes. For this step, I took the feedback I received and put it to work. I added a username/password log in option and
User Testing (Round 3)
With my wireframes completed, I did a third round of user testing. Again, I used three different people and the same scenarios. Here are the results.
The onboarding process should be broken into multiple steps instead of being a long block of information.
The record type and vet dropdown should just be text boxes.
Make the text smaller on the vet info page.
Add more buffer space between the objects so it doesn’t feel so crowded.
Next, I moved onto designing my final prototype and beginning my designing. I broke the onboarding into multiple steps and adjusted the sizing of the elements.
Design
Once I got to this point, I decided to look at inspiration for design. After looking at app designs and getting some ideas, my next step was to finish designing. For my final design, I redesigned my "Add Records" page and "Profile" page to make them look more cohesive with the rest of the app.
Design 2.0
After looking at my final design, I was given a chance to refine some details of my design and case study. For this design, I wanted to rebrand the colors I had decided on using. I also adjusted the type to be more consistent across all screens. Adjusting the sizing of the font allowed it to not feel as crammed in and gave the text some breathing room. I think that this rebrand is effective because it gives a brighter appearance and one that I feel is more welcoming. It also looks more like some successful apps on the market.
This video shows the process of one of my scenarios. The scenario is the following: "Cooper isn’t feeling good! He isn’t eating and his stomach is upset. Let’s find his vet's number on the app and give them a call". The video starts on the home screen that shows when opening the app. You need to find the vet's phone number so you tap on "Vet Info" and then tap the number to launch a call confirmation screen. That's it! It's a simple way to keep track of all your vet's information so that when the need arises, it's all conveniently located in the HealthyPup app.
Conclusion
Overall, this process was very enlightening as to the process behind UX/UI design and what all goes into the design of an app. It was very interesting to see the thought processes of other people as I user tested and received feedback. Watching someone else use your app gives you a lot of insight and direction. For me, it reminded me that not everyone thinks like me so I had to design for me entire audience of people who might use this app and not just a niche of people with my specific mindset. Overall, it taught me a lot about design not only for UX/UI but also for design in general. This app would be amazing to be able to have for the health maintenance of my dog but for now I'll be happy just using paper!
Comments