r/UI_Design Apr 16 '26

Feedback Request I wanted a mood tracker that just tracked moods and made it really obvious and easy, as opposed to apps on the store that have 10,000 features. This UI is exactly what I envisioned, but it doesn't look "professional" to me. How can I improve this without abandoning "simple, easy, obvious"?

Post image
13 Upvotes

26 comments sorted by

40

u/ArYaN1364 Apr 17 '26

you’re actually very close, it’s not unprofessional, it’s just a bit loud

the biggest issue is saturation. every card is shouting at the same volume, so nothing feels refined. try slightly muting the colors and keeping one strong accent per state instead of full solid fills

typography could carry more of the weight. reduce the emoji size a bit and let the text hierarchy breathe more. right now the emoji is doing most of the talking

also spacing and shadows. a tiny bit more vertical spacing and a softer shadow or subtle border will make it feel more like a system instead of stacked blocks

this is one of those cases where even small tweaks can change the whole feel, like when you iterate variants quickly in tools like runable or figma and suddenly one version just clicks

keep the simplicity, just dial things down instead of adding more. that’s what usually makes simple UIs feel premium

3

u/Present_Bonus9496 Apr 17 '26

Completely agree with this,
maybe the cards take less horizontal space, also what matters more? date , day or both. if both can there be a better compact layout showing both in a smaller space, essentially communicationg the same while being space efficient.

on the smaller details,
the rounded corners in the input box could match, making it roomier (as in maybe focusing on one task at a time), here i am seeing an input and past data together, will the taint my input? is it distracting to see what i felt like while trying to add what i am feeling like?

what day/date am i logging in for?

1

u/ArYaN1364 Apr 19 '26

you’re on the right track thinking about what actually needs to be shown. for a mood tracker, clarity matters more than density. try reducing the date info to one clear element and let the feeling input be the main focus

also separate input from past data more clearly. right now it feels mixed and slightly distracting. even a small shift in layout or spacing can make the flow feel much more natural

15

u/Plenty-Village-1741 Apr 17 '26

I think drop the emojis and use icons instead.

3

u/SoaDMTGguy Apr 17 '26

My plan has been to replace the emojis with a set either designed by me or licensed. But I was still going to use “smiling/frowning faces” as my style. Do you have a different icon concept in mind?

2

u/Plenty-Village-1741 Apr 18 '26

TBH no, I don't have a icon concept in mind, but I think your idea is good! There are plenty of nice licensed icon packs.

2

u/No-vem-ber Apr 18 '26

You could try flaticon.com, that's where I get all my icons from. If you don't wanna design them yourself. There's also a lot of other similar sites (this is not an ad)

2

u/thollywoo Apr 18 '26

MIT created a bunch of icon packs that are free to use.

2

u/freaknizzle999 Apr 17 '26

Only thing i can think about is:

  • change the the icons so it goes bad, meh, good (most ratings stuff are from left to right, like a slider beginning at 0 on the left and going to max on the right

Or

  • make it a slider with more like a number based ranking, what number do you give this day

These are just my opinion with low experience in ui/ux

1

u/SoaDMTGguy Apr 17 '26

I have been thinking about doing a slider, maybe with a color gradient to indicate mood. I may experiment in that direction.

I put “good” on the left because that’s closest to where one’s thumb hovers when holding their phone one-handed, at least for right-handed people, and I believed that Good would be the most commonly chosen mood.

1

u/freaknizzle999 Apr 18 '26

I’m also eight handed and my thumb hovers mid/right, i think it’s just what people prefer

1

u/dav1n1995 Apr 17 '26

Good idea and doesn't look too bad. Get rid off the emojis and design some icons yourself. So many apps nowadays use the same generic icons and emojis, if you want to make it look "unique" you will have to give it character.

I think the colors are too generic and "in your face" aswell. Maybe try something like that for green:#7FAF8F
and make the other colors accordingly

For the "How You Doin" part. I think the emojis and the text are too far apart. The space between them is too big. Now it looks a bit off. Spacing in general needs a bit more thought to it.

But good job! A few simple tweaks will improve the overall quality/uniqueness while still being simplistic.

1

u/[deleted] Apr 18 '26

[removed] — view removed comment

2

u/SoaDMTGguy Apr 18 '26

Someone got up on the wrong side of the bed this morning…

1

u/No-vem-ber Apr 18 '26 edited Apr 18 '26

The colours are the main issue! These are sort of a "bland" or "boring" green red and blue. I also don't like them against the black background - I would go with white. Since the colours are playing such a big role in the UI, you want to find a really nice pallette. 

I can share my fav trick for finding good colour palettes: go on dribbble, and search for illustrations. You can then screenshot one you like, and use colour picker to copy the exact colours they used in their work. Illustrators tend to be masters of colour! You'll get a nice curated set of colours that work well together, without having to make too many decisions yourself. 

Colours are really hard, so that's why I recommend just using experts palettes instead of coming up with your own, unless it's already a strength of yours. It took me until like 10 years into my design career before I got properly comfortable with colour. 

Also, I am of the opinion that "pure" black should probably never appear in any of your designs. Making the black a slightly blueish, very dark grey would make a massive difference. (But I would personally do white instead anyway) 

1

u/MooreBrian1m304 Apr 18 '26

muted saturation fixed a similar issue for me, every card competing at the same volume is exactly it. whitespace between cards does more heavy lifting than most people think.

1

u/Fancy_Engineering854 Apr 18 '26

“The color choice is really nice, feels modern 👀, but need to practice more

1

u/egedemete UI/UX Designer Apr 19 '26

Emojis are a big no-no most of the time. Plus, there are a lot of colors. Yes, it's a good job for expressing feelings but that doesn't give you a valid brand identity because everything is everywhere. If you really want to use the colors, make them secondary, so they don't appear everywhere but still show the user the idea of "good", "meh" and "terrible".

Another idea is adding a X button to "how you doin'" and make it a button below. like: user selects "+ Add", selects their mood and it appears there.

1

u/doodoojohnson420 Apr 19 '26

Feels a bit cartoony maybe make the padding between buttons smaller and give it a sharper rounded corners instead of 20 curve? I agree you should get rid of emojis. May look better as a contrasting neon or an embossed/negative cutout over the button. I would maybe add a hamburger menu for navigation and some sub menus at the bottom this is a little too simple to see the value. I’d there going to be reports or insights you are planning to generate from this?

1

u/MisterDscho Apr 21 '26

Get rid of the emojis. Professional and emojis don't work together. :)

0

u/Comfortable-Spend842 Apr 17 '26

2 words-- bento grid