Mathew Joseph
UI / UX Designer

Re-Designing the Perspectives Tab

User Journey Mapping & Re-Design Process

I needed to combine elements from each these three tabs into a single re-design

I needed to combine elements from each these three tabs into a single re-design

The Problem:

The perspectives tab is used to render maps for different device configurations (perspectives). It was more than a couple years old and had acquired a number of issues over time: 

1. There were 3 different tabs that all held settings for perspectives. This needed to be consolidated into a single tab because it was hard to understand and navigate. 

2. The user interface for 3D rendering was the most significant pain-point in the internal team's workflow. 

3. There were several features that were either largely unused or deprecated due to product changes over time. 

I used the following steps to dive into the workflow and design a UI that best caters to the needs of users: 

  • Conduct user journey mapping sessions to fully understand the existing workflow.
  • Survey unused features across user journey. 
  • Re-design the UI to address the 3 problem points above. 
  • Conduct user feedback sessions and iterate

Journey map (top half) and unused features (bottom half)

Journey map (top half) and unused features (bottom half)

Journey Mapping

To fully understand how the current tool is used, I ran a user journey mapping session to see how the perspectives tab was currently used. This session involved participants from customer success and implementations. 

The goal was to explore current workflows and identify any parts of the UI that were rarely or never used. 

The common trends we identified included the need for the layer panel for cross checking layer visibility during re-rendering, the fact that users often need to scan and identify important perspectives and disregard old or irrelevant perspectives, and having to manually position the map within the window boundary . A common user pain-point was the small size of the map window. We also identified a number of largely unused features that could be removed in the redesign. 

Designing Mockups
User Interface Re-Design: Perspectives Tab

Version 1

This was the first attempt at consolidating all the information from 3 separate screens into one screen. All irrelevant or unused UI elements were removed or simplified, which enabled me to increase the window for the map by 3X to solve the biggest user pain-point (the map window was too small).

Feedback: I led a user feedback session to understand first impressions and they were mostly positive. One specific critique was that I had removed the thumbnails in the perspectives bar (along the top). I overlooked this as unnecessary but two users pointed out that they like having the additional context of the visual inside the thumbnail so they didn't have to read the text. I also learned that there were limitations to having the render settings in the bottom right panel due to the collapsable sidebar. I realized the interaction I had planned was not practical - so we scrapped it.

User Interface Re-Design: Perspectives Tab

Version 2

I added thumbnails back to the perspectives bar at the top based on the user feedback. This made the top bar about 1.5x bigger than in Version 1. I also tried to adjust the render settings information at the bottom but created a lot of rigidness and unoptimized space. I decided not to settle here and give it another try. 

User Interface Re-Design: Perspectives Tab

Version 3

I re-adjusted the UI elements again to optimize for screen real-estate and reached a design that I was happier with. I then held another user feedback session with the team to see what they thought. I received some useful insights from this session: 

I learned that while having the thumbnails visible when re-rendering was useful, it was not practical when doing other tasks. It made the UI too stubborn and it needed to be collapsable to easily adjust based on the task at hand. 

I also learned that the perspective boundary was not visible enough. It needed to be more obvious for first-time users and new clients. I decided to address this as well in Version 4. 

Back to the drawing board! 

User Interface Re-Design: Perspectives Tab

Version 4

I incorporated a collapsable side panel for the perspectives settings and thumbnails. This enabled users to collapse the panel when working on the map in 3D (which requires more screen real estate), but have the panel open when re-rendering multiple perspectives. After another user feedback session, we decided to move forward with this approach and proceed with development.