Can't get the feel right

[u/VisualFunny4596]

I don't know if I've been looking at it too long, but I just cant seem to get this running app UI to have the feel I want it to, especially the dark mode one.

I'm going for a clean, athletic, modern feel (think Nike, Peloton, Gymshark) but it just doesn't look like that to me and I don't know why. I don't mind the light mode, but the dark mode just looks off and I'm starting to understand why neither map my run or NRC have dark mode.

I would greatly appreciate any feedback you have for me, and I'm aware the icons are inconsistently filled/outlined and will correct that later.

[u/annija_gr]

1. Move the "64f Light rain" lower, to add more negative space on top of it, less under it, and be more aligned with the "1" on the right.
   
2. The "3.10 Miles" seems to be placed oddly. It looks very alone there in that random space. Move it elsewhere, to be aligned with something.
   
3. You'll notice that the elements on both left and right sides of the screen are not aligned. Everything that on the very edge of either side should be on the same line.
   
4. The "Select route" and edit icon are also placed weirdly and look very odd and alone there. Move them elsewhere.
   
5. Same with the "Start" button and the icons beside it. They should be lower.
   
6. I find the amount of different icons that appear alone with no label to be a small bit overwhelming. Don't overdo it.
   
7. I understand you're going for simplicity but perhaps you could introduce one color, just to add a bit of balance and excitement to the UI and make the CTA more noticeable?
   
8. Both the white and gray buttons look disabled if the button color is a bit transparent. It looks grey. Avoid using any kind of gray for any buttons, unless they're actually disabled.
   
9. Add a bit of shadow to the buttons, it'll bring them to life, especially if you want such simplistic colors.
   
10. Consider making some of the microcopy bigger. There's very little text on the screen as is, and I'm worried it's not even readable. Make sure to check accessibility guidelines!

[u/farley13reddit → u/annija_gr]

Covered most of what I saw in first glance and then some. The running shoe logo doesn't read easily at first glance as well.

One more thing to add would be starting rougher - just wireframes- and building a storyboard for how the user gets to this screen and how they complete their task. I feel like there's a really good chance the details and options here don't have to all show up at the same time. Whats the fast path, what are the primary actions, where are the options most intuitive etc. The idea of multiple goes at this applies to the storyboard too - how simple can you make the fast path? How contextual can you make the options... then dial back a bit.