Role
Lead Designer
Timeline
Platform
Mobile
Responsibilities
Overview: Leading the industry through design & experience
Navigation in the tallest building in Hungary could be definitely hard. Searching for rooms, toilets, lift takes a lot of time. Digitalising the wayfinding is a tough challenge, but if we are going to do it great, then the synergy between people and the building will be awesome.
Let’s imagine a world, where you don’t need to go all the way around in a building to find what you are looking for. Where you can reduce the time that you spend with searching for locations. Where companies are using the latest technologies to make the navigation easier, faster and accessible. Sounds idealistic. But that’s the real world – here, in MOL Campus.
25
floors in total
120
meter tall building
25 000
employees across the company
Problem space: Finding the balance both physically and digitally
When MOL asked us to revolutionise the navigation in the tower, we have faced with multiply challenges and upcoming questions.
Designing a navigation experience required us to think of the connection between digital design and the psychical world. Some people are sitting at their desk when choosing a destination and starting to move, while they are using the application. They are constantly interacting and scanning the physical world while trying to go to their destination with the help of the application. So in overall, a navigation needs to live together with physical building and enhance the possibilities of it.
Another problem space was the accessibility. In this case, accessibility is not only means Screen Reader feature. The whole building is built in an accessible way to make sure everybody can visit the building and the design needed to continuously follow this path.
The key words that motivated us during the design process was the synergy between the people, the building and the application which led us to find opportunities that can make a difference.
Augmented reality map
What if people not only see drawn maps, but they can see their digital route represented in the physical building?
Find places effortlessly
What if people can search quickly for the most frequently visited places, such as toilets, lockers and so on?
Customisable preferences
What if people can customise their travel preferences?
Summary of design pattern research
Before starting, we reviewed popular navigation platforms. Most of them are quite complex because they cover large areas, so we focused on common patterns to design a better user experience based on user needs.
Google Maps
Filters provides hotkeys to users for the most commonly used locations and reduce the time that people are spend with searching. Filtering options also help us the adapt different life situations instead of cognitive searching, reading and choosing.
Grab
Clear route is one of the most important feature in navigation to provide the most efficient and optimal path from their current location to their destination. The end result is a visual guide of the route, usually displayed on a map with turn-turn-by-turn directions.
Uber
Searching is one of the fastest ways to find your destination. It typically starts from your current location, which can be shared or entered manually. Search often includes recent results, nearby places, and lets users save favorite locations.
Lime
Sticky Buttons and Sheets will help the users in reachability and it always leaves the most important elements on the screen. Product are operating with the same layout - a pretty big map at the top and informations and interactive elements at the bottom of the device.
Apple Maps
Estimated time of arrival helps the users to calculate how much time do they needs to arrive to their chosen destination while making them calm. As a result, the whole journey can be less stressful rather than rushing from one destination to another.
Defining the problem to solve it
The key is always defining and understanding the problems that the users are potentially going to be facing in order to solve that problem, so we tried to apply the problem space to our persona.
In order to shape the possibilities and the factors that might pull back the users to be able to achieve their task, we pushed the JTBD framework as a starting point.
Anna, the hustling professional
General Description
28 years old.
Lives in Budapest.
Employee of the Marketing Department at MOL.
Goals
Find the exact destination where she would like to go.
Always arrive to meetings on time.
Being able to use the shortest route available.
Frustrations
She communicates with multiple internal stakeholders, so her meetings are often on the opposite side of the buildings or on different floors.
She is often in a hurry and using the app while she is walking.
Behaviour
Looking for the exact meeting room she needs to be in.
Trying to find the quickest way possible.
Figuring out the stairs or the elevator due to the high traffic.
Feelings
Confused.
Desperate.
Hasty.
Getting to the solution from multiple endpoints
Creating the solution did not start in the app – we had to think wider, how to integrate the app in the Apple ecosystem, which can also help the users in their daily work, offering quality of life features such as quick access or Apple wallet.
Accessing features inside of the app
The search and the tabbar should be hand in hand, so we can offer multiple paths to the users to find their needs, so we introduced different ways to access features in the app.
Dynamic bottom sheet: See and control everything
With the introduction of a sleek and dynamic bottom sheet, accessing the search bar can be quick and easy. We designed it in a explorer way, where they can do more than just search – access their last visited or frequently visited places, add favorites and see their upcoming events.
Traveling preferences are as unique as the individuals themselves. Some folks might have a
fear of using the elevators, while others may have disabilities that make stairs inaccessible. We introduced a button where users can select if...
they would like to avoid elevators.
they would like to avoid stairs.
they prefer using an elevator instead of the stairs.
Naturally, if “avoiding stairs” are set, the preferred traveling method will be the elevator by default.
Route planner: Empowering visual and cognitive load
The challenge of presenting results and displaying the route to a user's destination involves both visual and cognitive considerations. It is important for the user to quickly understand the layout and for it to be visually appealing. To avoid frustration and surprises, we include the following data to put the control into the user's hands.
Distance
Elevator usage
Floor change
Start and endpoints
Clear start CTA
Displaying the route: Both accessible and easy to understand
When a user initiates the direction, we rotate the camera angle from a first-person perspective, placing the user at the origin of the screen. This creates a sense of realism, as if the user is viewing the environment from their own point of view. To prevent accidentally tapping the "Stop Route" button, an expandable button was added next to the detailed info. Upon clicking this button, the "Stop Route" option becomes visible at the bottom of the screen.
Dynamic Island
& Live Activities
Multitasking is a common occurrence in the workplace, and we aim to support this through innovative features. Switching context between apps is really frustrating, so we can easily display multiple types of information in front of the users. With the live activities feature, you can easily keep track of important information while multitasking.
We held a workshop with designers, experts and developers to discover the possibility of bringing AR into the application. We chose a hopes & fears workshop which led us to understand the opportunity of AR navigation.
Apple ARKit*: The technology that solves our needs
*ARKit is a framework developed by Apple that allows developers to create augmented reality (AR) experiences for iOS devices. It was introduced in 2017 and is integrated into the iOS operating system. ARKit also provides features such as plane detection, light estimation, and object detection, which makes it possible to create AR experiences that are more immersive and interactive.
The SwiftUI RoomPlan API was introduced at the WWDC2022 Conference, that utilizes the camera and LiDAR Scanner on iPhone and iPad to create a 3D floor plan of a room, including key characteristics such as dimensions and types of furniture. It was a great opportunity to go through the whole MOL Campus with a LiDAR Scanner and get a detailed map in the building to create a generally new experience in the navigation.
Pattern summary: Reviewing the giants
Back then, reviewing AR map applications was pretty limited because there were only a few of them. We highlighted Apple Maps and Google Maps as the biggest fish in the industry and reviewed their patterns to learn from them and we were able to discover what is needed to be displayed on the screen.
3D navigational elements
Arrows, street names, directions are often displayed as 3D elements on the screen
Keeping the direction on the screen
Apps are keeping the directions of the screens even if it is displayed on the AR maps
Toggle between AR & traditional maps
Users are able to switch between the maps by using a button somewhere on the screen
Navigation with augmented reality
To detect the users’ location, we are using AR beacons, which can precisely get the information if the user is navigating or not. While the users are walking with the help of AR, they visually see 3D arrows, turn-by-turn directions which can guide them in the building. On the right side, users can switch between the traditional and the AR map as well.
As people approach or are in close proximity to an elevator, the AR beacons can detect their presence and provide assistance by informing them of the appropriate floor to reach their destination.
This project was one of my most challenging undertakings, both visually and technically, but ultimately resulted in an excellent outcome. I enjoyed working on this project immensely because it successfully bridged the physical world with a digital product.
I learned a lot during the journey, such as how the iterative collaboration can be really effective with development teams, and how important it is to think outside of the box, while having a well-maintained MVP.