Problem 1: Visual Design
In my evaluation, I noticed an overall lack of consistency in internal design. Graphics employed different color schemes, combined flat and 3D design, and did not meet real-world design conventions. I identified these design violations and redesigned three screens to fix them. My goal was to create a stable, consistent navigation experience for the user.
SCREEN ONE: Map Interface
Pain points
One of the app’s main features is to “Update the Map” using the icon on the bottom right of the screen. However, this icon does not match the typical pin graphic standard to other map applications, so its function may go unnoticed by new users who’re unfamiliar with the app’s features.
Redesign
I created four cohesive buttons that unified the interface and were fixed on the page as the user interacted with the map. On the top of the screen, I added a compass button that reorientates the map when pressed, as well as a hamburger menu to provide the user with more map options. I also changed the color scheme to all be one shade of blue, instead of the two blues used previously, and altered the button at the bottom to only direct to the important primary navigation tab.
Before
After
SCREEN TWO: Update the Map
Pain points
The graphic design of the Waze icons lacks internal consistency. As you can see, there are two different design styles across the app, with some pages using white illustrations and others using colorful graphics, like those shown on the “Update the Map” screen.
Redesign
I created a cohesive design style by redesigning the graphics to match across the app. I wanted to use the same all-white illustrations as the icons on the settings page, so I adjusted the “Update the Map” screen to have graphics with a white design atop a colorful background. This way, I was able to maintain Waze’s traditional color scheme while creating a more cohesive visual design.
Before
Before
After
SCREEN THREE: Begin Route
Pain points
A common map feature–the ability to alter the starting and end locations–was missing from the navigation process. This feature is typical in other map applications and is often initiated when the user clicks on or near the location name after getting directions to their desired location.
Redesign
I created an Ellipsis next to the route details that, when pressed, shows a drop-down menu to allows users to edit the route. Users can then edit either location and have the ability to switch the locations with a simple touch of the arrow button on the right.
After
After