BEST FRIENDS PROTOTYPE

Methods

For this project I created a low and high fidelity app prototype. I asked 5 users to complete 5 tasks and to give feedback on the low fidelity prototype.

I asked users:

• Can you find information about the organization?
• How would you donate to the organization?
• How would you find cats that are available for adoption near Kanab, UT?
• What would you expect to find on the resources page?
• Where would you go to find out about volunteer opportunities?

Based on their responses, I created a high fidelity prototype. I then asked the same 5 users for feedback on the high fidelity prototype which I used to make adjustments to the final design.

Tools

• Paper and pencil
• Adobe XD
• Adobe Photoshop
• InVision

Users

The five users ranged in age from their late 20s to mid 60s. Five of the users were male and one was female.

Details and Findings

I started this assignment by researching the organization Best Friends of Utah. I read their mission statement and goals. I saw that the organization's main goal is to find homes for animals. In order to do that they rely on donations and support from volunteers. I also looked at their logo, colors, and the types of style they used on their website.

I created 2 user personas. One based around an individual who would be interested in using the app to find a pet to adopt and the other around an individual who would want to support the organization by volunteering. With these users in mind I drew a wireframe using paper and pencil. I then drew out the wireframe in AdobeXD and used that design to create a low fidelity interactive prototype using InVision.

Open Low Fidelity Prototype

At this point I conducted the first round of user testing. I asked 5 users to complete 5 tasks using the prototype. I asked them for feedback about the layout and the overall design.

I found that most users wanted a banner added on the home page to create more visual interest and to to show new events or information that they would be able to see when they first open the app. I also found out that most of the users did not like the name of the resources page. The most popular alternative was to change the name of the page to articles. They also wanted to add a way to filter through articles. I also found that users wanted a Frequently Asked Questions page which I had not thought to include in the first prototype.

Based on the findings I made adjustments to the design and then created a high fidelity prototype. I added images, color, and made elements to scale in Adobe XD. I imported the high fidelity image files into InVision and created a high fidelity interactive prototype.

Once I had a high fidelity prototype, I asked the same five users for more feedback which I used to make adjustments to the final design. For example, on the adopt page, most of the users agreed that the adopt button was too low on the page and hard to find unless they scrolled to the bottom of the page. I asked each of the users where they would want the button moved. Most suggested putting the buttons under the name of the animal that was being adopted.

Open High Fidelity Prototype

Problems I Encountered and What I Learned

The largest challenge that I encountered was learning how to make design decisions when users gave conflicting suggestions. For example, on the articles page all of my users said that they would like a way to filter through different articles. However, two of the users said that they wanted some kind of tab navigation and that they hated using search bars and two of them said that they only used search bars and that having any kind of tabs or keyword based navigation would make the page feel cluttered. However by talking to them more and offering suggestions and listening to their ideas, we were able to find a compromise. All of the users said that they would not mind having a search bar as long as it did not feel like it was in the way. They also agreed that keywords would be alright as long as there were no more than 10. Originally two of the users insisted that they wanted to have a navigation that was in alphabetical order. However when they saw the keywords ordered by popularity they both changed their mind and said that they prefered having keywords ordered by popularity as long as the list of keywords was not long.

In the end, all of the users were happier with the new design that had a search bar and clickable keyword than they were with either having only a search bar or only having tab navigation. As a result of working on this project, I learned that talking to users and listening to different ideas is important and can lead to a better overall design.