Dating App -Wireframing-
And so we come to challenge number two, this is getting more and more exciting. First of all, I want to say that what I liked most about this exercise is having met my new crush, he is called “Figma” and I am sure you also know him (or her?). I was already an amateur user of Photoshop and two or three times in my life I had used “Illustrator” or “In design” but nothing else, and then Figma came, and came to stay in my life (I hope so). I will list the 3 highlights that come to mind when I think in this software, first the teamwork system in which you can even create your own group and share it with all your colleagues, then the way to copy and paste from the same cursor and finally the export button just below the hand.
Well, enough about love at first sight. Let’s talk about the App that inspired me…
Did I choose a dating app, why?
…because I use it often, I found it more fun and the truth is that I wanted to have fun with this challenge. I was already a little tired of using the transport apps that are usually boring. The first challenge I found was that I had to soften the tone of the app because it is a gay dating app and you know there are many pictures that are up-toned. So, in exercise number two before the challenge where I had to do a User Interface design, I took advantage and changed the pictures of people that are somehow private, for pictures of me and other web works I had already done, and ta! ta!… there was a version of my favourite app but PG13. Then I went to do the wireframing, it took me several readings to understand where to start. I already knew what kind of simple elements there were in this app, most of them were an image and text lane, the main menu, secondary menu, messaging, footprint, dropdowns and a pro option that also represents it in the dollar sign.
The goal of these applications is quite basic, the user wants to meet people to practice their hobbies, have a coffee, go to the movies and go out for a walk. In short, the main task is: to meet people who are around you with whom you share tastes (or at least that was in my new version of the app, version PG-13).
The application already solves a problem that after indicating how close a person is, the user decides whether to send a message or not, even solving a problem for the more shy user, you can leave a mark without saying much.
The flow I chose is simply to open the main page of the app and find a person you like for his look and interact with that other user, using the main menu below at the end you can go to check your messages, see appointments in the calendar that has left another user, check your footprint received and return to the main menu to continue looking for your better half.
I must also mention that there is only one blue colour used to represent two icons that fulfil very specific functions. In Wireframe you can make this exception of grey usage when the function you want to represent has a decisive use.
On the left corner of the user profile is a blue triangle. Used to inform the user that the person is online and it is using the application right at this moment. Another occasion where I used the colour blue in the wireframe is in the message section. On top of the secondary button, there is a fluorescent blue dot which lights up. So the user knows that he has received new messages or footprints.
What I enjoyed most was the UI Design exercise because I met my new great love Figma. My brain exploded when I understood what a prototype is. Deeper and above all what their goals and objectives are when navigating through an app. Finally, I guess I am getting closer to understand User-centered Design.
