The general idea behind the Petluvs app is to give pet owners a social platform that gives their pets the opportunity to socialize with other local pets while bringing the pet owner community closer together. Users can set up pet playdates, share experiences with local pet services, see where other pet lovers are hanging out, and allow AKC breeders to organize events.
As with most digital products one of the main goals with the user experience was to reduce confusion so a user would never feel lost. Usually if a new user finds themselves lost at any point while using a digital product (especially in their first impressions) they will likely use the product less, or possibly stop using it all together. I reduced the confusion in the Petluvs user experience by ensuring the surface-level navigation items were always available. This way, if a user did find themselves in unfamiliar territory, there would always be a way back, or to another page that they’re familiar with. I also cut down on confusion by reusing familiar patterns found in popular digital products that are likely to be used by all users.
Since Petluvs has a unique user-base, I wanted the on boarding to be as beneficial as possible. Like most apps, I opted for a slide-based experience. The first slide gives the user an overview of the app’s functionality so that there are no surprises once the user dives in. The second slide is a vital part to this experience. There are two main user types for this app: breeders and non-breeders. This second slide allows the user to define their user type so that the app can tailor the rest of the experience to them. On this slide I also give them a chance to set up their AKC breeder profile. The third slide allows the user to set up their first pet. The user will need to have at least one pet set up in the app to take advantage of most of the functionality. However, being aware of user-falloff, it allows them to bypass this setup process so that the user can see the value of the app before investing time setting up their profile.
Apps that force their users to go through a lengthy setup process before allowing that user to see (or experience) the value that the app brings risk having users falloff due to impatience.
Giving users the option to setup their profiles/settings after jumping into the app allows for less friction later on, and allows the user’s first (real) impression of the app to be uninterrupted.
Although there aren’t too many forms within Petluvs, I wanted the forms that are in the app to be as slick and intuitive as possible so that our users spend more time with their four-legged friends instead of being frustrated by an annoying form.
Some of the necessary forms, like the playdate creation form, needed to utilize advanced fields that had several pieces of functionality within them. An example of one of these fields is the location selection field. I wanted to allow the user to search, filter, and view locations by map. However I did not want to clutter up the form and intimidate a user when they go to set up a playdate. I used an overlay approach so that when the user clicks into the field an overlay quickly flows down the screen. This ensures the functionality is available while not cluttering up the initial view.
I knew that in order for the app to be successful I needed to make efforts to not intimidate a user during these processes (such as playdate creation). What good is a social app if the users are unwilling to engage with each other because the forms and inputs are clunky?
Recently I was given the opportunity to co-lead the implementation of the UI with React Native. Since it's currently under development, I am unable to show a whole lot however I hope to add a demo here soon! Being this involved with the development is super exciting for me because I get to polish all of the styles, animations, and fine details that are often missed by development teams. It's also exciting to use such a modern framework like React Native, it's been a ton of fun to dive in to!