Mapping, Navigation, & Wayfinding

Mapping, Navigation, & Wayfinding is one of the key components of Phunware's Mobile as a Service (MaaS) platform . It is offered as a standalone SDK and also as a part of Phunware's venue solutions. As Director of Product Design, I worked with the Engineering and Product teams on every aspect of how this component works—everything from how the product fits into Phunware's broader offering, to the backend interface that allows the user to manage their venue, to the design details and constraints of POI icons.

Year: 2013 - 2015
Role: Director of Product Design
Team: Tiffany Shih (Senior UI/UX Designer)
Platform: Web Portal, iOS, & Android

It All Starts With Your Location

To get that, software uses a combination of WiFi and Bluetooth Low Energy signals. We can pinpoint your location down to a few feet. This is key to providing a seamless and accurate experience within a building or venue.

PW_Austin_Copy_2PW_Austin_Copy_2

The Venue

We take a good look at each venue to create simple, concise maps that are easy to understand. Colors and elements are familiar and consistent across all venues and platforms.

native-mapsnative-maps

Everyone Else's Location

Placing our custom maps on top of iOS & Android native maps helps to give the user context of where they are in a building, and where a building is in relation to the streets and city around them. They can zoom in as close as a single room, and zoom out as far as outer space. Using the OS's native maps also gives us acess to POIs outside of the building. This means the user can get detailed information on things around them and can route to and from outside Points of Interest. One of the biggest challenges we had to overcome was the translation of our own POIs to the map coordinates. Keeping the map in the correct position and scale while also keeping each individual POI in its position relative to everything else was no easy feat. 

Points of Interest

POIs include any physical location within a venue. We created each POI to have metadata, such as images, text, floor information, etc. Users can select a POI from the client side app to view this information. They can also get directions to and from POIs within each venue.

Waypoints

Before a user can route between POIs, the venue owner needs to tell the system all the possible ways a person can go. Waypoints create this ground work. By dropping waypoints on a map, you are essentially creating the intersections of where the "streets" will meet. 

Segments

Once the ground work of segments is created, they must be connected via, what we call, segments. These are the "streets" that users can take to get to their end destination. 

Routes

Once the system knows all the possible connections, it can efficiently route the user to their end destination. The algorithm can intelligently decide which route is the best based on criteria from the user; fastest, handicap accessible, no stairs, etc.

map_editor_poi_gif2map_editor_poi_gif2

Laying The Foundation

To create routes, the system must know all the possible ways a user can go. To do this, we lay a groundwork similar to how streets and intersections work. We devised an interface that makes it quick and easy to lay (sometimes) hundreds of segments. Once a user has selected the waypoint tool, all they need to do is click where they want a waypoint to be and it appears. Every click on the map results in a waypoint. To create segments between waypoints, a simple click on the first waypoint, and a second click on the ending waypoint creates the segment. If a user needs to change something, they can put the map into edit mode, allowing them to move and delete items. If waypoints are moved, the segments joining them will update once the user saves their changes.

panel_slidepanel_slide

Simple POI Management

Points of Interest often need all sorts of data types, such as rich media and text. We built an easy way for admin to manage all the POIs in their venue. The metadata that POIs get is fully customizable. Some standard pieces of data are: title, description, banner image (for the client side app), and POI icon. Our solution is a panel that slides in from the right and is used throughout various other products in Phuwnare's MaaS (Mobile as a Service).

 

Points Of Interest At Your Fingertips

Once POIs have been entered in the backend, and segments have been made, users can view them on the client side. Information such as metadata and photos are available for each POI. Users can choose to route between two points of interest and the client side app will show the user the steps to take to reach the end destination.

We built an out-of-the-box solution for venues. Customers can use this as their main mobile application, but they can also choose to customize it by using Phunware's Mobile CMS or engaging with Phunware's custom development team.

zoom_levels_gif2zoom_levels_gif2

Details, As You Need Them

When users view a venue at a high level, too much detail on a map can be distracting. To account for this, we built multi-level zoom support into maps. As the user zooms in, more and more detail is shown, giving the user context to their surroundings. Multi-level zoom support required us to build separate maps for each level of zoom. Admin users can define the point at which each level appears on the client side via the backend portal interface.