PetPals
Overview
I co-developed the PetPals concept with a group for a graduate school project.
Pet Pals is a smart pet product that allows users to experience pet ownership without real-life hassle and commitment.
For our product, we created a “smart pet” concept that uses two channels:
The first channel is a mobile app that allows users to customize and interact with their pets. Users can take their pets out for a walk, check their health, shop for their pet's needs, and interact with friends through the app's messaging system (Petbook).
The second channel is the PetPal itself. The physical pet would have an interface that displays its real-time mood/emotions and also displays alerts/notifications such as messages from other users.
Design Goals
The primary goal was to create a realistic experience, where users feel like they are really caring for a pet.
Although many factors come into play for real-life pet care, we focused on key interactions for our prototype.
We also wanted users to feel like their pet was unique. PetPals users can customize their pet's physical attributes including eye color, shell color, and personality.
Brainstorming Exercise
To start brainstorming features, we did a Crazy Eights brainstorming exercise. Using Figjam, each team member sketched eight ideas in eight minutes. This method emphasizes quick idea generation before refining the details.
Afterward, we discussed the ideas from each person’s sketches and came to a consensus. We decided to include the following key features:
Ability to choose the pet’s personality traits
Tab design for the pet’s inventory (separate tabs for treats, toys, accessories, etc.)
A friends list to connect with other pets
Capability to take the pet on virtual walks
Indicators for the pet’s needs
Surprise presents from your pet
Moodboard
Next, the group focused on creating a moodboard. Each member made their own moodboard; then we came together and discussed as a group.
We took what we liked as a group and made an overall moodboard. This was to see a broad scope of ideas before committing to anything early on.
The overall moodboard captured inspiration for the overall concept, visual design, and specific features. It included images from previous virtual pet concepts, including Tamagotchi and Nintendogs.
Design inspiration for personality traits and an inventory system was drawn from The Sims, Animal Crossing, and other independent games.
Persona and Scenario #1 - Meet Skylar
Skylar is excited to create her PetPal and connect with friends’ pets. She downloads the PetPals app, signs up, and taps the “Create” button. On the app, Skylar chooses the type of pet she wants, her pet’s name, features, and personality traits. Skylar can choose to directly add friends’ pets to a “friends” list, so she can easily find them later.
Once Skylar customizes her PetPal, she chooses the “walk” option from the main menu. The screen shows a neighborhood, with an animation of her pet walking on the sidewalk. The walk turns out to be very strenuous for her pet, and it becomes thirsty. Skylar now has to interact with her pet and give it water through its display interface.
In the neighborhood, Skylar can see other users’ pets and have her own pet interact with them. Skylar can also add other pets to her “friends” list after meeting them on a walk.
Persona and Scenario #2 - Meet Leroy
Leroy has a busy day of teaching ahead of him with few breaks. While at work he finds a few extra minutes between classes to check up on his pet. He logs into the PetPals app to see how his pet is doing. He sees that his pet feels somewhat hungry. Using the app, he directs his pet toward a virtual food bowl. Leroy can see his pet eating on screen, and he can see his pet’s hunger score improve.
When Leroy gets home, he interacts with his PetPal using the display interface. From the interface menu, he chooses to teach his pet a new trick. Afterward, he sees his PetPal smile on the display interface indicating it is happy and healthy. On the app, Leroy can also see that his PetPal’s fun and social scores have increased.
Mid-Fi Prototype
Check out our mid-fi prototype!
We created a mid-fidelity (mid-fi) prototype for user testing. The mid-fi version included placeholder visuals an1d interactive components. We included both the app and the physical pet’s display interface. Since Pet Pals is a multi-channel product, the user needs to see both displays for the full experience.
Our prototype includes several interactions to facilitate user testing. We used our personas and scenarios to determine which interactions would be most relevant for our typical users, and therefore, which interactions to include in our mid-fi prototype.
Usability Testing
Once we developed our mid-fi prototype, our team began user testing by conducting research study interviews with testing participants. Our main goal for usability testing was to test the functionality of our app and physical PetPal interface in its current mid-fi state. The results helped our team evaluate the current design and guided discussions about creating the high-fidelity (hi-fi) prototype.
Referring back to our target audience, the participants we chose were women and men between the ages of 18-29, as we found these are the target groups for apps similar to ours. Our ideal users were also good with technology, like gadgets, and appreciate products that evoke 1990s nostalgia. Due to limited resources for usability testing, participants were people we personally knew who fit our target demographic.
We created a test plan and a facilitator script to ensure each testing session was the same. That way, the results from each team member's tests could be evaluated equally.
Below are the key findings from the usability test that I conducted:
On the “Choose Your Pet” screen, the user initially tried to edit the pet’s name by clicking “Pet Name” at the top of the screen. Since naming is not part of the testing protocol, we did not build out the pet name editing function.
The participant thought that changing the pet on the app would also change the physical PetPal. For example, if the user selected a big red cat in the app, he would expect to see the image on the right turn into a big red cat.
The participant hesitated for a moment after choosing the animal’s type, color, and size. He mentioned the personality traits that were in the test prompt, so he may have expected the personality sliders to be on the “Choose Your Pet” page, instead of on a different page. However, he did not explicitly state this.
Once the participant reached the map screen, he tried to click and drag to create a walking path. The Axure prototype only allows users to click on the map and then see a predetermined route.
When the participant clicked on New Friend 1, he initially tried to select “Speak” from the popup menu. The participant did not explicitly state this, but since the task required the user to chat with the new friend, the participant may have thought that “Speak” meant sending messages (as opposed to sending them through the PetBook chat function).
Analysis of Usability Testing Results
After discussing the results of our usability testing, we came up with five critical issues that at least two participants encountered. For each issue, we recommended solutions that could either be implemented in our hi-fi prototype or would inform future usability testing.
Issue #1
Two participants were confused and thought the pet customization sliders would change the physical PetPal’s appearance, instead of changing the virtual avatar within the app.
For the hi-fi prototype, we removed the options that resemble a live pet (type of animal, size, etc) and make them more applicable to the virtual avatar in the app. This will help meet the user’s expectations more, as to where the customizations will appear. We also moved the app screen and the physical PetPal further apart in Axure and added labels to clearly indicate that these are two separate interfaces.
Issue #2
A few participants spent a good amount of time trying to use features that weren’t implemented yet on the prototypes. One user went to edit the “Pet Name” field on the first pet customization page, as there was an edit icon. Additionally, a second participant saw the “Randomize” button on the PepPals customization screen and tried to click it. These features were not necessary to complete the tasks we gave them, so it seemed clear to us (the project group) that users would not interact with them. However, user test participants do not necessarily have the same understanding, so some ended up spending a significant amount of time going down the wrong path.
If we were to do another round of user testing, our testing moderators would clarify that not everything on the prototype is interactive, so if participants find something doesn’t work, it most likely isn’t necessary to accomplish the current task or they should find a different way to complete it. For future tests, it may be helpful to clearly separate tasks for each channel and/or remind users they can interact with the PetPal device.
Issue #3
Three participants struggled with not being able to “draw a path” as indicated on the prototype for Task 2. This feature wasn’t implemented in the mid-fi prototype. Instead, we set it up to have users simply click on the map, as we couldn’t find a way for users to create their own paths in Axure. As a result, participants were only able to click on the map and have a pre-determined walking path appear.
Our solution for future testing would be to explain any prototype limitations while explaining the tasks, so participants do not think they did something wrong.
Issue #4
Two users noticed issues when interacting with the “Take Your Pet for a Walk” screen. One user wasn’t sure where the start point on the map for Task 2 was. The other user noticed that while the “energy” bar depleted, the “happiness” bar didn’t change.
In order to fix the first issue, we added a more obvious indicator to show starting point. Regarding the second issue, if we did future testing, we would have the pet’s “happiness” bar change during the course of the walk.
Issue #5
All four of our users didn’t know whether to click on the “Speak” button or the “Add Friend” button in order to chat with a new friend via messages.
To alleviate confusion, we changed the “Speak” button to “Bump Into.” We also moved the “Add Friend” button to the top of the pop-up menu once a new friend is selected, so users clearly see that option.
Hi-Fi Prototype
Check out our hi-fi prototype and style guide!
For our hi-fi prototype, we added color, images, text, and text styles to all the screens on the Pet Pals app interface as well as the physical Pet Pal interface. We came up with a color scheme that consisted of deep orange, orange-yellow, cream, teal, and navy blue. We also finalized the logo which appears on every screen of the app's interface. These changes along with the interactions made our product look close to the final version. The hi-fi version of our prototype also includes the changes we made from our user testing with the mid-fi prototype.
Lessons Learned
Our team had a quick brainstorming/sketching session before we began creating the mid-fi prototype. This helped the team get on the same page about how to develop the mobile app and PetPal prototype. Doing a brainstorming activity helped us flesh out ideas before we committed to any design elements.
During the development and iterative revision process, we realized the importance of being intentional about what is or is not shown on-screen. Some user-testing participants tried to click on elements that we did not fully flesh out. For example, on the “Choose Your Pet” page, participants tried to click on the Pet Name field and the Randomize button. Neither of those elements were necessary to complete our user test tasks, so we did not make them interactive. However, participants were confused by the presence of these buttons and their lack of interactivity.
We accounted for this when creating our hi-fi prototype; we removed some distractions. For example, we removed a menu bar icon from the app’s header, since we were not planning to make it interactive. Instead, relevant buttons appear on each page to guide the user. The home screen also includes a bottom navigation menu with more details, including icons and labels for each menu item.
We also noticed that having a style guide helped immensely when we created our hi-fi prototype. Since we only had so much time to flesh out our prototypes, we were able to efficiently create a consistent and cohesive prototype by following the style guide.