MAPCALL REDESIGN

Role

UX/UI Designer

Client

American Water

Year

2023

UX/UI

OVERVIEW

After the completion of the ‘VAMP’ project for our client, American Water, they reached out my team again to redesign their internal maintenance management system titled ‘MapCall’. MapCall was a proprietary web application that their employees would use to manage work orders, permits, compliance, and other administrative or operational tasks pertaining to their facilities. They wanted to keep most of the functions the same but give the application a complete visual overhaul and match it to the aesthetics of the VAMP application we built.

JUMP TO FINAL PRODUCT

ROLE AND DURATION

I was the only UI/UX designer on this project and was responsible for the full visual refresh of the application. They wanted to keep most of the functions and button locations relatively the same, but I was given the freedom to change any of the visual aspects of the interface in order to deliver the information more effectively.

The client reached out to us about this project in early 2023. We decided to start with the ‘maintenance planning’ interface since it was a simpler page and didn’t require any major feature overhauls. We had a couple of meetings over the course of a few weeks and I finished this preliminary redesign by the end of that same month. These screens were meant to serve as a proof of concept for what the MapCall app would look like going forward.

THE ORIGINAL DESIGN

THE LAYOUT

The image to the right is a recreation of what the original layout of the ‘Maintenance Plans’ section of the MapCall application looked like.

The original MapCall design featured a basic dashboard layout with a left navbar that would direct the user to the major functions of the app. Each tab had a dropdown of links to more specific pages or tasks within that category. Most pages often consisted of a header followed by a horizontal navbar of page-specific functions that would either display static information or a series of textboxes and input options that would allow users to create or update information.

THE PROBLEM

The biggest issue the client had with the current layout of the platform was the amount of wasted screen real estate. On many pages, users would have to scroll down for a long time just to be able to view all of the necessary info due to the excess of whitespace. The scrolling layout also made editing the plans feel tedious because there was no easy way to jump back to the top or switch between pages.

PLANNING + DRAFTING

To start this redesign, I focused on brainstorming ways to efficiently display all of the data on one screen and eliminate scrolling while still having them separated by their respective categories. Coincidentally, there were four major categories: Plan Information, Task Information, Facility Information, and Scheduling Information. For this reason, I thought it would work well to essentially recycle the design I used for the ‘Analytics’ page of the VAMP platform since we were trying to make them more aesthetically similar anyway.

VAMP ANALYTICS OVERVIEW LAYOUT

The idea was that this ‘snapshot’ layout would enable the user to simply look at the box of information they needed instead of having to dig through the page to find it. By keeping all of the information contained to well defined workspace, I also felt like it would help the platform feel more like an application and less like an outdated website.

Another thing I felt needed to be improved was the amount of color contrast. While it was highly visible and aligned with the colors of the brand, it was simply too distracting and made it hard for the user to focus their attention on the data. I decided it would be best to limit the color palette to the same spectrum of blue, white, and gray that we used on the VAMP platform to unify the platforms and save bright colors for elements that required the users attention.

05

RESULTS

By the end of the year we were able to finish and launch a fully functional versions of both the web app and iOS app, albeit with a few features still a work in progress. We had planned to continue working on the platform in the following year, but the contract was cut short due to funding issues on the client side.

Unfortunately I was unable to track usability metrics since the contract ended before employees got to start using the platform. That being said, I would have liked to track things like the average task time of tour creation and the completion versus error rates of the tours in progress to see how effective the workflow was.

For my first virtual reality related product, I think I learned a lot of valuable lessons about designing efficient workflows and working with feedback from clients, supervisors, and a development team. This experience especially taught me how to use color, spacing, and hierarchy properly across multiple devices to improve focus and make the interface accessible to a broad age range.

FINAL SCREENS