VAMP CASE STUDY

When I jumped on the project in January 2021 as a UI/UX designer, my initial task was to refine the overall visual design and consistency of the existing mockups. Later in the project, I took on more of a lead role and began working with the client directly to establish the rest of the user flows and guide the design language for the platform. Additionally, I created vectorized maps of some of their facilities for use within the platform to build floor plans.

The planning, design, and development of the platform took place simultaneously in phases over the course of a year. We tracked progress through Jira using sprints and held weekly meetings to iterate on the designs with the client.

To get inspiration for this project, I searched for other platforms that were using 360 AR/VR technologies in enterprise or construction settings. There were not many examples available at the time, however, I found two companies that provided similar features to what we were trying to accomplish with VAMP.

Following my research, I had a better understanding of the approach I should take to designing the experience for VAMP and especially what to avoid. It was clear I would have to stick to simplicity as a whole, but still provide spaces in the interface where more granular data could be provided when necessary. With these things in mind, I began drafting my redesign of the dashboard template.

From what my team described to me, it sounded like intuitive page navigation was going to be crucial for the platform so I paid a lot of attention to the sidebar.

Borrowing from the template, I liked the idea of a collapsible sidebar with nested options and room at the top of the page for actions the user should always have access to. However, the current design felt very dated so I wanted to modernize it by reducing the amount of color contrast, unifying the iconography, and increasing whitespace to let the page breathe. Blue was an easy choice for the color scheme of the platform since it was a water utility company.

Additionally, I provided them with a style template to select some colors I thought would work well together and establish a unified aesthetic for the platform going forward. I also proposed an alternative logo that I felt would be easier to see and fit the futuristic look of the app but was later informed the duck was already a final decision (oh well).

One of my first assignments was to refine the dashboard which served as the main communication area for the platform. The client stated that they wanted a better way to organize tasks by their status and quick-glance at more information.

I began by removing the ‘My Notifications’ area since I felt it was redundant and replaced it with a right sidebar that could consolidate the expanded details and communication features requested by the client. In order to make progress tracking the focus of the dashboard, I implemented a tabbed layout that acts as a filter for each status and allows the user to easily see how many tasks are at each stage. I also tried to improve the visual hierarchy by using different font weights, colors, and consistent spacing.

After some revisions, we decided it would be best to keep the ‘My Notifications’ area as an expanded homebase for the notifications shown in the bell icon in the navbar. Since a sidebar was now no longer an option, I brought back the popup window but redesigned it into a single scrolling layout with more space for content. We also chose to remove the chat feature since Microsoft Teams was already the preferred mode of communication between employees. Instead, the client opted for simple approval system that would allow supervisors to quality control submitted content.

Additionally, we received feedback that when all the tasks were displayed together in the ‘All’ tab that the colored status bubbles were too distracting. I solved this by using left aligned colored rectangles could more subtly communicate the current status while still being the first thing the user sees when reading each task.

After finalizing the features for the dashboard, we turned our attention to the ‘Home’ page. The Home page was supposed to serve as a way to glance at the overall capture progress of the properties in each state and allow the user to see all of the available facilities when clicking on a location.

Before continuing to redesign the rest of the pages, I felt that it was important to establish a more consistent styling pattern to improve visual harmony throughout the app going forward. While I thought the gray space worked well to separate the content area from the header and sidebar, a lot of the elements were clashing especially since the sidebar was plopped into an existing file. I revised the layout to free up whitespace, frame the content area properly, and soften all of the elements so they matched. I also changed the typography to follow a more predictable hierarchy.

These changes were implemented on the dashboard as well and helped establish a design language for the entire platform going forward.

Once we nailed down all of the features requested by the client for the virtual tours, we started by making a user flow of all the actions needed to successfully create one.

After that, we proceeded to group those actions into steps that could be completed on the same page. We decided that there were four major steps that a user would have to complete before submitting a tour for stitching and publishing:

After we finished organizing the requested features into separate pages with the client, my co-worker drafted the initial mockups to create a framework for the tour building workflow. These screens served as our starting point:

Once a basic workflow was established, I was tasked with redesigning each screen with the new design language in mind. I began by unifying the background framing, rounding out all the corners, and cleaning up the spacing to make sure different features were properly grouped or separated. My goal was to contain all of the elements to a single work area and minimize the need for scrolling as much as possible.

After reviewing the first iteration with my team, we quickly realized that there were a few fundamental UX problems that needed to be addressed before we could continue refining the rest of the pages:

While the new search bar was cleaner and visually different from other buttons on the page, we failed to fully consider where results should display and how those results should redirect the user when selected. The current location also wasted a lot of valuable screen real estate for more important functions and was simply not necessary in several workspaces.

Additionally, the client requested an advanced filtered search feature where users could find specific assets or media associated with a particular location or ID number.

I started by reworking the search bar again and added it to the very top of the screen so that it was fully outside of the work area. This made searching universally available to the user and not function-specific to the page they were on.

Since there were only two pages that required advanced searches, I created a filtered search UI that could be reused and dedicated to the needs of those pages. This way, the main search bar could default to the facility search page and more granular searches would redirect you to one of the two advanced search pages.

After some feedback, I was told that the filter box took up a lot of space and that the bubble style search results couldn’t display enough data. The colors also became a nuisance when displaying a lot results. I decided to borrow the same drop-down element I used in an earlier design and a simpler nested results list which solved both of these issues.

The facility floor plans were a crucial part of the platform. Not only were they an important visual representation of the layout of each facility, but they also served as the landing page and primary navigation method when viewing a facility on the iOS version.

In the early planning phases of the Facilities tab, my team decided with the client that it was important for the area labels to be easily readable, to stand out visually, and to be easy to press whether the user was in a browser or on a tablet.

For this reason, they went with a simple, translucent green bubble button design that made it easy to drag and drop names onto the floor plan and still see what was underneath.

While this approach was very straightforward and easy to develop, we immediately noticed some issues during testing:

I was asked to come up with a new floor plan UI that could solve both of these issues without increasing the development time too much. I provided these two options: