Build a Navigation App in 30 Minutes

Michelle Lawrence Picture

by Michelle Lawrence | Last Updated: Mar 25, 2022

Still relying on signage alone to help guests navigate your building or campus? If so, you’re not alone but it’s time to provide a digital experience to help your guests easily navigate your building or campus.

Leigh Hamer: Alright, good afternoon, my name is Leigh Hamer and I am Vice President of Customer Experience here at Lumavate. I will be your presenter here today, and just as a matter of housekeeping if you have any questions throughout the session, I will be taking pauses to check the Q and A portion of the zoom, please feel free to post anything in there and I like I said I'll take some pauses to address those live, to make sure you get the most out of this session alright let's get started.

So, like I said, my name is Leigh Hamer and I am Vice President of Customer Experience here at Lumavate, I have more than 17 years of experience in marketing, namely within communications. Today, I have the pleasure of working with our customers of all sizes to help them with their mobile strategy and here at Lumavate we have a philosophy of working with our customers to make sure that we are delivering real results to them. So myself and my team work with our customers to make sure that their mobile strategies are driving the results that they want with their customers, so again, as we go through this session any questions that you have i'm happy to answer them and draw from my experience.

So we're here today to talk about navigation or wayfinding. I think it's important to first level set that no matter what building or industry you are in and thinking about, we're all here because we're thinking about our end guests, our end users. So, ideally, what we all want to strive for is a welcoming environment and a seamless experience, right? We want anyone who comes to our office building, to a theme park, to a college, to a hospital, to have a positive experience that reflects well on our brand, maybe gets them coming back, or if it's a job applicant, they want to take the job, if it's a patient they continue to see their doctor, but we want that seamlessness regardless of where we are. All we're talking about is a difference in campus size or how complex or old your buildings are and all of those factors can have a great impact on a customers or a user's experience. So, as we go through this please ask any questions about various industries. 

We're going to focus first on higher education, so whether you're in higher education, or maybe you're just in a similar campus right where multiple buildings, maybe it's a large office complex, something to that effect. But what we have found is that within the higher ed space about 58% have one or more major projects in the planning or pre planning stages. This means that most higher education, higher ed institutions are working on active construction projects, only about 6% reported that there's little to no project planning on campus. If you've ever been to a college you likely have seen some dorm renovations or a new building being dedicated to another donor. It is a part of the culture and it's part of the experience so there's a constant demand for detours or navigating around existing construction, both for foot traffic, as well as driving patterns, or where your visitors can park.

This is all because there's a massive investment happening on higher ed campuses, right? In 2015 alone almost $12 billion was spent on over 21 million square feet of new space, so when you start to think about how many buildings, how many campuses that impacted, this is rather regular, it's a significant investment. All while trying to make sure any guests, any tour groups, any prospective professors or students or their families can navigate around and have that seamless positive experience.

Now, the purpose of these renovations is largely driven to modernize their existing facilities. So, in some cases what this means is there has to be a workaround, where an entire building is not maybe shut off, but rather a floor or portion of a floor is inaccessible to visitors and guests. So wayfinding becomes even more necessary in those instances, because you have people directly in contact with the construction crew and navigating maybe on a regular basis different routes as different sections become available or get closed off. So it's a constant need, while also making sure that your investment dollars are going in the right places.

And in health care, we see a similar state happening. So in health care, we are seeing that about 87% of them are saying that they are having pandemic related construction projects. So as we know, COVID has changed everybody's work life, namely hospitals, so they have to renovate their spaces or change in some way to adapt to this new normal. That has led to one or more projects actually being fast tracked due to the pandemic, so there's a crushing need to get these projects done faster which may also cause more disruptions for visitors both again in foot traffic and driving.

And the healthcare space even more dollars are flowing so by next year it's projected that almost $46 billion will be spent on construction projects across hospital facilities or healthcare facilities. So again, very significant dollars being spent there, large impact for you for a customer base that has a significant need, right? Patients have to go to the hospital and they have to navigate around this very important construction that is happening.

All of this is happening, while we're all trying to keep our visitors happy right that's where we started. So I think it's important to keep in mind, why navigation and why wayfinding is so critical and why you're probably here today listening to this is you see that there is a challenge, especially if you have a complex building. So the reason that I chose healthcare and higher ed is because they are rather complex institutions or navigation areas, you have multiple buildings. Typically, you have several decades worth of construction happening so meandering corridors less than ideal wayfinding or other factors that may inhibit a user or visitors experience navigating through that physical space and think about a user's experience and their mental state going to a new space can cause a significant amount of stress and anxiety. So if you're going to a hospital, if you're ill or visiting a loved one, that compounds your ability to process stress right so having a seamless wayfinding experience will ease their burden and give them a better interpretation of your brand, your hospital or your institution.

So, the navigation impressions, let's talk about that for just a moment. When somebody has a poor experience whatever those factors might be, maybe that was a bad day for construction but that's where you had the most visitors. That can leave a lasting impression and people may be shying away from returning until perhaps after construction. So, making sure users have the available tools, to them, to navigate in real time is critical. And that navigation around a physical space, not just in my car right with Google maps, where I can plot a road route, but walking paths and navigable corridors.

So a couple of things to keep in mind when you think about wayfinding, there are some simple solutions that could be employed today by you and your team that likely, you have some of these already in place, but always could improve.

So the first one is just improve signage. One of the things with signage that actually a study in forensic psychology came out and it said that if you have improved signage using recognizable icons it lowers the stress of visitors. They can attribute those consistent icons throughout your facility and know what to expect or where they're following a path to. Bright colors also are something to consider with improved signage as well as addition of landmarks. So as you think about color coded signs, or perhaps a landmark is as simple as green elevators, or the yellow hallway, right, bright open spaces make visitors feel like they can breathe, they have space they're not claustrophobic it lessens their stress. It's also a very clear cue to them “Oh, they said when we hit the yellow court or the yellow hallway to turn right”, things like that do make it easier on visitors. If you're able to make those kinds of changes those are some simple solutions to enact today.

The other option, obviously more people, an individual one to one conversation or docents perhaps or tour guides who can physically walk guests around from spot to spot. Obviously, that is not scalable long term and likely there's some cost provisions to that to consider, but it is an option, as you consider other ways to solve this.

And lastly, an investment in beacon technology, so beacon technology if you're familiar is a way for indoor navigation to occur with a smartphone. There's actually two, I would say, large inhibitors to deploying this one is cost and the other is the adoption of individuals, so beacon technology is not cheap to deploy and then to set up a native app that works with it, but also the user has to enable my navigation, I have to allow you to know and ping my phone. So I would have to when I walk into a space allow them to track my device, as I pass these different sensors pinging off of my phone so you physically know where I am inside of a building. Some people might be very adverse to that and not want to give away that much privacy, so that is a barrier that has to be overcome, when you think about beacon technology.

And the last one that i'll talk more about here today is Lumavate, so Lumavate has an app building platform where we enable anyone to build progressive web apps and deploy them and manage their own publishing schedule. What I'm going to walk you through today is our wayfinding app starter kit and how easy it is to set up, to hit some of these key needs and get your app out into the wild faster. Okay, so I am going to switch my share.

All right now, you should be able to see my screen, where I have the Lumavate studio open.

This is the wayfinding app when you come into one of our studios you can choose to start an app from a starter kit and I chose to start from the wayfinding starter kit as it would appear, for you. Over here what I have is a live app, it does work across any device type so here, you see, I have it on desktop I have it scaled down to approximate a phone. And this is the finished app that i'm going to show you how to build, but to give you a sense, a user can come in here and select their starting location and where they want to end up. The app then automatically determines for them what route they should take based on the fastest route and it gives them turn by turn directions. 

Me, as a user, I get to pick whether I want to see a list view or perhaps I like a larger, step by step view and I can see each image as I progress along my route. And then I can also within my app have a Google map so that way, I know how to get to the location, so driving directions to the hospital, to your campus. I also have the option within the app to save my parking location so here, I can clear my location, I can select the garage and I can select which floor and save that so now I don't have to have that burden and worry where did I parked my car, especially as you think about larger, more complex buildings and the stress that that puts on your guests. And then, lastly, based on the way points that we set up for our app we can have a directory automatically populate and show information about each location that a visitor can visit on your campus. It gives them a nice picture letting them see what it looks like so they know it when they get there, and then a short description, maybe it could even tell them the hours of a restaurant being open, for example.

Okay, so I'm going to show you how to get this off the ground quickly. Like I said when you copy the app in, it has all the pages and components that you need so here on the homepage we have our directions component. And here on the directions page, this is the component That gives you the step by step, or turn by turn directions. The app will appear blank until you add your map and your way points in the wayfinder feature so here, let me jump into this we're going to hit the edit pencil, we open up the micro service, we launched the app, and this will open in a new tab now here I have the option, I just have to pull up my files, I have the option of adding my floors I have gone ahead and added two fours just ahead so that way we can move a little bit faster here today.

But to add a floor you just hit add floor and then you can name the floor and set which level it is, and then you select the image icon and drag and drop your image into that that pop up, you can repeat the steps as many times as you need so just make sure as you're doing any kind of campus that you have the first floor for all buildings across that campus. And then, what we do is we set up our waypoints. These waypoints are where people in the end app will see the directory populate but it's also what they get to choose from this drop down so that is a waypoint. Checkpoints are anywhere, for example, that a user has to turn so here, these line by line directions, those are our checkpoints. And then floor changes are for your multi level buildings. It's where we can connect elevator bang staircases or an elevator, for example. And then the path we will connect our checkpoints and our waypoints and our floor changes throughout the building to give users the options of the routes that they have.

So let's start on the first floor. Now here I'm just going to drop my way point for the main and my cafe and let's do over here by the elevator okay. Now, you will notice that there is an alert, this is because the way point is not connected to any path we do want to make sure that all app users have a seamless experience so if a waypoint is not connected to a path it won't appear in the app, that's our way of making sure that nobody gets to a dead end.

Okay, so to set up a waypoint we add our waypoints in, then I grab the selector tool and click on my way point here. Now, I can name it and that is the name that will appear in my directory over here and then I can add in my description, “faces south towards the south parking lot” and you can add as much as you want, then I can easily drag in my image and I can either crop it or skip and select the entire image I'm going to skip you'll see the image populate okay. So, then I save that I click out, it still is alerting me just because it's not connected just yet, and I can repeat these steps for each one of my way points.

All right, so I like to start with waypoints so that way I have in my mind the various spots that are so critical for my visitors to get between. Then I want to set up any checkpoints, again, these are places where visitors will need to turn or they need confirmation that they have to continue straight, so a good example of this is perhaps right here in the middle of the grand hall. Because there's an option to turn left or right, I need visitors to know whether or not I need them to turn or, should I want them to continue and perhaps exit out to go over to this section, this is how I would indicate that to them okay. So it is as simple as then, adding in my floor change here I'm going to put that on the elevator bank. Then I grabbed my path and I just start connecting, I'm dragging my paths and you'll notice the alerts go away. There we go now if I want to move any of these points, I can simply do so like that. Here I'm going to call this my elevator. Let's call it main elevator and drag in the right picture.

Now for floor changes, when we want to connect multiple levels, what we do is we give them the same name so here I'm going to call this elevator, just simply, and then I go up to my second floor and i'm going to drop the same floor change icon grab my selector tool and I'm going to give it the exact same name and you'll notice it automatically says this floor change is linked with first floor. If you have multiple levels, you can do that if you have a very large building where perhaps an elevator bank only connects floors one through 12 and then another does 12 through 17, for example, you can give them unique names to connect those and differentiate which elevator banks connect to which force.

All right, and then we would just continue up here with additional waypoints, for example, and any checkpoint that we need and the paths that are required to get there, okay. Then you just you can continue all of those steps to connect all of your paths. To finish, and make sure that, as you saw those turn by turn directions with those nice helpful images that give a visitor confirmation that they're physically on the right path. What we do is we grab our tool here, and then we tap on each of our paths, so here you'll notice that a green and purple arrow appear.

These correspond to the to and from locations. So as a visitor is facing the main exit, the main entrance and they're exiting what image will they see versus if they turn 180 degrees and face towards the grand hall. So what I do is I select the upload image for my purple and then i'm going to grab the image for my main entrance exit there, you can see that i'm exiting the building. So we continue those steps to make sure that our to and from images are correct and then that is how we set up our paths. Alright, I don't see any questions, so the last thing we do is we click save and then we can return into the studio. Yes, I want to leave.

And you can continue to customize the app with your branding and any other additional information such as your parking options here by customizing the parking locations component. I can easily add in my garage, so and maybe it's not main, maybe it is memorial garage and I have four floors we can add those in here. And you can repeat these steps to add up to five different parking locations, if you leave the bottom empty then it's just a single selection. That would be great for like a surface lot perhaps if you have a location option under a surface lot if you have any letter section so section a or blue section that would be a good description to provide in there.

All right. Any questions I don't see any yet okay so, lastly, what I wanted to provide to all of you, after walking through how you build an app is just some of the success that we've seen with one of our customers. So we've actually partnered with Indiana University Health to help them provide a navigation app for one of their children's hospitals and in the first year of them having that app live they saw more than 5000 sessions just in that one calendar year. And they also saw that 91% of users gave the app positive feedback, with just 9% giving neutral feedback and zero giving negative feedback. So they know that this app is helping the families and the patients navigate to and from various appointments that they have. They are also able to support their multilingual patients by having the app automatically translated into Spanish based on the user's device settings, so very exciting progress for them.

I want to thank you all for joining today, if you have any questions, please feel free to reach out to Lumavate but thank you all for attending.

See Lumavate in Action

Meet with one of our experts to see how easy it is to centralize your product data, manage digital assets, and create digital product experiences. Trust us…you’re going to be wowed.