Indoor map editor tool
Indoor map management tool redesign for store location management on 2D floor maps
Company hyperIn
Year 2022
Role UX/UI designer
My Role
Uncover insights and translate concepts into the new redesign to gain alignment and drive decision making.
Defining information architecture and user flows
Interaction, Visual design, Prototyping
Project Summary
The Indoor Mapping Editor is where a Shopping center configures and maintains their store locations, facilities and routes so that all this information displays correctly on the websites, digital signages (kiosk) and mobile apps floor maps.
I contributed to redesigning the management tool after the original map editor was retired due to the end of life for Silverlight and IE11. The goal was to reduce reliance on customer service by enabling admin users to manage indoor maps independently, empowering them to handle updates and changes with ease.
Customer service involvement was necessary to manage map tasks on behalf of users, causing extra cost and inefficiencies. The neglected tool was complex, not self explanatory and not easy to use.
The goalRedesign a mapping tool that offers a seamless experience for admin users to autonomously and efficiently manage stores, services, and routing locations on the map
Our high level UX behaviours we want to drive:
Facilitate effortless and efficient map management
Help user feel confident by providing complete control for navigation throughout the map
Ensure ease of use and memorability to facilitate learning
KickoffDigging Deeper: Revealing current state, pain points through costumer service and feature audits
To uncover the pain points I audited the feature and collected feedback through the Customer Service team since they were responsible on managing the maps. Here’s what I discovered:
Example of the original maps editor view when adding services on the map.
In this other example, the user define the service properties. Left bar contains map interaction and draw tool. Right panel contains, map navigation, map visibility, edit and zoom properties.
What did not work well
People need to be trained in order to use the map. The setup process can be confusing and is easy to make mistakes.
Not well integrated flows and navigation. No sense of completion and not consistent with the Admin Portal patterns.
Not clear instructions on how to manage routes. A lot of guessing and exploring before commits can potentially be frustrated
Interactions with the map and tool panel feels unfamiliar.
What worked well
Map focus allows the user to visualise changes and interact with it
Drag elements on the map makes the task easy
Layer visualisation is great. It helps to place the nodes and fix overlaps.
ExploringConceptualising the new experience
I designed a task-oriented workflows that guide users to complete each task efficiently with clear instructions and sense of completion.
With the structure in mind, I started wire-framing a solution that reduce cognitive load between the navigation, the configuration properties and the direct manipulation with the map (zooming, panning, floors).
The main user actions can be found under the tab bar so it make it easy for the user to navigate
Split screen with list form allows users the ability to view and search through all of the indoor store locations and services available in their indoor map. This influenced the decision to add a list forms and modal views to give context when editing.
Iterating every flow
My process involved sketching and constant iteration with PM, developers and the domain expert involved in the project. Later, I translated these directly into hi‐fidelity designs. For each feature phase, I went through cycles of requirements, iterations, approvals, detailed specs and handoffs.
Since I was working an existing design patterns, it was relatively easy to move straight into hi‐fidelity designs. Feedback was collected through customer service team since they were the main users to discover pain points and to define a clear strategy for addressing them
Finding balance between backward compatibility and our UX strategy
During this phase, we came across certain limitations and challenges in redefining the map tool structure. We needed to be backwards compatible with the current 25 maps that were in production, so in order to continue support them, we needed to include the routing.
The challenge with routing was our Admin users would need to complete their task in different flows, leaving room from confusions or frustration. At this point we couldn’t test our assumptions. So I tried to found a solution that balance our technical constrains and our user needs.
From big picture to details
Communicating map controls and iterations in a more intuitive way was something I put extra effort. I created cohesive UI patterns that help users interact with the map confidently.
Close collaboration with developers was key to define all map interactions. The challenge here was the patterns need to fit in all 25 branded maps that were in production with different map densities. During this process I had an iterative talk with developers during implementation to make sure the colors fit for all, the dimensions and states were correct.
“Close collaboration with developers was key to define all map interactions”
Location management
The stores are displayed in a scrollable list where Admins can quickly find the tenants, or quickly select them from the map.
Adding facilities become easy
The services are shown in a scrollable list where the user can quickly find and drag any icon to the map. The list is grouped by category type, which makes easy to identify them.
The modal view gives context when editing.
Routing instructions are more readable
Directions are now easy to follow and are much more readable. The original design did not have any instructions on how to edit, add or delete the routing.
Layers visibility provide context
During discovery phase, I found that the visibility in the original design was something that users found really useful, so we decided to keep it. The different layers could toggled on and off, to gave our users a freedom of managing the map and have better sense of where to place the nodes when creating routes.
Takeaways
In this project I had to navigate through several engineer constrains and put my solving problems skills at max level to find the best design decision while balancing limitations and stockholders needs in ambiguous situations.
Besides al the challenges, I’m happy with the final result and happy that our Admin users are using this tool autonomously.