UI Redesign from the Ground Up

[astoko]

Hello Everyone!! :P

I came around looking in OM just because i was looking for alternatives and i quite like it, though i think the design is kinda reminisant of the 2016-ish or a bit more modern than that UI.. i personally like circles and uniform ui that works and looks nice.. though i might as well say that i dont have the greatest taste and i do UI as a hobby but here down bellow is my own opinion of how it should look.. you could say as an rebrand lmao XD.

Simpler Indicators and Color Palate

I took an look at the app and it seems the color palate as well as the icons are.. not feel the same and kinda thought that maybe that could go for a change, Using the Google Icons Library with the parameters of Weight:600, Fill, Grade:Emphasis, 40dp i made an example icons..

Changed the Logo & Font and Color Palate.

This might be controversial but i think that an application dedicated for mobile use should use an simple logo or something that at least can be reminiscent of the original.. thought i am NOT an logo guy i would love an redesign of the logo just to see what people think and maybe some new ideas that have more creativity than my logo hehe idea.. as it is just an icon with maps pointer on... maybe a leaf that was pointing downwards would be cool?

Grand Finale: UI Redesign

Now the idea was to streamline the whole process as it looks smooth as possible.
I tried but really i was kinda sleep deprived when i made these so i just want an opinion and a thought of if its needed to update the UI? Also i tried to keep everything more or less the same in uniform with sizing and colors.. but i might have done mishaps that i haven't seen, feel free to form an constructive argument of how do you think it should look and if you would like please include examples!! :3

Design Library

Design Mockups

I might not know how to do any developer work but..

I just wanted to give out my opinion and that is what i love about open source so here :P
Also if you find again something wrong or just blantantly amazingly wrong too then yk.. say it ;3
And yes its clearly based on Gmaps and i just wanted to put my own spin on it hehe.

Disclamer i am not really an dev but just do passion projects for fun and mayhaps give out unpopular opinion and yes there is some placeholder icons that dont make sense.. sowwy too eepy qwq .

[astoko]

I am pretty sure most of this or all will and cant be migrated but i just thought as an thought experiment and having new ideas would not hurt :P

[VoxelPrismatic]

Looks cute, but I prefer our existing logo. Has more of a community feel behind it, whereas the one in your mockup is extremely corporate.

[astoko]

Looks cute, but I prefer our existing logo. Has more of a community feel behind it, whereas the one in your mockup is extremely corporate.

Yeah i know i am not really good at design at logos so.. it was just an idea hehe ;P

[fitojb]

The typography and color palette are exquisite! Congrats!

[VoxelPrismatic]

Grape

[VoxelPrismatic]

Actually, I really like the idea of naming all the colors after fruit.

Light Green - Apple
Dark Green - Avocado
Orange - Orange
Light Red - Strawberry
Dark Red - Tomato
Blue - Blueberry
Purple - Grape

I also am really into yellow. Can you make a couple mockups with lemon yellow?

[astoko]

Hmm Let me see what i come up with, though yellow is an relatively pretty hard to the eyes color i will see what i can do, for now i was thinking more of finishing the transportation UI and doing an little cleanup to my UI Library so it is easier for me and others to continue on forward.

also in an unrelated note i just reinstalled my arch linux install and trying to make everything again up to where it was and want to keep it minimal so it will take me a just a bit more of time than usual :3

[VoxelPrismatic]

"BTW"

[astoko]

"BTW"

I had to xD

[ArtjomSchwenk]

Wow I just came by to look for any discussions regarding an UI-Overhaul and here you are blessing us with this. This looks really good. It feels very modern and I like the bold design. Recommending OM to my friends will get way easier, even if just a bit of your design makes it to release. I would even volunteer to help implementing it 👀

[astoko]

Thanks for the compliment and I'm happy you like the overhaul suggested interface. I honestly think that OM kinda needs a solid and straightforward design guideline as it kinda all feels up in the air.. Yk?

[astoko]

Also I was thinking of making the transportation UI different from what other apps use as idk.. Just thought maybe it would be cool.. I might start on that and see how it goes :3

[astoko]

UI Transportation Progress:

Just an little UI element that will be used when selecting the route in a list of options.

[Petak73]

This definitely looks nicer but at the same time makes OM look like pretty much any other nav app. The current look is a bit rudimentary, but it does distinguish it from the crop. I don't know ...

[astoko]

I get the idea and I've tried multiple failed times to keep looks and identity good and different but I mostly took inspiration from the highly successful project called immich that kinda based itself on the same interface idea as G-photos and still made adoption easy with a privacy minded approach.

Though I'd be nice if someone made a more identifiable UI to see how it goes.

[VoxelPrismatic]

I guess the tough part is that there's not a lot of UI in a mapping app.

• The map
• A few text boxes telling you where to go

Certainly, removing the 3D map like what you've shown will make it unrecognizable. It's actually one reason I love OM.

As for the other stuff, it could use an upgrade to the modern UI library, but it's not strictly necessary.

[astoko]

Actually I wanted to make it 3D but the amount of tinkering in Figma needed to do that goes up really fast really quickly.. Sorry for the confusion qwq

[patepelo]

@organicmaps/design

Interesting proposals. Thank you for taking the time, you're very talented, @astoko

[PinguDEV-original]

To be honest, I'd really like this. But I have two points to criticize:

1. I like the current OMaps logo and I think it should not be changed too much and doesnt have to. Maybe simplify it a bit, but such a big change as shown in the first post.
2. I would like to see as much detail on the map as right now. Maybe with different colors, yes, but without the crazy good detail I think it will loose some users (my dad for example loves OrganicMaps for the design of the map and the great detail)

[dev-inside]

Hey @astoko,

I appreciate your initial approach; it looks promising! However, I have some concerns regarding the user experience, which may pose challenges for rollout across different platforms.

Contrast Levels

The contrast levels in your design are quite low. To ensure accessibility for a wide range of users, including those with common disabilities like color blindness, it's essential to meet at least the AA standard set by the WCAG (https://www.w3.org/WAI/WCAG2AA-Conformance). Given that navigation apps are often used in bright daylight, the AA standard may not be sufficient. It's important to consider that not all users have access to high-brightness, contrast-rich AMOLED displays. Currently, only 2 of your 5 primary color schemes barely meet the AA standard, and this is only achievable with a font size of 18px (regular) or at least 16px (bold), which is classified as "large text."

Primaries

Note: I forgot to include purple, but it won't work!

Font Size

I recommend using a minimum font size of 16px. It seems that the sizes vary from 12px to 14px, which can be inconsistent. Additionally, the font face appears too rounded for individuals with dyslexia; a font with clearer leading lines would be more beneficial. The base font also seems a bit too thin.

Border Radius

The border radius is generally fine, but it lacks consistency. It appears to alternate between 4px and 25%, which can be visually jarring. A more uniform ratio would enhance the overall aesthetic.

Icons

It looks like you are using Material Icons or Material Symbols, which is great! However, I noticed some custom icons that may complicate future extensions, as Material Design icons are typically implemented as icon fonts or SVG packs. Additionally, the stroke width should align with the base font, which is currently thinner and rounder. If you choose to stick with the font, consider using Material Symbols Rounded with a thinner weight, such as 200, 300, or 400 (regular).

Map Design

Is the map intended to be flat? This approach may not cater to all users, as different people have varying needs when using map apps—some may require topographical details, while others may prefer street views.

Consistent Design Language

Your design seems to blend elements from Material You, older iOS designs, and Delivery Hero, which are quite different frameworks. The developers behind Organic Maps likely work with a specific UI framework (possibly an older version of Material Design) and must adhere to its limitations. If you wish to contribute to the design, I recommend reaching out to them to understand what they currently use or what they plan to adopt in the future, and then reading the documentation of the used UI-Framework.

I hope this feedback is helpful and constructive! As a UI Designer, I wanted to share my thoughts with you. Keep up the great work, and feel free to reach out if you have any questions! :)