czoeedelman
Swiper
The Project
A friend asked me to help her make a fake dating app for her short film. She called her film Swiper after the app she wanted to make, and have it be a nod to Swiper from Dora the Explorer. She wanted both a logo and an app. At first she just wanted pictures to swipe through, but I thought that I could take it a step up and make her a working prototype for all of her needs.
My Role
Designer
Tools
Figma
Adobe Photoshop
Team
Me - Design Lead
Research
To be straightforward, not much research went into this compared to my other projects. My friend wanted really basic functions. It was asked that the app be formatted like Tinder but with the information set up like Hinge. I researched layouts of these apps to figure out exactly what she might be looking for and noted all of their key features. I also looked at other dating apps to see what was universally successful, and what might be more unique. In this research I also studied their logos to take note of what might be best for this app. Here are a few of the notes I took:
-
A picture, name, and age are the most important pieces of information to appear on the screen first
-
Easy movements of the finger allow for longer use, though less applicable to this app's function. Keeping the popular swipe was imperative nonetheless
-
A mix of easily comprehensible words and full sentences is the best way to gather information on someone. You can skim that easily
-
No design should be too overwhelming to take away from the individual profiles
These, among other ideas I gathered, and the influence of Swiper from Dora the Explorer, informed my final design. Overall, the app was just for a short film, so making it similar to others while also giving it its own little bit of personality was the main goal. I needed to make something easy to use for filming purposes, and pretty orange.
Prototyping the Prototype
First Sketch
After I looked around at the various dating apps, I sketched up a few logos and general app layout options for my friend to pick from.
Second Logo Draft
My friend picked the logo on the bottom left, and I drafted our first logo with Adobe Photoshop.
Final Logo
After some back and forth edits, we finally came to a more rounded logo to fit the Swiper tail.
The Final Product
Most of the prototyping was done iteratively through Figma, and thus the final product can be played with below. As this was for the purposes of the film, there are only a couple of ways to interact with this product. There are four men total, and you can swipe right on the first three. After you swipe right on the first one, you can click the refresh button in the navbar to restart the prototype. For all four men you can scroll up and down on their profiles.
What I Learned
While there was not a lot of research and developmental take-aways from this project, I was still able to learn a bit about interactive layout and appealing to a client's expectations. This was also my first mobile app design, so I was able to develop my skillset there as well.
-
Keeping what is familiar will be successful
-
I tend to want to make my works (both professionally and in my art) as unique as I can. That said, when it comes to general app or website functions, if something works it works for a reason. Especially to help users understand your design, carrying over general layout and interactions will make your designs a lot easier to traverse, understand, and access your information.
-
-
Picking and choosing what is displayed
-
A mobile device is only able to present a fraction of what desktops and laptops can display. When developing a mobile app it is important not to clutter the screen too much. Everything should be simple enough to understand and press with a finger, while also easily providing the functions the general user would need.
-
-
All of the ideas do not have to come from you
-
I've always been a strong advocate for teamwork, but sometimes I feel that I have to be the only brain working on this project. This is not the case. Talking back and forth with a client is good for understanding what they want and running with that to brainstorm. As a designer, I want to make the ideas of others come to life!
-
Thank you for reading!
