Who

NUVI.com
2801 N Thanksgiving Way
Lehi, UT 84043

Nuvi offers data-driven designs built to help brands strategize and guide their decision-making process by offering them insights into social media activity.

What

  • UI, UX for Web Based Application
  • Marketing Site Design

When


How it Started

Nuvi offers data-driven designs built to help brands strategize and guide their decision-making process by offering them insights into social media activity.

Nuvi approached us in the fall of 2016 with a vision to transform their entire product suite from the ground up. Being right down the street from us and seeing our portfolio - the decision to work with us was an easy one.


The Challenge

If you are familiar to NUVI you will know of their dark interfaces, futuristic themed interactions and glowing visual data models.

This has always been their forte and customers either hate it or love it. But regardless, it was time for a redesign.

For us the interface felt poorly put together and the interaction followed suit. Being that the product was hard to use, it did not allow much forgiveness for it’s dark and overwhelming visual language. We knew we had to fix this!


First up: Let’s quickly fix that navigation

Aside from the interface being something we felt could be greatly improved, we had to tackle a very fundamental flaw in the user flow and that was the navigation.

NUVI had implemented a navigation that caused confusion for the user because of it’s inconsistent way of getting around the important parts of the application. Legacy code and revisions over time created hassle and a sense of being lost. We knew this was at the top of the list of things to address.

We worked with the NUVI team to establish some lo-fi wireframes of the entire app’s navigation points. We created users a “home base” like feel in knowing exactly where they can quickly get to another point in the NUVI product without having to click thru inconsistent navigational systems.

Time to set the tone: Mood board

After finishing a good wireframe sprint to decide on a global layout of navigation, NUVI decided it was time to refresh the UI in conjunction with the improvement of the user experience of all the NUVI data models.

We spent several days of research sitting with customers and hearing their feedback on visuals. As we gathered their feedback and discussed things with the NUVI team, we concluded that moving away from the dark NUVI theme would not be a good choice. But a dark interface? How? How do we do this while keeping things fresh, clean, easy on the eyes and all the while meeting the needs of the customer and NUVI? We all new dark interfaces were cool on Dribbble... But in real life? We knew this would be tough.

This is where a mood board was called for as well as some quick mock-ups of their existing product. After some sprints on the design and some mood boards, everyone kept saying the same thing. “Are you guys designing the new Iron?” It was obvious from here that this would be a major source of inspiration.

Choosing a Typeface and Color Pallet


Next: Rebuilding the Data Visualization

It was now time to set the tone and get into the details of how the data is represented as well as how it looks.

Every NUVI chart and graph that the product revealed required a thorough meeting of explantation from the NUVI team. Nothing was obvious from looking at the visual language for the data models. The graphs, charts and all data were overly decorated with a strain to be different. It was time to simplify things yet keep it sexy and innovative. This is exactly what we did.

Final Steps: Building the Monitors