Pet Adoption Interactive Prototype
Assignment 7 (HCDE 451)
University of Washington
SCENARIO
For this assignment, the purpose was to expand our skills in website and mobile application prototyping by implementing practices from design systems in industry. We were asked to design an application that has both a web and mobile app component and develop interactive wireframe mockups of each. The goal was to learn how control elements, navigation elements, and layout differs between websites and mobile apps, and develop interactive wireframe prototypes of each.
For the design challenge, we had three application areas to choose from:
- Pet Adoption: process for pet adoption, finding a pet to adopt, keeping track of pet adoption process, donate to shelter, etc.
- Music Rehearsal or Library Room reservation: creating or changing reservations, searching for rooms, filtering, possibility of reserving materials, etc.
- Task management: creating and managing personal to-do lists, for academic or general life, anti-procrastination techniques, etc.
We had to assume for any area that the target user was a college student — the design goal was to create a system that makes the experience more fun, more meaningful, more efficient, or any combination of these goals.
Moreover in terms of requirements, we only had to create one end-to-end user task (e.g., the user flow of a college student who needs to create and submit a reservation for a music room on campus) in B&W wireframe format.
IDEATION & RESEARCH
I decided to design a pet adoption application but was not sure what I wanted to focus my end-to-end task on when I started my ideation phase. I was also not sure as to what features and components most pet apps used. Therefore, I did some preliminary research to find out what information and services different pet adoption applications and platforms have. After examining applications such as Petfinder, AllPaws, and LikeThat Pet, I was able to determine what information to visualize (e.g. pet characteristics on the cards when browsing through a list) as well as what features and components to provide (determined by popularity and reviews across the apps).
HOW IT WORKS
The app I designed essentially enables the user to find a pet to adopt (from people nearby or shelters), give away a pet, find nearby vets, care facilities, parks and events. Not all features are available on web and mobile (e.g. events are only visible on web) to not overload the user on the phone (crowd the app). This was also done by Petfinder and other apps.
For this assignment however, not all screens and functionalities were developed. I created wireframes to complete one user task [see Usability Testing below] as well as some additional ones.
SKETCHING
I wrote down the information I gathered through my research phase and categorized the components into categories: web and/or mobile. This enabled me figure out what features would overlap on the two platforms and helped me figure out what I wanted to navigation tools to look like.
I then generally started sketching landing screens (directly accessible via main navigation bar). When I was thinking the concept of pet adoption and apps, I was inspired by Zillow and Trulia to have a map search functionality. I looked at both the web and mobile apps’ UIs. I also thought a map functionality could be beneficial to college students as they might all be from the area nor own a car. They could hence be able to efficiently see what pets are near them exactly.
I was was fairly confident or had a clearer idea of what I wanted to desktop wireframes to look like, but I was a little less certain about the mobile design. Through prior work, I had more knowledge and experience developing web applications and platforms. However when remembering my target users (college students), most of them nowadays seem to be “mobile first,” which made me decide to focus my initial sketching sessions on the mobile app.
To help with the app design and navigation, I sketched out a rough sitemap for how I wanted to organize the information and features, and hence base my navigation paths.
Before finalizing my ideas and design choices, I asked peers of mine if my flow made sense. I was also concerned or debating whether to use a bottom navigation bar or a menu drawer for the mobile app. Based on their feedback, they agreed that the flow would be better with a navigation bar for quick access to the different main pages and thought the map-list search views would be effective. They also thought it looked better as I have a search bar on the top of the main screens (i.e. menu drawer would make the top part more cluttered).
Click here to view sketchbook.
PROTOTYPING
WIREFRAMES
After I finished sketching, I used Adobe XD CC to design my wireframes. I designed additional screens directly on XD — ones that had some slight variations (i.e., drop down menus, shaded hearts for saved pets).
Designing mobile screens took a lot longer to prototype not only because I had less experience with mobile apps, but also because I had to figure out how to (1) make it as simple as possible to not overwhelm the user, (2) try to use more icons and less text but still maintain clarity, and (3) make sure everything is visible as the screen size is a lot smaller.
I then put the screens together to fit a scenario [see Usability Testing below] and made an interactive prototype. When I then started creating wireframes for the web screens, I only designed the screens necessary for my scenario. While generally the web version enabled me to display more information due to screen size, I still had to keep in mind what the user would want to see on each page and some web pages ended up having less content. For example the mobile feed/news page had a lot of pet listing while the web home page had large banners with with a lower quantity of animals displayed.
Click here to access the all the wireframes created.
INTERACTIVITY
To create the interactive prototype, I chose to use Marvel. All of my mobile screens fit properly Marvel’s iPhone 8 mockup. However, my web screens were not the same ratio as the platform’s mockups. I then had to go back into Adobe XD and change my screen size and adjust the elements and layout of the pages.
Both the mobile as well as the web versions of the interactive prototype were used to test the prototype.
USABILITY TESTING
The purpose of creating the prototype was to be able to evaluate the preliminary design with user testing. I drafted a user scenario that would complete at least one end-to-end task and recruited two participants to conduct this usability test.
Both participants successfully completed the tasks within the scenario. They commented on how the app was straightforward, well thought out, and both liked the dual views for the search screens. One participant however squinted quite a bit on the phone on the list view when trying to read the description of the animal on the card.
See Participant 1 Session for an example of a usability test and critique recorded.
EVALUATION
In addition to the feedback I received from the two usability tests, I also showed my prototype to two classmates of mine during the in-class peer critique session. Based on the feedback I received from usability tests and in class critique sessions, positive feedback included:
- “Although they are wireframes I like the consistent design and feel of the app… for example the cards with the animals.”
- “Straightforward and well thought out.”
- “Information was where I expected it to be.”
- “Nice job developing the screens to find an animal through both the map view and the list view.”
On the other hand, constructive feedback included:
- “It was hard to see the description of the pets on the mobile screen. They’re a little small and light.”
- “What about being able to adjust the size of the map vs list view on the web version. How would it react responsively?”
- “Wish there was an x-out button on mobile filters like on web to deselect filters where the bar is. Also the filters on the drop down menu weren’t clear at a pet kind level in terms of what was clickable. Adding like a line below it or something would help.”
Therefore if I had more time, the next steps I would take would be:
(1) Making sure that the features and data are desired as well as valuable to college students.
(2) Work on the font sizes and colors in order to make them more easily legible.
(3) Making my wireframes mid-fidelity prototypes to see how it actually looks with color (i.e. make sure everything is clear, not cluttered, etc.).
(4) Improve design of web filters to be clearer in terms of visual hierarchy and what is clickable.
(5) Conduct usability tests to figure out whether people would prefer the list or map search view to a) figure out what to set as the default view on mobile and b) determine the visual hierarchy/split between the two views the web version.
