UX/UI Design | August, 2021
User Research, Definition & Ideation, Wireframing, Prototyping, Usability Testing
Figma, Cacoo, Maze, MS Word
Users reported problems with the Premise Utility feature in the CAD Enterprise product such as not being able to search a map while adding a master premise location, quickly adding sub premises, searching on a map for existing premise locations and adding premise locations that are different from the routable location.
Update the User Experience of the Premise Utility tool and integrate ArcGIS map functionality so users can easily create and manage master and sub-premise locations.
Our users were 911 Dispatchers working for Emergency Services agencies all over the United States. Dispatchers use this "Premise Utility" tool to define data for locations (premises) that officers will respond to within the department's jurisdiction.
For example, the Mall of America is a 'Master premise' while a Nordstrom's store would be a 'sub-premise' location. The physical location of the Nordstrom's store will determine where exactly the responding officer's vehicle will arrive. If the sub-premise is on the North side of the building, but the officer's arrive at the South end, it would delay their response time to the incident location. Therefore, accurate Master premise and sub-premise data is very important.
The original Windows Presentation Foundation (WPF) interface on the left above illustrates the multi-step, data entry intensive process users were forced to execute when adding Master and sub-premise location data.
While users did have access to an older VisiNet map in the existing interface, it was low resolution and map memory was restricted to 2GB which meant users couldn't search the map for premise locations and instead had to enter all information from scratch resulting in an error prone and time consuming process.
My Design Process
This project provided an opportunity to define the product design process flow for the cross-functional teams I was working with. Working with my UX Design pair, our goal was to create a reference guide to develop an efficient, cross-functional team workflow. The timeline below represents an ideal product design process flow from inception of a design feature through to completion along with actions to take in response to unplanned events.
This is not an exhaustive list of tasks for each department, but rather a high level outline of the critical methods used to capture user feedback and input from all Product Teams to integrate into design solutions through the collaboration process.
Several product team kickoff meetings took place to discuss the backstory of the feature, its requirements, and the expected design delivery time as it had been scheduled on the product roadmap.
From there, my UX design pair and I coordinated on the research plan. Some research had already been done by a previous design team and some was incomplete. Since this was a feature upgrade to an existing product, we reviewed the existing research first to determine if more was needed.
Usability Testing - 1st Round Prior to Design
UX benchmark usability tests had been performed with three agencies using the premise utility feature on the legacy system. Users were asked them to add a master premise and several sub-premises and their answers were documented. The previous designers had not sorted the answers after the interviews, so we grouped them by system function category using an affinity diagram. This provided valuable information to consider when building the premise utility workflows.
User Pain Points:
- Difficult to find exact premise location using latitude / longitude
- Hard to use as a stand-alone feature outside of rest of the system
- Can't add routable address not associated with premise
- Can't see sub-premises when viewing the Master premise, but can see Master premise when viewing sub-premise
- No option to batch add sub-premises
User Wants & Needs:
- A way to search a map and click a point to add a new premise location
- Ability to relocate a pin on a map to move to a new premise
- Ability to add a routable address not associated with a premise, e.g. a large tree or other landmark
- Batch-add sub-premises
UX Workflow Diagram
Based on our research, we worked with the Product Manager to map out a workflow diagram to visualize our proposed solutions. We identified three flows to create for users in the new premise utility tool. To add a premise location, users could:
- Search for an address in a search box and choose a verified address
- Click a point on the map and be able to move the pin if needed
- Draw a boundary area on the map to see existing premise locations
After we established our primary workflows, we identified any UX and technical questions we had concerning each step in the flow and met with developers and SME's to get answers. Several technical constraints surfaced from these questions such as whether we could use geo-verified addresses, how information is called from the databases, as well as how the system assigns certain data to premises.
With our assumptions and constraints defined, we moved on to brainstorming visuals using a collaborative white-boarding tool the whole team had access to. We were sure to meet often with our PM and developers to discuss and share our proposed solutions and get feedback.
Here, the user flow began to take shape with our user entering premise information into an input form on the left side of the screen while seeing that information update in real time on a map on the right of the screen. The form was an existing design pattern currently in use in our product, so we chose to implement it here to avoid tasking the user with learning a new pattern.
With a better understanding of our proposed solutions, we moved on to creating lo-fi mockups. A lot of our design challenges came from the technical constraints associated with our proposed solutions to users problems. Our proposed functionality was similar to other existing map applications, but due to the way our backend systems were constructed, we kept running into technical roadblocks with implementing our designs.
As a result, our proposed flow of a user being able to draw a boundary area to be able to see existing premise locations was removed from this feature due the difficulty in implementing it with our current system configuration.
After coming up with design solutions for as many of the technical constraints as we could, we incorporated all of the feedback from internal stakeholders and SME's into a high fidelity mockups and prepared a clickable prototype for users to test.
Due to time constraints, the decision was made to perform unmoderated user testing. We prepared a test script with 3 objectives and various tasks, then emailed the test link to 18 test participants who were members of our existing participant pools at 4 different agencies.
Our goal was to test how easily users could:
- Get to the Premise Utility tool by searching an address and adding a premise
- Change the routable address on a map to a different location
- Interact with the form fields and whether necessary information is presented
We showed users a map view and asked them to find a specific address, add a Master premise to that address and give it a defined name. As the overall task results on the right shows below, 83% of users had direct success with this task while 17% came to indirect successes with a mis-click rate of 5.3%.
This data, along with the heatmap below that shows a low mis-click rate of 12.5% for the map interaction point where users need to click to add a premise, gave us confidence that this task flow was easy for most of the test participants to complete. The average completion time was higher than we would like, but this is understandable when comparing the new design to the previous existing one.
Task 1# Heatmap
We showed users a start screen with a premise already assigned to a location (shown below as the larger pin on the 'Mall of America') and a routable location (shown below as the smaller pin with a dotted line connector). Users were asked to relocate the routable location (smaller pin) to the north-west part of the mall, assuming that the top of the map is north.
As the overall task results on the right above show, only 50% of users had direct success with this task while 33% came to indirect successes with a mis-click rate of 50%. The heatmap for the start screen below confirms that users were unclear how to complete the task. We noted this as a design flaw that we needed to revise in the next iteration.
Task 2# Heatmap
To evaluate the form fields and whether all of the necessary information is presented to the user, we showed users a partially filled in form and asked them to confirm all fields had the appropriate information in them and save the form when finished.
As the overall task results on the right above show, only 42% of users had direct success with this task while 50% came to indirect successes with a mis-click rate of 50%. Based on the follow up questions there seemed to be some problems with the functionality of the user test itself as some elements such as the 'Save' button didn't work when users clicked on them yet that's how the prototype was setup.
We noted this as a design flaw that we needed to re-test during the next round.
Task 3# Overall Results
After synthesizing the results from the user testing we identified what worked for users and what didn't and prioritized redesigning the user flows test participants had trouble completing. Specifically, changing the location of the routable address task and the interaction and functionality of the form field.
Testing made it clear that users were not used to interacting with maps to complete these types of tasks — which makes sense as they haven't had access to them in previous iterations of the software. We considered adding walkthrough tutorials to help guide users through a new experience as well as setting up training sessions with Administrators and Dispatchers to familiarize them with the new interface.