About the BFF app
Best Furry Friend is a mobile app for pet adoption via pets put up for adoption by private owners, NGO’s and pet shelters. The app is designed for adults that need to find a pet to adopt and need some guidance finding the right pet for them.
I was the UX/UI designer for this project. I wrote and executed this assignment as part of my User Experience Immersion course at Careerfoundry, where Paddy Donnelly and Wojciech Hupert where overlooking the project.
An adult person (or household) needs to find a pet to adopt and needs guidance finding the right pet, because they want to give a pet a second chance at a loving forever home and find a positive addition to their household.
We believe that by creating an app that let’s users search the database with filters, users will have an efficient and pleasant search for a pet.
We believe that posing these filters in het form of guided questions we will help users determine what they are looking for in a pet.
We believe that allowing user to set up an appointment to meet the potential pet they wish to adopt, will lead to adoption later and will increase the amount of animals being adopted.
The core features of the app
Feature 1: Search with filters
The app offers a filter questionaire with 10 questions regarding your pet search. These can be saved and notifications for pet matches can be enabled.
Feature 2: Plan a meet up
The app offers a build in calender function with which the user can request a meet up upon finding a pet they like.
Surveys & Interviews
I set up a Google Form survey, 20 participants filled it out. After that I met up with 3 particitpants for user interviews. The goal was to better understand user behaviour around pet adoption and to determine which tasks users would like to be able to complete using the BFF app.
The data from the surveys was reviewed and let to insights that were also taken into account when doing the user interviews. The data from the user interviews was processed, affinity maps were made and insights were noted.
The main takeaways from the survey & interviews were:
Survey outcome visual
User interview data organised with affinity maps
Based on the user interviews and surveys, 2 persona's were created. Jack (descriptor: browser) and Dani (descriptor: adopter). They formed the basis for setting up the user journeys, task analysis and user flows.
User journey and mental model for Dani
User journey and mental model for Jack
For the 2 key features task analysis was set up, based on those, user flows were created to establish what screens and options should be included in the app. Below you see the userflow for Feature 2: Plan a meet up.
For the 2 key features user flows were created to establish what screens and options should be included in the app. Above is the userflow for Feature 2.
Based on the userflows initial low fidelity wireframes and prototyping were sketched. I started with the screens needed to complete a userflow.
After completing the userflow wireframes I set up a sitemap for the entire app.
Evolution of the filters
The filters were a feature that changed over time quite a bit. In the early stages the guide and the filters were seperated features. During the process the decision was made to integrate the questions in het filters for a better UX. This decision was based on usability testing and mentor feedback. During usability testing it became clear that the link between the separate guide and filters was not clear to the users. Therefore this integrated feature was the way to move forward. Not only did it save navigating around in the app, it also was clear immediately to the users that the filters were guiding them to the right pet match.
Sketched wireframing of filters and guide
High fidelity wireframing of filters and guide
First design drafts for usability testing and mentor review
Second and third designs for guide integrated in filters, based on usability testing, mentor- and peer feedback
After writing a usabilty test plan and the usabilty test script including 8 scenario tasks, I set out to interview 6 participants. The main goal of user testing was to uncover usability issues with the high fidelity prototype.
Based on these tests some recommendations for iterations included:
Usability test script including scenario tasks
With the design I conducted a couple of quick preference tests with UsabilityHub. These short and detail related test are great feedback for making decision that best fit the user's preference. With the test below I wanted to find out if users prefer full fields or lines for filling in log in information. The 2 screens were shown with the question:
Which design do you prefer?
The outcome led to the design choice to make all form fields, fully coloured fields.
A. 81% - 13 participants
B. 19% - 3 participants
To design a cohesive visual experience a UI kit was made which contains the design elements that compose the app. This app uses 3 colours for a strong and familiar branding. UI components like buttons, form fields and back arrows have to be the same throughout the app. To ensure all these items are designed consistenly they are all gathered in the UI kit.
All screens from the sitemap were visually designed based on the UI kit. This process is not perse linear as presented here, iterations based on feedback from peers and mentor are made throughout the visual design process. So the UI kit was updated accordingly.
Below you can see a walkthrough taking you through part of the app so get a sense of the experience. Enjoy!
Designing for users
Often in my profession as a visual designer, I have to think for the user and fill in what they would want, need & like. With this course assignment I got to actually orientate, research, test and iterate based on response from real users and participants. The most important thing is after all that people actually use, need and enjoy the product you make.
It is very easy and tempting to think for potential users. For instance I thought that users would like to share a pet they like with their friends, during interviews it turned out, they did not want to all. So reseach and validate, it's the only way to truy design for the user.
Best Furry Friend
This project is part of the User Experience Immersion course by Careerfoundry. Over a period of months I worked on this project, and learned about all the steps of the UX proces.
Food CabinetEditorial design
Montessorischool De Wijde WereldBranding
Union for Ethical BiotradeBranding
Food CabinetUI Design
World Food Day 2019Branding / Event
Maksiem for H&MGraduation project
Food in MotionBranding
Borre leesclubEditorial design
World Food DayBranding / Event
De Restaurant Alliantie ‘s-HertogenboschBook design
Songport & SongflowBranding
Nederlandse aardappel organisatie Branding
Jeroen Bosch KinderziekenhuisUI Design
Bouwkunst academie RotterdamEditiorial design
A Birhday Poster, Friede!Branding
Hogeschool RotterdamEditorial design
Stedelijk Gymnasium HaarlemBranding
Photography series, Barbie!Self initiated project