Navin

Company

Navin
Role

Design lead
Services

Branding, Interaction design, UI design, Icon design

Navin is an indoor navigation product company. The goal is to let users navigate freely indoors and that eventually every building will be mapped. The mission was to create the brand, the mobile and the web products basically from scratch.

Discovery

There are many navigation products out there, but only a handful are dealing with the indoors. So first, It was necessary to understand navigation and mapping (contracting a cartographer come really handy) and then navigation indoors, which is quite different when it comes to users needs and the way people navigate indoors.

Brand’s Logo

Setting up the values was the first thing to do, understanding what Navin is and where it wants to be. Followed by the look & feel that we decided to convey which is right in the middle between functional and friendly and of course putting the indoor in the center. During the process a lot of indoor elements came to mind, but It was more about deciding which one conveys best. Then came along the free and light butterfly for the friendly aspect of the brand.

Color palette

Radiant

Brand typeface

Designing the
indoor map

Navin uses google map as first layer, on top of that they lay their layers of content. It's important to remember that indoor is not only about the inside, a campus that contains multiple buildings and what’s in between them is also counted as indoor. So the task was not only to design the indoor of a building - rooms, paths, doors and stairs but also other content that can be of interest to users like benches, grass, trees, parking lot, swimming pool, fences etc. In order to create a map that will contain all this content, be highly reliable to reality but won't overwhelm the user, it was important to keep everything minimal and simple as possible.

Room with a door

Glassdoor store

The layers that forms a building

Shadow

Floor

Walls

As shown on the map with indoor content

Points of interest is key for user’s navigation and orientation

Research showed that users orient mostly by their surrounding, so it was important to present points of interest (POIs) in the clearest way possible. One of the solutions for that was designing the pins as a circle, so the icon inside will be at optimal size. Also, the pins were divided into categories and each category got a different color. Utility POIs, which have a more functional need for the user (like the elevators and stairs), got a more generic color gray in opposite to the other colorful POIs. Rules for POIs appearance (text and pin) were set for different zooms by importance and relevance as showed in user testing.

Point of interest

Default

Chosen

Destination

Utility Point of interest

Default

Chosen

Destination

13 POI categories

Icons for navigation, POIs and for indoor utilities

A map is a way to view content. Which means that content should be organized and visualized, so it will be scannable and easy to understand. The main goal was to keep it simple. Creating sets of icons for every possible navigation scenario from one hand and for every type of content imaginable from the other. My favorite (due to a recent purchase) was the RV park icon

113 Point of interest (POI) icons

52 Navigation Icons

One path different floors

Forward and backward is simple, but what about upword? It was needed to seperate user’s path through different floors and still keep the difrentiation between the path ahead and the one behind. Creating clear Gray - Blue difrantiation between ahead and behind and then giving each one “different floor mode” by adding opacity did the trick.

Done path different floor Done path Path ahead Path ahead different floor

Once my destination is on different floor and for example, an escaletor is needed, the escalator then becomes my destination for that part of the way and the “real” destination grays out but stays recognizable as my final destination.

UX that keeps the indoor in the center

UX should highlight the virtues of a product. In this case having in mind that users will be switching between indoor and outdoor made room for some interesting features. Once clicking on a building, you can see all the POIs inside it and navigate to them directly. Also, user research showed that people will use Navin mainly to see the indoor route and less for actual live navigation, so once the destination is chosen, indoor view option of your route allows you to dive in to the indoors, so you could see the route inside the building, and then jump back to the outdoor overall view.

Mobile experience

After designing the map elements - the POIs, the indoor elements, and the “indoor centered features”, a sleek interface was needed - it was time for some UI Design. Menus, buttons, typography, icons, interactions and animations where based on the look & feel of the brand - friendly and functional. A detailed style-guide was created. After all screens where designed the dark mode, which is always a fun part to do, was designed for the map and the interface.

Indoor view (Max Zoom in)

Highlighted POI

Navigation indoors

Navigating around the campus

Search by category

Navigation drawer - Step by step

Search in darkmode

Indoor view in darkmode

Navigating to destination