📱 My journey to releasing my first app - #2 🎨 The Design

My app HookMeUp is now deployed on the PlayStore, feel free to download it HERE!

I wanted to share the process I used from idea to actually releasing the app.

You can find the first article of this series about the ideation HERE.

Today I will share my experience in building the design of HookMeUp, without any design background.

The motivation

I wanted to take the time to do the design before implementing anything. I feel like developers do not respect that design is a mandatory step when building an app.

It is easy to design your app while developing, but the result is not optimal because you are biased by what is easier to implement. Also, when you do not spend time on the design before development, you lack hindsight on what you are building.

As a backend developer myself, the challenge was to show that I was still able to build a frontend interface I like and users could find attractive and understandable.

Here is a preview of what my process was :

Full process design video HookMeUp

Let's dive in!

The tools

First of all, I needed to pick a tool to design my screens.

My experience of that kind of tool is mainly retrieving some exports for icons and stuff. I also use Figma to create my article's covers, and I am really happy with it.

My pick was Figma for some reasons : • it is free (most of it) • it has a web version • a lot of designers recommend it • it seems approachable for beginners

Logo for design tool Figma

I can already tell you I was fully happy with my choice!

The actual design

The colors palette

Before doing anything, I like to choose some colors I will use for my design. It helps to find an identity for my app and gives inspiration for the design.

For this purpose, I use the website ColorHunt.co. The website offers tons of colors palette for free. You can just browse, or search by text, and retrieve a color palette which is a group of colors that match together.

In the case of HookMeUp, I was looking for a dark theme because I like that so much, and after some tries, I found this palette.

Color Hunt Palette

I really liked this palette, and I kept the white, and darker colors. The red was not what I wanted for HookMeUp, so I didn't keep it. Finding one color when you have decided already 3 colors is very easy, you can just sketch your screens and move your cursor around the color panel to find the color you want.

The sketching

The first draft

For a start, I try to design a simple screen with the colors picked before, just thinking about the features I want to see, and how to materialize them.

For the record, HookMeUp is an app that offers to the user some catch-up phrases for dating apps such as Tinder. My idea was to have a single page app, without onboarding, and direct access to the feature. I ended up building an (ugly) screen like this. Pardon my french 😅

Screenshot HookMeUp app first sketch

The features are really simple: the current catch-up phrase is displayed in the card in the center. Then you have 2 buttons: one to go to the next phrase (the thumb down), and the other to copy the text to your clipboard. Finally, you can submit a new phrase with the full-width button at the bottom.

Designing the likes

Based on the first screen, I found some ideas to improve the screen.

First, I added a like count at the bottom-right of the card. The idea was for users to have some kind of rating of the phrase. I wanted it to be a "positive" rating, so counting likes was the best option.

Likes count sketch HookMeUp

I liked the fact that I could add some recurrence between the like button and the phrase display. Also, you may notice I switched the icon for the button, from a "copy" to a "heart".

The "Saved" section

From that change, I felt like something was missing. The issue was: what if a user likes a phrase. Then, he has his phrase on the clipboard. Then, he likes another one, which gets copied in the clipboard. The result is the user loses the first phrase and needs to shuffle until he can see it again.

To remove this frustration, I came up with an idea: I needed to store liked phrases for the users to keep them. I decided to add a "Saved section".

Sketch saved section HookMeUp

I used a book icon and integrated a heart inside. I like the idea of the book because it seems logical to store phrases inside a book. Also, it allowed me to introduce an animation I really liked.

When a user likes a phrase for the first time, the heart in the book gets filled. When a user likes a phrase, we animate the heart with a "beat". Heartbeat animation HookMeUp app

I was really happy with this section. By clicking on the book, you go to the "Saved" section. This section is very simple, so I designed it while implementing and it looks like this.

Capture d’écran 2021-02-02 à 14.46.48.png

Finally, there is a phrase detail section, because it felt weird when nothing happens when clicking on a phrase. Same here, I designed it during implementation.

From final version to definitely final version 2.0

At some point, I was happy with the design. At least, I thought I was.

It looked like this :

Capture d’écran 2021-02-02 à 14.52.51.png So I implemented everything (I will detail this in the next article of the series) and took some time to let it mature in my head.

After some days, I felt like I had to change some things.

So I completely changed the green color. I wanted to go towards a warmer color because my app is about dating after all, so I should use that kind of tone.

I ended up picking a yellow color, much more dynamic, and it was exactly the tone I was looking for. The designed screen looked like this :

Capture d’écran 2021-02-02 à 14.56.10.png

The logo

The logo was one of the hardest exercises for me. Indeed, making a good logo looks so easy but is not at all.

The first logo I picked was so random, now it makes me laugh. I wanted to have an "aggressive" tone in my app, so my first logo was this devil :

Capture d’écran 2021-02-02 à 15.00.20.png

I really liked this logo, and I felt like it was disruptive. My concern was to actually use a devil as a logo: I was scared it could be offensive. Also, when I started to design the rest of the app, I was not able to find any good way to have components related to this devil.

I kept this idea somewhere in my head, but I removed this logo for HookMeUp.

At first, I was so proud of my book with a heart inside that I made it my app logo. In my mind, this book was the best component in my app so it had to be the logo. The logo was like this :

Temporary book logo HookMeUp app

It looked okay at first. But after few days with the app installed on my phone, the logo looked awful to me. Every time I was seeing it, I was disgusted.

I realized I made a mistake thinking picking an icon component that was working in the app would make a great logo. A logo is very different to design than any other icon.

Yet, I kept it on my splash screen because it looked cool, but I switched to another logo for HookMeUp.

I really had issues drawing a logo from scratch, so I decided to use writing instead. I definitely got inspired by the UberEats logo and ended up with that logo, which is the final one :

Final logo HookMeUp app

Conclusion

You can check the full process in this GIF: Full process design video HookMeUp

It was really fun yet challenging to perform the design of HookMeUp. I learned a lot and was really happy with the result based on my small experience in this area.

I highly recommend to any developer to try designing interfaces at least once, so you can understand how hard it is to create at least a "decent" interface, that users can understand.

I hope you liked the second part of my journey. In the next part, I will talk about the implementation process.

In the meantime, do not hesitate to give a try to HookMeUp HERE

Thanks for reading!

Comments (3)

julio fleitas's photo

gran trabajo, a la espera de la parte 3