Waze Redesign
For this project, I was tasked with redesigning up to eight screens from an app or website that had numerous heuristic violations. My app selection was centered around the concept of good UX design as an absolute necessity, not just a beneficial afterthought. Navigation apps are a perfect example of this as the interface must be extremely simple and accessible for users in precarious situations. In my search, I landed on Waze, a Google-owned navigation app that crowdsources data from users in order to provide real-time updates on road conditions. Personally, I’ve always struggled with this app due to its cluttered interface and lack of consistency with other navigation apps, so finding UX heuristic violations was not an issue. In this case study, I’ll be outlining the violations I found along with their accompanying redesigns.
role
UX Designer, Researcher
team
Myself
timeline
Spring 2022 (3 weeks)
tools
Figma
UX Designer, Researcher
team
Myself
timeline
Spring 2022 (3 weeks)
tools
Figma
The Design Process
My design process was separated into three phases: a heuristic evaluation of the app, redesign draft one, and redesign draft two. Each design expands on my identified UX heuristic violations, while also incorporating other ideas I had during the design process.
problem one: 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 01: 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.
screen 02: 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.
screen 03: 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.
problem two:
user experience
user experience
When examining the user flow, I noticed several pain points that could greatly enhance the user’s experience if redesigned. I improved three screens to provide more flexibility and control when using the app. My goal was centered around de-cluttering the screen and creating more intuitive actions for the user.
screen 04. Map Options
pain points
The map interface is cluttered with many unnecessary icons and information that can obscure the user’s view. Also, the lack of a prominent customization menu limits the user’s control since they have to go to the “My Waze” feature and then the settings menu to get any relevant information.
redesign
I added four new icons that are fixed on the map to reduce confusion and maintain stability across the map interface. On the top right, I created a hamburger menu that gives users quick access to features formerly on the map screen, such as Carpool, Voice Search, and Music. I also added a “Filter Map” option with toggle switches to allow users to choose which icons they’d like to see on their screen.
screen 05. My Waze
pain points
On the “My Waze” page, previously searched locations are saved indefinitely and displayed alongside important app features. This unnecessary information clutters the screen and makes it difficult for the user to tell what is actually important.
redesign
To declutter the “My Waze” page, I condensed the driver’s previously searched locations into one tab. This way, users can have access to their driving history without it cluttering the primary navigation tab.
screen 06. Railroad Crossing
pain points
One Waze feature that goes largely unnoticed is the “Railroad crossing notification”. When a user is within 0.1 miles of a railroad crossing, a notification pops up at the bottom of all screens except for the map itself. Because the map screen is where users spend a majority of their time, I found this feature to be ineffective.
redesign
I made a “Railroad Crossing” banner notification so that it appears on every screen. Because the notification isn’t urgent, users don’t have to interact with it as the banner will close after a certain amount of time.
