PETPAL INTERACTION DESIGN PROJECT
Joshua Hansen Echo Lu Tyler Jackson Pratik Nalawade
Table of Contents
H541: INTERACTION DESIGN PROJECT PHASE 3: Midterm Final Report Table of Contents Prototype Description Reflection Evaluation Report Summary Heuristic Evaluations and Think Aloud Evaluations Cognitive Walkthroughs Next Steps Reflection Appendix
Prototype Low Fidelity Prototype ​https://marvelapp.com/2h2j16e
High Fidelity Prototype https://marvelapp.com/1df0g9f
Description The prototyping tool we chose to use was Marvel from https://marvelapp.com. Josh has used Marvel in the past and it’s worked out really well. It’s very easy to use and you can create low-fi and high-fi prototypes. Marvel allows you to upload the sketches and create clickable links that move from page to page. Our team created two prototypes. The first prototype was created based off of sketches that Josh and Echo drew. We wanted to have a low fidelity prototype for our initial testing, so that users would focus on the tasks and not the design. For our presentation and potentially second round of testing we created a more high fidelity prototype.
Reflection The hardest part about making the low fidelity prototype was coming up with the initial sketches. Josh and Echo had to collaborate on the screen flow to give PetPal a consistent feel, whether you were a pet sitter, or if you wanted your pet to be watched. A flow diagram was used to determine which screens would lead to which other screens. This was also referenced when creating the prototype. That part of the prototyping process worked really well. What didn’t work well was making changes to an existing sketch. Marvel doesn’t allow you to edit an existing image that you had previously uploaded. To do this, you have to go to their ‘design’ section and then upload an image to be able to add to it. This process worked well enough for the low fidelity prototype. To keep with the consistency of the high fidelity prototype, all changes had to be made in Photoshop. Even after all of the screens were made and uploaded to Marvel, some inconsistencies in flow came up when they were linked together. Nine screens had to be changed, after they were thought to be completed. I would use Marvel again in the future. I’ve used other prototyping tools in the past, and Marvel seems the easiest to work with. It does a great job making your sketches or images look like a functioning prototype.
Evaluation Report Summary Heuristic Evaluations Heuristic evaluation is a process in which usability experts analyze the application for usability problems based on defined heuristics principles. Heuristic evaluation can also help in understanding the good aspects about the system. For our heuristic evaluation, we decided to use the 10 heuristics defined by Jakob Nielsen. We performed 2 tasks on the application and evaluated each the result of each action against the heuristic principles. The evaluation was documented in a UAR where each problem was defined individually along with evidence, explanation and severity. Based on our evaluations following problems were discovered: 1. All percentages on the map are represented with the same color 2. Progress indicator is not present 3. Too many options present in the system They are described in detail in the following Usability Aspect Report:
UAR Number: UAR01 Product Name: PetPal Date and Time of Study: 10/21/2016 8.00 PM Experimenters’ Names: Pratik Nalawade Heuristic List: 10 Usability Heuristics for User Interface Design by Jakob Nielsen https://www.nngroup.com/articles/ten-usability-heuristics/
HE01
Problem
Name: All percentages on the map are represented with the same color Evidence: Heuristics: Flexibility and efficiency of use All percentages on the map are colored red.
Explanation: All percentages are shown in red. 10% is a bad match and 90% is a best match, still both are colored red. Using different color will help the user distinguish between good and bad matches without reading the percentages Severity Rating: 2 = Minor usability problem Justification (Frequency, Impact, Persistence, Weights): Although the change is cosmetic in nature it has a significant impact on the usability of the map as it will make it easier for the users to find the pet sitter that matches them best. Also, the map is a core part of the application and will be used by all the users of the application. Hence it has a 2 rating instead of 1. Possible solution and/or Trade-offs: The solution is to color code the percentages. A possible solution is using green for best matches, yellow for good matches and red for bad matches. There is no tradeoff for the solution, since the percentage is still shown to the user (will be beneficial for color blind users). Relationships:
HE02
Good Aspect
Name: The language used in the application is easy to understand Evidence: Heuristics: Match between system and the real world
Explanation: The language used in the application is simple to understand and does not use any technical jargons. Words like “Oral Meds”, “Microchip” make sense to both pet sitters and pet owners as they are common terms used among the pet community. Benefit Rating: Justification (Frequency, Impact, Persistence, Weights): Language is a very important aspect of the application. Using high level technical language will confuse the user and the user will discontinue using the application. Possible solution and/or Trade-offs: This is a good aspect of the solution Relationships:
HE03
Problem
Name: Progress indicator is not present Evidence: Heuristics: Visibility of system status As seen in the image there is no indicator as to where the user is present in the application or how many more steps it will take before the user finishes his task.
Explanation: There are lot of screens present in the application which are necessary to filter the variety of pets and to enter details regarding the pet. During this process the user has no clue how many more actions he/she must perform before he/she can find a pet sitter or find a pet to pet sit. Severity Rating:​ 3 = Major usability problem Justification (Frequency, Impact, Persistence, Weights): ​The process of going through all the filter and detail screens will occur only in the initial stages of using the application. Once the pet owner profile and pet sitter profile is set these preferences will be saved, but it will affect every first-time user. This should be fixed to improve user experience for first-time users and retain them as daily/frequent users Possible solution and/or Trade-offs: ​Possible solution is implementing a progress bar or indicating the progress through breadcrumbs. Relationships:
HE04
Name: Too many options given to the user Evidence: Heuristics: Aesthetic and minimalist design
Problem
The screen is displayed to pet sitters with questions that will help pet sitters narrow down their choices Explanation: To improve the match between pet sitter and pet owner, multiple options are shown to pet sitter from which he/she can narrow down his/her choice of pet.
Severity Rating: 2 = Minor usability problem Justification (Frequency, Impact, Persistence, Weights): The problem with having so many options displayed to user at one time is that the user can get confused/frustrated. This will lead to user quitting the application. The screen is part of the common task flow for pet sitter and this problem will affect every pet sitter that tries to user our application Possible solution and/or Trade-offs: The possible solution is to reduce the number of options present on one screen, or divide it in sections and give the option of selecting a section and then answering the questions. Relationships:
Think Aloud Evaluations User Evaluation 01
Product Name: Petpal Date of Study: 10/21/16 Experimenters’ Names: Charles Yu Subject ID: U-01
No.UE-01
Problem
Name: Content (slides) loop; Labeling on certain buttons is misleading / confusing; There is a lack of chat ability between pet owner and pet watcher. Evidence: 'Content Loop' Slides 03 - 05 'Confusing Button' Slide 02 'Lack of Chat' None in app / prototype
Explanation: When the user tries to advance in the app, he end up back at previous screens. This is primarily because the prototype is limited in functionality.
The button labeled 'Watcher Seeker' seems ambiguous. The user was unaware of what this meant. The user stated he didn't understand how both pet owner and pet watcher communicated. We as a team thought this would go through the two users' third party e-mails, however, now that we have feedback that there should be some type of internal messaging system, that is something to consider.
Severity: ​3 ; 3 ; 2 Justification: 'Content Loop' Frequency: High Impact: Difficult. This happened multiple times during the 'think-aloud' session, which not only confused the user, but also prevented him from advancing in the app. Persistence: High Weights: These ratings are based off the fact the occurrence of the problem happens quite often, and the user is disrupted from using the app.
'Confusing Button' Frequency: High Impact: Difficult. The user sees this each time he use the prototype. Persistence: High Weights: These ratings are based off the fact the occurrence of encountering this issue is quite often, and the user is disrupted from using the app.
'Lack of Chat' Frequency: low Impact: Easy. The users of the app will have a third party e-mail they can use if the app lacks a feature to chat in app. Persistence: High Weights: These ratings are based off the fact the problem has an immediate solution.
Possible Solutions: 'Content Loop' We need to add more content to the low-fi version of our prototype seeing the user is limited in choices and can easily get disoriented in what they are doing in the app. 'Confusing Button' We need to figure out a better label for this button. 'Lack of Chat' We need to consider adding the functionality of being able to chat in app (allowing users a way for quick chats).
Relationships: U-02
Think Aloud - User Evaluation 02
Product Name:
Petpal Date of Study: 10/21/16 Experimenters’ Names: Eric Durr Subject ID: U-02
No.UE-02
Good Aspect
Name: Transition from map to profile. Evidence: The user claimed that was a 'cool' feature. From research, we found there to be other models currently out on the market that utilize such methods and systems (clicking an icon and then being presented with a data set) have been successful.
Explanation: When the user clicks the 'pin drop' icon on the map, he is being transferred to either the pet or pet owner / pet watcher profiles. This was done intentionally, because we, as a team, knew, from research, this would be a successful way to convey the data.
Benefit: 3 Justification: Frequency: High Impact: Easy. This happened multiple times during the 'think-aloud' session, which seemed easy for the user to use. Persistence: High Weights: These ratings are based off the fact the occurrence of this happens quite often, and the user has a complemented experience. Trade-offs: Trade-offs for this would include not having to put the information in a menu bar, but can display it visually, which helps in giving the user an idea on distance and location of other users that meet specific qualities, based off of filtered parameters.
Relationships: U-01
Cognitive Walkthroughs Summary The idea of cognitive walkthrough is that an expert will navigate through the applications performing the most common user tasks to uncover usability problems. With our application PetPal, the most common tasks were 1) Finding a pet sitter for their pet 2) Creating a pet sitter profile for pet sitting. Each task was divided into atomic actions and each action was analyzed using 2 questions suggested by Spencer et al. After finishing the walkthrough of 2 tasks a few usability problems were discovered.
1. The screen after selecting “Create pet owner profile” asks what kind of pet are you looking to watch. The heading should read what kind of pet do you have instead of the current heading. The current heading makes sense only when creating pet sitter profile. 2. The affordances on the map that shows matches is not clear. The map markers are clickable and direct the user to pet/pet sitter profile. Their clickability is not clear from the design. 3. To send the pet owner a request for pet sitting the user must visit pet owner's profile. The option to send a request is not available on the pet details screen. 4. The user must perform 10-11 actions to complete a task/goal when using the application for the first time. The application does not provide any indicator regarding the progress of the task being performed. Any feature that will indicate the progress to the user will be a good to have feature for novice users. The following Cognitive walkthroughs were created for this application: CWR Number: CWR01 Product Name:
PetPal A pet sitter aggregator Task Name:
Finding a pet sitter for your cat Date and Time of Study:
10/19/2016 7.00 pm to 7.30 pm Experimenters’ Names:
Pratik Nalawade
Task Description: I am a cat owner and I am looking for a pet sitter near my home. I want the pet sitter to be background checked.
Task Action Sequence: 1. User: Log into the app System: Landing page is shown 2. User: Create my pet’s profile System: What kind of pet you are looking to watch?
3. User: Select cat as an option System: Tell us about your pet 4. User: Enter pet details and add a photo System: Displays the photo as thumbnail 5. User: Save the details and look for a match System: All the pet sitter matches are shown on map 6. User: Select filter System: Filter options are shown 7. User: Select background checked and other details and hit apply System: Updated list of pet sitter matches shown on map 8. User: Select the nearest best match for pet sitter System: Pet sitter profile is shown 9. User: Make reservations for the required date and time System: Reservations screen with options to select date and time 10.User: Continue with payment System: Reservation confirmed message
Interface/tool/system description: The interface is designed for standard smartphone screen. The application prototype includes the following artifacts: - Back button - Save button - Application logo - Apply and filter buttons - Map screen - Radio buttons for options
Walkthrough: 1. User: Log into the app System: Landing page is shown CW Question
Will the user know what to do at this step?
Issue?
Notes
Yes, application starts with sign up / log in
page and all options are clearly indicated If the user does the right thing, will they know that they did the right thing and that they are making progress towards their goal?
The applications display the main page and asks user to create a pet owner/pet sitter application
2. User: Create my pet’s profile System: What kind of pet you are looking to watch? CW Question
Will the user know what to do at this step?
Issue?
X
If the user does the right thing, will they know that they did the right thing and that they are making progress towards their goal?
Notes
No, the question is misleading as the user wants a pet sitter Yes, on selecting a pet the right page is displayed
3. User: Select cat as an option System: Tell us about your pet CW Question
Issue?
Will the user know what to do at this step? If the user does the right thing, will they know that they did the right thing and that they are making progress towards their goal? 4. User: Enter pet details and add a photo System: Displays the photo as thumbnail
Notes
Yes
Yes, the system proceeds to ask details of their pet
CW Question
Issue?
Notes
Will the user know what to do at this step?
Yes
If the user does the right thing, will they know that they did the right thing and that they are making progress towards their goal?
Yes, on uploading the photo it is displayed as a thumbnail
5. User: Save the details and look for a match Phone: All the pet sitter matches are shown on map CW Question
Issue?
Notes
Will the user know what to do at this step?
Yes, the button has a clear call for action
If the user does the right thing, will they know that they did the right thing and that they are making progress towards their goal?
Yes, user is immediately navigated to map with matches
6. User: Select filter System: Filter options are shown CW Question
Issue?
Notes
Will the user know what to do at this step?
Yes, the option is clearly visible
If the user does the right thing, will they know that they did the right thing and that they are making progress towards their goal?
The feedback is immediate and filter screen is shown to user
7. User: Select background checked and other details and hit apply System: Updated list of pet sitter matches shown on map CW Question
Issue?
Notes
Will the user know what to do at this step?
Yes
If the user does the right thing, will they know that they did the right thing and that they are making progress towards their goal?
Yes, the map is updated with new matches and new match values
8. User: Select the nearest best match for pet sitter System: Pet sitter profile is shown CW Question
Will the user know what to do at this step?
Issue?
X
If the user does the right thing, will they know that they did the right thing and that they are making progress towards their goal?
Notes
No, the map’s affordances are not clear Yes, user profile is displayed
9. User: Make reservations for the required date and time System: Reservations screen with options to select date and time CW Question
Issue?
Notes
Will the user know what to do at this step?
Yes, both buttons have clear description of the action
If the user does the right thing, will they know that
Yes, all on entering the data the data is
they did the right thing and that they are making progress towards their goal?
displayed on the screen
10. User: Continue with payment System: Reservation confirmed message CW Question
Issue?
Notes
Will the user know what to do at this step?
Yes, the button is clearly visible with the description of the action
If the user does the right thing, will they know that they did the right thing and that they are making progress towards their goal?
Yes, a confirmation message is displayed once the user proceeds with payment
General note​: There is no way by which the user can understand his progress towards his goal, since there are multiple steps it would be better to indicate how much progress the user has made.
CWR Number: CWR02 Product Name:
PetPal A pet sitter aggregator Task Name:
Creating a pet sitter profile and sending a request Date and Time of Study:
10/19/2016 7.30 pm to 8.00 pm
Experimenters’ Names:
Pratik Nalawade
Task Description: I am interested in pet sitting dogs. I only pet sit for small adult dogs.
Task Action Sequence: 1. User: Log into the app System: Landing page is shown 2. User: Create a pet sitter profile System: What kind of pet you are looking to watch? 3. User: Select dog as an option System: Tell us about your pet 4. User: Enter details about type of pets you are willing to watch System: Shows all the available options 5. User: Save the details and look for a match System: All the pet owner matches are shown on map 6. User: Select filter System: Filter options are shown 7. User: Select filter for best matches for small adult dogs System: Updated list of pet sitter matches shown on map 8. User: Select the nearest best match for pet owner System: Pet profile is shown 9. User: Click on owner profile System: Owner profile is displayed 10. User: Send request for pet sitting System: Reservation confirmed message
Interface/tool/system description: The interface is designed for standard smartphone screen. The application prototype includes the following artifacts: - Back button
- - - - -
Save
button Application logo Apply and filter buttons Map screen Radio buttons for options
Walkthrough: 1. User: Log into the app System: Landing page is shown CW Question
Issue?
Notes
Will the user know what to do at this step?
Yes
If the user does the right thing, will they know that they did the right thing and that they are making progress towards their goal?
Yes, the system proceeds to ask details of the kind pet user is looking to watch
2. User: Create a pet sitter profile System: What kind of pet you are looking to watch? CW Question
Issue?
Notes
Will the user know what to do at this step?
Yes
If the user does the right thing, will they know that they did the right thing and that they are making progress towards their goal?
Yes, new page is loaded once option is selected and saved
3. User: Select dog as an option System: Tell us about the pet CW Question
Issue?
Notes
Will the user know what to do at this step?
Yes
If the user does the right thing, will they know that they did the right thing and that they are making progress towards their goal?
Yes, the system proceeds to ask details of the pet
4. User: Enter details about type of pets you are willing to watch System: Shows all the available options CW Question
Issue?
Notes
Will the user know what to do at this step?
Yes
If the user does the right thing, will they know that they did the right thing and that they are making progress towards their goal?
Yes, the system will proceed to map on clicking submit
5. User: Save the details and look for a match System: All the pet owner matches are shown on map CW Question
Will the user know what to do at this step?
If the user does the right thing, will they know that they did the right thing and that they are making progress towards their goal? 6. User: Select filter System: Filter options are shown
Issue?
X
Notes
No, the map’s affordances are not clear Yes, the system proceeds to ask details of their pet
CW Question
Issue?
Notes
Will the user know what to do at this step?
Yes
If the user does the right thing, will they know that they did the right thing and that they are making progress towards their goal?
Yes, the filter screen lists out options that can be applied
7. User: Select filter for best matches for small adult dogs System: Updated list of pet sitter matches shown on map CW Question
Issue?
Notes
Will the user know what to do at this step? If the user does the right thing, will they know that they did the right thing and that they are making progress towards their goal?
Yes, the map is updated with values from filter
8.​ ​User: Select the nearest best match for pet owner System: Pet profile is shown CW Question
Issue?
Notes
Will the user know what to do at this step? If the user does the right thing, will they know that they did the right thing and that they are making progress towards their goal?
Yes, pet profile is displayed on clicking on the best match
9. User: Click on owner profile System: Owner profile is displayed CW Question
Issue?
Notes
Will the user know what to do at this step?
Yes, the option is clearly visible on the screen
If the user does the right thing, will they know that they did the right thing and that they are making progress towards their goal?
Yes, the page displays the owner details
10. User: Send request for pet sitting System: Reservation confirmed message CW Question
Will the user know what to do at this step?
If the user does the right thing, will they know that they did the right thing and that they are making progress towards their goal?
Issue?
X
Notes
To send a request the user must visit pet owner profile, it is not accessible from the pet detail page Yes, confirmation message is displayed
Next Steps The key problems we identified based on all these evaluations are: 1). confusing/misleading labelings, 2). lack of in-app communication tools, 3). lack of navigating pages in the prototype to allow the user to experience the fully function of the app. If we had more time to work on this project, we would create more navigation pages for the prototype to insure that users would be able to explore the full function of our app. Each time he or she clicks on a button or an arrow, then he or she would be able to see the designated page and would be able to return to the previous page as wished. Furthermore, we would change all the confusing/misleading labelings in response to user's’ feedback, to make sure our labelings can be easily understood and used by most users. In addition, we would create a functioning in-app communication tool, by studying all the in-app communication tools in the market. Examples can be the Facebook messenger, whatsapp, groupme, etc. We will also invite users to help us test the function of the in-app communication tool. What we would not change are all the navigation pages we already have in our prototype, more specifically, the filters and contents we created for the app. We believe by creating additional navigation pages and fixing the confusing/misleading labelings, then it would allow the app to be fully functioning. And adding an in-app communication tool does not require the existing design to be changed. We believe that we are ready to iterate the design without conducting any additional evaluations, because most of the evaluations came back with positive feedback, and most parts of the design are functioning as we expected. It would be better to plan more evaluations after all the changes are made, so we would be able to see what problems are not fixed by iterating the design based on the feedback we got so far.
Reflection The problems surfaced from the first think-aloud evaluation are ‘lack of in-app communication tool’ and ‘confusing/misleading labelings’. The second think-aloud evaluation came back with very positive feedback. The problems surfaced from the self-evaluations are ‘all percentages on the map are represented with the same color’, ‘progress indicator is not present’, ‘too many options present in the system’. All the problems surfaced are different. We believe the reason for receiving all different feedback is that ux/ui experts and general users are thinking in a different way and have different expectations. Experts might have stronger opinions about the design, affected by his/her own design experience. And self-evaluation can be more strict, because when looking at his/her own design the designer tends to correct all imperfections and want to make sure all functions are doing well. We think all the evaluations are very helpful for our next steps. Self-evaluation and outsider-evaluation are equally important. Real user feedback can help us find the blind spot that us as designers could not see so easily, and self feedback is always useful for design thinking and design learning.
Appendix Data Collection and Problem Framing Report Design Exploration Report