NNG UX Atlas

Summary

NNG UX Atlas is a tool for designing and developing mobile and automotive applications. The vision is to create an environment where both designers and developers can easily work together to create applications with a great user experience. NNG UX Atlas allows designers and developers to work alongside each other up to the point of production in a non-destructive and iterative way.

I was initially hired by Randall Tyner to work for NNG North America in November, 2015 to help achieve this vision and began several years of research, brainstorming, building workflows, creating prototypes, and developing the tool. More recently, NNG UX Atlas has been used to develop client applications internally.

NNG UX Atlas is a cloud-based application. Users are provided with permissions that allow them to access and work on team projects in organizations that they are granted access to. Multiple users can work locally on the same project at the same time and merge their local changes into the cloud project.

Above you will see our latest promotional video for NNG UX Atlas. This is a video I helped create along with my team and a third party group to help showcase our product.

Process

Initial Sketching

A huge amount of sketches were done on pen and paper for the NNG UX Atlas project over the course of its development.

Whiteboarding

Our team met consistently to discuss features and workflows to brainstorm solutions to various problems.

The Users

Several years were spent conducting research, discussing features, documenting user flows, building wireframes, and creating prototypes with our user’s in mind.

Low-fidelity Workflows

Over the course of the project I built countless wireframes and workflows describing various interactions and features within our tool. Below you will see one example of these low-fidelity workflows.

High-fidelity Workflows

Once our team built out an updated UI with a style guide, we began to build high-fidelity workflows describing NNG UX Atlas in greater detail. A lot of our high-fidelity workflows were built into short videos and interactive prototypes. The workflow / prototype you see below was an exploration I did for a 3 column panel concept in NNG UX Atlas.

Video workflows were another method I enjoyed using. They really help with describing the user experience and displaying how the UI will work without building out an entire prototype.

Prototypes

Prototypes were essential when working through different features of NNG UX Atlas. They really helped expose where things would and would not go well.

click image to view prototype…

Tutorials

Below you will find some tutorial videos that show NNG UX Atlas in action.

Demos

Below you will find some demo videos that display projects created with NNG UX Atlas.

Project Contributors: NNG UX Design Team and NNG Development Teams in the United States and in Hungary.