Concept: Pawnder

Pawnder is a ridiculous app concept and creative exercise. I wanted to spend some quality time with Figma while adding interest (my own included) through levity. One way to practice good design is to recreate the designs of successful apps and services, which plays into the idea that “copying is the highest form of flattery.”

Rather than a performing a pixel-by-pixel recreation of Tinder, I used this opportunity to answer the age old question: "What if dogs had smartphones?" I suppose they would have to have opposable thumbs, too, but there's only so much one can solve with with the current constraints of modern hardware and software.

I’d originally considered creating a concept from scratch, but rerouted that idea to emulate Tinder adapted for dogs instead. I locked in on the name “Pawnder” when I decided to recreate the Tinder logo using Affinity Designer. The simplest shape associated with dogs is a paw. Playing with the concept, I realized the paw pad is loosely the shape of a heart if rotated to appear heading down. I didn’t end up using the logo in the recreation of the 3 screens, but it was a quick, fun primer for lacing this project with humor.

To begin the UI design, I researched the most common (and iconic) screenshots for Tinder. The screens I chose to reproduce are:

1. Profile

2. It’s a Match!

3. Top Picks

A simple Google image search yielded thousands of screenshot images. I pasted screenshots for the 3 pages into Figma and started drawing over them.

The profile page provided an opportunity to have fun with creative written content. I used my girlfriend’s bulldog, Frida, as the owner of this Pawnder account. The standard Tinder accounts show a nice casual first name followed by age. Frida is 9, but to compel her potential matches to pawnder (sorry, couldn’t help it) her maturity I added the equivalent dog years.

Tinder profiles generally follow name/age with an occupation and another line for proximity in miles. Again, adapting for the canine perspective, I used Cushion Flattener @ The Living Room as Frida’s occupation, and measured her proximity in city blocks. The following is the profile bio:

English bulldog (is there another kind?) based in Milwaukee. Down for anything when followed by a T-R-E-A-T. Swipes right for: peanutbutter, open dishwashers, any human leg. Swipes left for: any other dog. Just make eye contact... I’ll gladly muss your cushions.

During the exercise I discovered that the typeface for “It’s a Match!” is the font Hipster Script Pro. My perfectionism was not enough to drive me to part ways with $80 for a learning exercise, so I settled for a free font, Lobster, available on FontSquirrel.

The Top Picks screen also lent itself to some creativity punctuated with a chuckle. In this particular case, Frida isn’t all that enamored with other dogs. There are, however, a number of simple pleasures that Frida would swipe right for, such as a plate to lick, a set of human legs to… do things, kongs and chew toys, and of course she is willing to settle on any cushioned surface available (she tends to favor the ones where she knows humans want to sit).

This exercise is not a true pixel-by-pixel recreation as I did not have access to all elements used in the original UI. Discovering this in the process allowed me to let off some of the pressure of the fine details and focus more on creative input (for my own amusement) and the general user experience flow for a massive industry hit.

Tools used for this project:

• Figma

• Affinity Designer (logo design)

• Affinity Photo (photo editing)