MB Apps: E-Navigator

The Project: To redesign their E-Navigator's current screen (for MB Apps). The Problem: With the first screen being the current design, there's too many things going on. The colors of the background are clashing with the blue, the icons to the right look like they're floating, the question mark icon is bold and inconsistent with the rest of the icon designs and there is no typographical hierarchy. The Solution: Based on the wireframes provided from the UX team, these are the different screen iterations I've designed. The color blue represents trust, confidence and intelligence combined with the color gray which represents security and reliability. The icons to the right are more 3D to replicate the look of buttons, while the icons in the list are not buttons, hence why they look flat. The big world graphic on the left was too distracting so I decided to eliminate that for a more cleaner look. I felt there was no need for a separate colored background as it would still feel busy and it gives the app a more unified look and feel. The background graphic was inspired by the perspective of driving and the lines represent the lines in the road in an abstract way. Typographically, the text in the list is the same size but I used color to define hierarchy.