Project Tech/Designs

Hello again and welcome to the next step in my journey through CS 467. My capstone group has now finished planning and have started working on our project of developing an animal adoption dating app. It will be based off of other mobile dating apps that involve swiping (looking at you, Tinder!), except instead of swiping through people, the user will get to swipe through animals in need of forever homes at shelters! Pretty neat, right?

Technologies and Why We Chose Them

For our project, we have decided to use a combination of React Native, JavaScript, HTML, and CSS for the front-end aspect, and MySQL for the back-end. Although I do not have prior experience with React Native in particular, my group members have used it and we chose to stick with it for it’s ease in learnability and wide scope for developing mobile UI components. All of us have worked with JavaScript HTML, and CSS so that choice was unanimous. As for the back-end, using a database to keep track of all the user and animal profiles seemed to make the most sense for our project, and we all have worked with MySQL in previous courses.

Designing the UX/UI Screen Mockups

As someone interested in the UX/UI design field, I thought this project would be a good opportunity to practice designing some mobile app screens in Figma, so I took it upon myself to create some of the main screens. Due to the limited time I had to create these screens between my other work and school obligations, I thought it best not to reinvent the wheel and decided to adapt from a great Figma community file that had screens similar to the Tinder-esque app we aim to develop (https://www.figma.com/community/file/1105813760130731100).

From there, it was all about considering what screens we needed and how to make each of them as clear and user-friendly as possible.

General Look and Feel

Humans like familiarity. For people that have used swiping apps like Tinder before, there’s a general idea and/or expectation for what all other swiping apps should look like. I think the best way to appeal to this desire for familiarity is to try as closely as possible to match the design formula already established in the users’ minds. This is beneficial to users on both ends of the spectrum – those that have used swiping apps before and those that have no experience with them whatsoever. Tinder’s design is already quite intuitive, so by closely following it we can ensure that users already familiar with Tinder’s design will feel right at home, and new users won’t be overwhelmed too much in learning how to navigate our app.

I chose to stick with a similar font style in terms of typography – to similarly appeal to familiarity but also because – much like Tinder – we do want users to get the impression of friendliness and openness while using our app. Using the fonts Roboto and Montserrat, which feature ‘friendly and open curves,’ and contain ‘light and life’ (as listed in the descriptions of the fonts) fit in with this impression.

Finally, I did consider changing the color scheme to a mix of earthier tones – mainly browns and greens – as I did think they would nicely reflect themes like animals, nature, and environmental-consciousness to our users. After experimenting with these colors, however, I found that the feel of the app was lacking somewhat in the warmth I wanted conveyed in the process of adopting an animal. For that reason, I chose again to stick closely to the vibrant red and fuchsia tones of Tinder. Ultimately, these colors capture the heart and compassion that should go into adopting an animal. As cheesy as it sounds, I think that feeling of love for an animal supersedes the other possible color schemes and themes I could have went with.

Onboarding and Login/Sign Up

First, we would need an onboarding screen that would make clear the purpose of the application as well as give the user the ability to either log in or create a new account. There wasn’t much I had to adapt from the Figma community file besides the purpose and the logo of our app (which I decided a paw print would only be too fitting for).

Create New Account

I decided not to touch the mobile number input and verification screens and maintain the simple user profile details screen. This app is not mutual in terms of who is swiping (although, I must say, imagining shelter animals swiping on their potential humans is an adorable scene). Thus, we don’t need to know much about the user besides a method of contact and their age. The rest of their information can be obtained by the relevant shelter once they pursue adoption.

Shelter Employee Identification

Next we need a way to identify if the user is a shelter employee or not. If they are, they will mostly use the app as an administrator with the ability to create, edit, and delete animal profiles. Otherwise, users will be given the option to filter for the type of animal they are looking to adopt. This way, on the swipe screen, they will only be presented with profiles that match this original criteria.

Shelter Employee Home

This is the home screen shelter employees would see when using our app. It gives the user the ability to create a new animal profile or delete/edit an already created animal profile.

Initial Preferences

For users that do not identify as shelter employees, the option to filter for the type of animal they are looking to adopt will be presented. This way, on the swipe screen, the user will only see profiles that match this original criteria.

Swipe Left/Swipe Right/Filters/Favorites

These screens are all quite similar to other swiping dating apps – where users have the option to swipe left or right on the discover screen to express disinterest or interest in adopting an animal, respectively. The user also has the ability to filter and only see specific types of profiles that fit within their preferences for animal adoption. Finally, they can navigate to the Favorites screen to view all the animals they have previously favorited for adoption.

Animal Profile

This screen is what a user would see upon clicking on an animal’s profile to learn more information about them.

Final Design Thoughts

Overall, I hope the design of our app is relatively intuitive and straightforward. My desire is that users of all abilities and experiences will find it as easy to navigate, and as an experience that they deem enjoyable and return back to. Despite mostly self-teaching myself about UX/UI design, I hope some of my learnings come through in these quickly crafted screen mockups.


Posted

in

by

Tags:

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *