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.

Define

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.

Empathise

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: 

• Guidance for selecting a pet would be greatly appreciated
• Saving search settings and enabling notifications is a must, their time is valuable and this would make the app use time efficient
• Sharing a found pet listing with contacts is not welcome, they will be make the decision by themselves
• Booking an appointment or meet up would be a good feature, since meeting the pet is very important for decision making. 

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

Ideate

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.

Design

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

Validate

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: 

• The connection between the guide, user bio and my searches was unclear to the participants. They did enjoy the guide feature. In the iterations the guide was integrated in the filters, and the filters replaced my searches. 
  
• The location of the notifications was too hard to find, and it was unclear what notification was for what. In the iterations the notifications were moved to the more menu and have very clear descriptions.
• The filters did not act as the users expected, especially if a filter was selected and wether that filter was saved was unclear. In the iterations the filters got a more distinct look with feedback straight away when the filter was active, also a save button was added.
  

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

Refine

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.