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.
My role
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.
Problem Statement
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.
Hypothesis
We believe that by creating an app that lets 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 users 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 questionnaire 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 calendar 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 participants 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
Persona's
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
User flows
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 user flow for Feature 2: Plan a meet up.
Userflows
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.
Wireframes
Based on the user flows initial low fidelity wireframes and prototyping were sketched. I started with the screens needed to complete a user flow.
Sitemap
After completing the user flow wireframes I set up a sitemap for the entire app.
Evolution of the filters
The filters were a feature that changed quite a bit over time. In the early stages the guide and the filters were separated features. During the process the decision was made to integrate the questions in the 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
Usability tests
After writing a usability test plan and the usability 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
Preference tests
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 boxed fields or lined fields 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, boxed fields.
A. 81% - 13 participants
B. 19% - 3 participants
UI Kit
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 consistent they are all gathered in the UI kit.
UI design
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.
Walkthrough
Below you can see a walkthrough taking you through part of the app so get a sense of the experience. Enjoy!
Learnings
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.
Avoiding assumptions
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 research and validate, it's the only way to truly design for the user.
What went well
> With my app idea and goals in mind I set up a survey with 15 questions that really helped me shape the content of my app.
> I quickly and smoothly transferred my paper low fidelity wireframes to digital mid/high fidelity wireframes based on grids, which set a very good base for the next steps.
> Throughout the project I had an ongoing inspiration board for the visual design, I also experimented along the way, which then naturally came to the visual end design while working on the project.
What did not go well
> My persona’s took quite some time to create, and turned out to be too elaborate and descriptive. I iterated them by making in a second version, which was much more to the point and visually colour coded.
> The user flows I initially created were too elaborate, I tried to show all the (app) options along the way, instead of only the flow.
Best Furry Friend
This project is part of the User Experience Immersion course by Careerfoundry. Over a period of 6 months I worked on this project, and learned about all the steps of the UX proces.
More projects
Fit InUX / UI design
Montessorischool De Wijde WereldBranding
Windstreken stalPackaging
Food CabinetEditorial design
Union for Ethical BiotradeBranding
Food CabinetUI Design
World Food Day 2019Branding / Event
Uncover SkincareBranding
De ZoutfabriekBranding
Maksiem for H&MGraduation project
Food in MotionBranding
Borre leesclubEditorial design
BionextBranding
World Food DayBranding / Event
Songport & SongflowBranding
Nederlandse aardappel organisatie Branding
Bouwkunst academie RotterdamEditiorial design
A Birhday Poster, Friede!Branding
Hogeschool RotterdamEditorial design
AEGIR-MarineBranding
Stedelijk Gymnasium HaarlemBranding
CellsIllustration
Photography series, Barbie!Self initiated project
AEGIR-MarineBook design
HelveticaPoster design