Case Study Flyttsmart
CASE STUDY FOR A PET ADOPTION APP
Flyttsmart has asked me, as a first step in the recruitment process for a product designer position, to make a low-fidelity overview including sketches, wireframes, sitemaps, concept models, etc, and a high-fidelity mockup for one screen, widget, or interaction of three possible design exercises.
I decided to work on the design of a pet adoption app.
This is the main prompt:
Millions of animals are currently in shelters and foster homes awaiting adoption. Design an experience that will help connect people looking for a new pet with the right companion for them. Help an adopter find a pet that matches their lifestyle, considering factors like breed, gender, age, and health status.
OVERVIEW OF THE PROBLEMS AND POSSIBLE TARGET AUDIENCE
This app focuses on solving two main problems: connecting shelters to adopters and helping adopters choose the best pet.
The main user of this app is curious, tech-savvy, and quite busy.
Since I had a week to complete the assignment, I constrained the user research and the detailing of the functions.
I simplified as well the process for the look and feel of the app, keeping it to a single choice and not to multiple choices.
What I believe shall be the focus of the app is the filter feature that has to provide a really tailored experience to the user. The app is conceived with the adopter in mind, the shelters have a more “behind the scenes” role, nevertheless they need to have easy access to the features dedicated to them because their active presence is the backbone of the app.
BASIC PROBLEMS TO SOLVE:
- The focus point of the app shall be the filtering feature but users don’t want to lose time in putting a lot of data into it and then finding out that there are no pets matching their criteria.
- User: “I don’t want to get bored filling a user profile with lots of requests, I want to see the pets.”
- There are many pet adopting apps on the market, it is important to find a unique value proposition that positions our app on a different level from the competitors.
Competitor Research
Researching the market looking for competitor apps, I found out that there are many.
I narrowed down the choice to the best-rated, the most downloaded, and the ones created for the Android platform (since I don’t have an iPhone 😅).
Noticeable considerations:
- PET ADOPTER: is one of the most downloaded and best rated apps. This app does not put the adopter in contact with shelters, it only connects peer to peer. The target niche is mostly breeders. Interesting for the swipe, Tinder-like feature, and for the geolocation. It has interesting questions for the screen profile like if the adopter is willing to take care of a pet with special needs or if is willing to pay the adoption fee, etc.
The interesting point for our research is that it does not take into consideration shelters. - PETFINDER ADOPTABLE PETS: this app is really well designed, it is created by Purina, and is a real social media, not only with a mobile version but with a desktop version as well.
On this app, you have the opportunity to adopt every kind of animal (horses, reptiles, birds, other than dogs and cats).
This app has a very interesting filter system to find the ideal pet, it has a quiz to match an adopter with a pet; an adopter can see matches based on compatibility, has a favorite section and preference tags.
This app has even a database of the different breeds with information on each one.
Some of the downsides seem to be that many animals remain on the platform a long time after being adopted. This could be solved by sending to the shelters an email sequence that, if not answered, can bring to erase the pet profile.
Another downside is that it has no geolocalization and the searches could be better sorted out. - ADOPT ME APP: this app is focused on shelters, it gives less importance to the adopters. A volunteer from a shelter can create a post for a pet and then the post is published on traditional social media. The adopter can see the post on social media and contact the shelter.
Our app has different kind of features. - PETS ADOPTION: This app gives you the possibility to adopt a dog, a cat or create a post for a pet’s adoption.
Opens with a screen of adoptable pets near the user’s location.
Has a filter and a map option.
Has a favorite section. Has a nice pet profile screen with clear buttons to contact the shelter through mail or phone and to adopt the pet.
The downside of this app is that the filter criteria are not so well developed and that is not clear how to add a shelter profile. - APPETS: Has a lot of functions, a user can adopt a pet, find a lost pet, and connects pet owners to external services. I believe that this can be also the downside of the app: too many different functions can confuse the user.
CONCLUSIONS
Many apps available now on the market have been designed with the social media as an inspiration, but in my opinion, they lose the focus on the main effective goal (adoption).
For this assignment, my initial idea was to create an app with a gamification system for the user, to define choices and sort out preferences, but after a short user research, I decided to put the focus of the app on a top-notch selection filter.
To do so, I took inspiration from the selection filters created for real estate trading platforms, for example, Hemnet. The reasons for this decision are detailed in the final conclusion and takeaways of this case history but can be summarized saying that adopting a pet is a very important decision that can be in a way compared to buying a home.
DESCRIPTION OF THE APP:
PETADOPT is an app focused on helping adopters find pets in shelters and foster homes. Through a powerful filtering system, the user will be able to find the best companion.
After the Competitor research, I brain-dumped all the possible features I wanted to include in the app. To do so I used Miro. On the image on the left, you can see how the brainstorming looked like after a couple of refining sessions, while on the right I have listed the final main features I decided to include.
APP FUNCTIONS
- Research filter that allows the user to define the best pet to adopt
- Map with geolocation to browse available pets near the user
- Profile creation for future usage
- Direct contact with the shelter
- A dedicated space in the app if you are a shelter.
PERSONAS:
Considering all the information gathered, plus having done another research interviewing a small group of people, I have developed two kinds of users. I have created two Infographics that sum up the data using Flowmapp.
To define the personas I focused on their relationship with the pets and on their social interactions. The personas have been modeled after some real persons that I interviewed.
THE CONTENT MAP
After a series of low-fidelity sketches to organize the ideas, I created a more refined content map with Miro.
The content map sums up all the functions, still, it does not include the interactions that the user will perform on the app. It only has a first approach of hierarchy.
THE FLOWCHART
Now that all the content of the app is present and defined, I can think about the interactions that the user will perform in the app.
I prefer to keep content mapping and flowchart in two different sections to have a better outlook of the different features of the app and also because in this way I can see where some elements are missing or need to be changed.
For the flowchart, I used again Flowmapp, which I consider to be very user-friendly for this task. I added icons to the screens to keep them separated from the interactions, that have a color code and a different shape.
Of course, the interactions could have been many more, but due to the time constrain of the assignment I defined only the primary.
SKETCHES AND WIREFRAMES
Before creating some more polished wireframes, I like to create some sketches of the screens, in this way I don’t risk forgetting some features and I can have a general view of the experience. I use them for both, testing and brainstorming, although, with the previous work that I have done (brainstorming, content mapping, flowcharting) my ideas are already quite clear, so I don’t need to do many versions of them.
As stated before, due to the time-constrained assignment, I have focused on the most important screen functions.
The wireframes are created in Adobe XD, I love working with it because of the seamless interaction with all the other apps of the Creative Suite and the possibility to share the libraries.
Up here you can see some interactive wireframes. You can select the main menu and click on the adopter profile creation screen. You can click on the map icon and visualize the map. On the map you can click on the pinned places and open a pet profile. You can select the favorites page by clicking on the star at the bottom of the screen. Each interaction finishes back to the splash screen since it is only for demo purposes.
Down here you have the wireframes of the following screens:
- the first screen you see after the splash page, with the last pets added
- the map screen
- the pet profile
- the filter selection screen
THE LOOK AND FEEL
Before entering the final part of the assignment, the high-fidelity mockup, it is necessary to define the look and feel that the app is going to have.
For this reason, I created a branding board, that includes a color palette, some reference images, some references for the icons and the logo, and the fonts that will be used in the app. To define the single elements the first step was a Pinterest research. I created a board with a very wide selection and then refined it.
The choice went on designing a light and funny app, something that reminds us of the joyful attitude of the pets. The season that inspired me was spring, I have chosen fresh and happy colors. Icons and symbols are flat, to give a polished look.
The fonts are Cheri Liney for the logo and Futura for the app text. Futura is a clean sans serif, very readable and modern. Cheri Liney is funny and cartoonish, I wanted to give the logo a young and light mood.
On an actual commission, I would have offered three different versions for the look and feel, but since the assignment is focused on the processes more than on the actual results, I believe that one solution is able to explain it.
THE HIGH FIDELITY MOCKUP
After all these processes, the following step is to produce some high-fidelity mockups to give an idea of how the final version of the app could look like.
I have rendered the basic interaction of opening a pet profile after having selected it from the list that appears after clicking on the logo on the splash screen.
The example I have used is the cat “Socks”.
As for the wireframe prototype, you have a first screen with the interaction and two other single screens.
CONCLUSIONS AND TAKEAWAYS
I had loads of fun doing this exercise and would gladly have had more time to further develop features and interactions.
The people I interviewed that recently adopted a dog would have loved to have an app of this kind available for Stockholm since most of them believe that portals like Blocket and similar are too scammy to adopt a pet.
Working on the features and the interactions the main lesson I learned is that adopting a pet is a very important step that changes habits and lifestyle. For this reason, it is a decision that needs to be taken after careful consideration of many many aspects.
This is why I decided to put the main focus on the filtering system more than a gamification system and also why I wanted to add a save research feature and starred feature (because before I adopt a pet, especially if I am a member of a family, I want to discuss this decision with the other members, and a starred section can help me in doing this).
I have worked on the project 13 hours and 18 minutes, you can see a screenshot from my Toggl board here underneath.
