Mapping Beyond

Product Design

Context

This mapping tool is used internally by employees to help them with the development of new industrial buildings across the country. This tool was currently already in existence by the time I arrived at the company. This gave me a fantastic opportunity to have fresh eyes on the interface. Where it lacked in some areas of UI, it made up for innovation and genius by those who came before me. This tool could integrate with a CRM and give every detail of a property, parcel, and competitive site in the country. Overlays, site maps, filters, layers, and access routes, are just a few features that could be added to each experience. It truly is a one-of-a-kind product, and it presented an exciting, yet formidable challenge. My role was to work alongside the existing stakeholders and project manager to forge new ways to implement complex conceptual features that end users find easy to execute.

The Problem

The platform UI was becoming inconsistent, and we needed to integrate an old platform into this updated tool—all the while integrating new conceptual features based on current needs. My focus was less about the elements on the map and more on the shelf elements that control user inputs/interface features.

My Role

Product Design
Research
User Interviews

*disclaimer* I am unable to give a complete explanation and a full scope of visual elements due to internal intellectual property

Research

Before I started doing any designs, I conducted internal user interviews with some of the top users in the company of the existing software. My main goals were to understand what each of these people uses the tool for, how it impacts their work, and what they would like to see improved/added in the future.

What I learned is that there were many different people, in many different positions that use the tool daily. From leasing agents looking up data as a framework for new contracts, development managers researching parcels to find new plots of land to develop on. Up to the CEO, and other C-suite members using it as a presentation tool to secure large investors. In a nutshell, everyone in the whole company uses this tool. This made scoping out a specific user group difficult since these features serve so many different aspects of the business.

My initial research yielded some great results and gave me good insight into what the users of this tool value:

Speed - the number one thing users loved was the speed of the tool and the ease of navigating the features they needed.
Some parties were afraid with the addition of many new features, the tool could become overwhelming.
Features such as a Google Places layer, tooltips, and parcel boundaries, were at the top of the feature request.

I found that there is not much competitor analysis to research due to the niche nature of the tool. There aren’t really any other tools out there like this one, especially open source. The closest types of interfaces like this one were Google Earth and Google My Maps. Leaving me in a place of innovation to create something we’ve never seen before.

Site Map

One of the most interesting parts of this project is that the site map is never actually complete. The project manager and dev teams had decided to do weekly sprints, with corresponding releases of new features. This means that we were constantly growing the tool, and adding new features weekly. This provided me with the unique challenge of always making sure that the product flow was remaining consistent with the precedents we had set before.

This is where the site map stands currently:

This means that the tool could really be limitless depending on the ever-changing needs of the users. Meaning I always needed to be keenly aware of each decision that was being made and how it could change the product one way or another.

Wireframe

I decided that a UI overhaul would be a good direction to go, specifically with the tool selection. I decided to add a self-contained fly-out shelf so that the tools could live in a central location. This allows users to obtain a sense of consistency on where they could expect input fields and certain interactions. The integration of the old layers/reporting tool into this one solidified this decision for me. Merging another mapping tool into this current tool presented the challenge of consistency, and trying to save real estate on the screen so that the map would not be overshadowed was a premium force for this. The shelf was the best option to contain all of these elements.

Style Guide

This style guide was the basis for the entire design file and its corresponding components. All of the colors, text styles, icons, and components were set up to make for an easy drag-and-drop build.

As more components were needed, more were added to the guide. Material Design guidelines were chosen to give a common UI language moving forward. Material Design was incredibly handy when questions would arise, or when it seemed an iteration was leaving our scope.

Iterations

The biggest challenge I faced on this project was that every feature was very conceptual. There was not any other open source mapping software that was adding the features we were. Each feature was conceptual at every stage. My design process morphed into creating multiple iterations of the same feature to bring to the stakeholders and the project manager for our weekly meeting. From there the team would decide on a design direction and finalize the interactions. Many times we would have to reconsider new interactions due to the iteration phase bringing out roadblocks. This greatly improved my ability to see small interactions that had large implications.

At times, I had to push back on what I believed was the best direction for the tool. I didn’t always agree with a certain decision the team was trying to implement. One of the biggest lessons for me in this entire project was sticking to what I believed was the best direction to go, while also taking in the opinions of others on the team. Using my stakeholders, PM, and dev team as a resource was important for me throughout each phase. When a team comes to agreeable conclusions in order to keep making progress is when a project can flourish.

Mobile Considerations

A large portion of this is also the mobile aspect of this tool. Many times users were in the field, or the airport and needed to look information up. Picking and choosing what to condense down; how to take this large amount of data, and large UI elements to fit on a tiny phone screen was quite the task. Luckily, my dev team was fantastic at helping me to tag the important elements, and what would allow them the greatest chance of success in the building stages.

Final Designs

Unfortunately, I’m not able to fit all of the artboards in their entirety into this section. To give context, there are over 150+ artboards in the file for what had been created. This number will continue to rise as the tool continues to grow. Using previous user interviews that I conducted helped build a roadmap in each design phase. Consistency of the interface, as well as creating simple interactions at each state drove my processes. These designs were built to be pixel-perfect for the dev team to have a smooth build process. Prototyping each of these interactions gave an easy flow from one interaction to the other.

Filters NP Buildings Filter Building Size Parameters – 26

Layers Labor Score 250 Open Status Bar Active

Filters NP Buildings Filter Building Size Parameters – 13

This project was a beast to learn, and a fantastic challenge to my product design skills. I was very pleased with how it is all coming together, and the contributions I was able to make.

User Interviews

Recently, the project manager and I decided to do some follow-up interviews with some of the top users to see what progress we had made. Results were glowing, and everyone was very excited about the tool and its new features. Many people only use one or two features, but with varying needs, every tool is widely used throughout the company. Users were pleased with the UX of the site, and less worried about overwhelming feature adds than before. The great part about these interviews was the creative features that people wanted to see next. Giving the users a voice, and opportunities to be invested in the tool was great for overall feedback.

This product provided many challenges in all design process phases. Learning the tool and what different employees used it for was a large undertaking in itself. Mixing in the convergence of an older tool into the interface in the early months of the project gave me a whole other twist. Due to this, I was given a great opportunity to take more ownership, and problem-solve even further.

One of the best pieces of this project is it will be ongoing for many years. The number of features to add, and build upon is truly incredible. The power that team members had while using it made it a really great project to be part of.