A pet adoption management app

Pet adoption management app

UX Project (University of Michigan/Coursera)

Challenge: Develop interface wireframes to concretize the design and conduct user tests with paper prototypes to get preliminary user feedback on the design concept and interactions.

Activities: User Persona, Scenario, Wireframes and Paper Prototyping

Result: Design the wireframes and interaction architecture for a pet adoption management app. An interactive paper prototype was also made that could be tested with users to receive feedback and improve the design.

 

Description of the system

Petto is an adoption management app that could be used for shelters, sanctuaries, and organizations that help abandoned and abused animals. Also, it is very common for individuals to rescue animals and keep them in their houses while the animal recovers. For that reason, I designed a new tool to help animal rescue organizations improve their management. The app has an electronic file option. With this file, organizations or rescuers can keep a count of rescued animals with their name, gender, approximate age, weight, breed, vaccines, and so forth. The file will also have an option that allows organizations to list whether an animal is "rescued," "in recovery," "in process of adoption," and "adopted." Many of these organizations do not have an electronic file, because they are very expensive, and they are made for hospitals or veterinary clinics. Besides, there are some apps with these options, but their designs are ugly and they are very complicated to use.

User Persona & Scenario

Wireframes

Paper Prototype

 To test the app, the tester was asked to perform 5 tasks. The tester was able to complete the test tasks successfully.

  • Task 1: “Add new account”:  The user had to type the following information to create an account on the “Sign Up” screen: his e-mail, a password and re-enter the password. After that, the tester tapped on “Sign Up” button. When the tester created an account, he had access to use the app. 

  • Task 2: “Add a new pet”:  After creating an account, the app directed the tester to the home page. The second task was to add a new pet. To do this, the tester had to tap the “Pet file” icon and the following screen tap the Plus icon (+). On that screen, the tester had to fill out the form about the information of the pet like name, status, species, gender, breed, rescue date, and neutered. When the tester filled out that information, he tapped on the “Save” button. The pet information was given to the tester.

  • Task 3: “Add medical file”: After the tester entered the information about the pet, the app displayed that information on a new screen. On that screen, the “Medical File” option appears in the form of a first aid kit icon. To add a medical file, the tester had to tap on that icon to fill out the form about the information of the medical situation of the pet (Medications, Vaccinations, Allergies, Medical prescription, and X-rays). This information was given to the tester. After the user filled out the form with the medical information about the pet, he tapped on “Save” button and the app displayed that medical information on a new screen.

  • Task 4: “Add food on the inventory”: The tester was able to access the inventory through the “Inventory” icon. The tester had to add food to the inventory. To do this, the tester had to tap the Plus icon (+) and fill out the information about the food (name of the food, quantity, and meals). The food information was given to the tester.

  • Task 5: “Add an event”:  The final task was to add an event on his agenda and set a reminder. The tester was able to access the events through the “Events” icon. To add an event, he tapped on the plus icon and fill out the information about the event (year, month, day, hour, name of the event). This information was given to the tester. At last, he tapped on the “Save” button.

 

Feedback

After prototype testing, I received feedback from the tester to change or design differently on the app. The tester found 5 things to improve: 

  • Problem 1 -  Yes/No List: On the “Add pet file” screen, there is a list to fill out with the information about the pet. The “genre” and “neutered options have a Boolean selector. But, when the tester selected the “Microchip” option, the app displayed a list with yes and no options. The tester suggested putting a Boolean selector in the “Microchip” option too.  I think is a good option to put a Boolean selector instead of a yes/no list, because is simple and quick to select. Besides, the app doesn’t have to waste resources to open a list.

  • Problem 2 - The title: The tester found a mistake in the title of the “Inventory” screen. When the tester filled out the information of the food, the new screen with that information says “Medications” instead of “Inventory”.  To resolve this little mistake, I going to change the title of that screen and I going to check all titles of the app to be sure that any tittles be wrong.

  • Problem 3 - The search list: An event can be associated with the pet. For that reason, the user could search the pet on the list that is displayed on the “Events” screen. However, the list has all the pets the user has added on the app. That could be a problem because the user has to search one by one.  For that problem, I think to add a new screen to search instead of a list. On that screen, I could add a bar search to facilitate the search.                                 

  • Problem 4 - The Plus icon: The “Inventory” screen has a “plus” icon, the tester said that this icon was unnecessary and it was a little confusing for him because he thought that “plus” icon was for additional supplies to the inventory, but was for add a new supply option like toys, grooming tools or any another option the user needs. To resolve this, I think to remove the plus icon to avoid confusion.

  • Problem 5 -The first aid kit icon: When the tester added a pet on the file, the “medical file” option was displayed in form of a first aid kit icon. However, the tester did not notice that option, which caused him to search for the options that were available.  I could change the first aid kit icon for a bottom that says: “Add a medical file”. Another option could be adding a little description that indicates the function of the first aid kit icon.

Previous
Previous

Real State Website