Panorama Enhancements
Improving the overall UX of a project tracking web-app and updating the design system
Project Details
Company
VMware
Duration
1 month (2021)
Team
1 PM, 1 designer, 2-3 devs
Main Skills
UX, UI, Design system
Enhancement 1
Listen to User Feedback
Changing units to match user mental model
Panorama is a web-app for managers to track direct reports’ working hours on specific projects. From user feedback , we realized that managers thought in percentages, not hours. “Rebecca spends 80% of her time on Project A” made more sense than “Rebecca spends 32 hours working on Project A”.
Thus, we needed to add this setting into the app and find a way to alert managers in-app of this feature.
The setting, when clicked, would open the following popup.
In addition to adding the feature, we needed to make it easily discoverable for busy managers. I presented the following three options.
Designs and Their Alternatives
Option 1
Upon login the next time, managers would see a popup prompting them to update their settings. While this idea has good intentions, this popup feels intrusive since it prevents the user from being able to access the interface behind it.
Option 2
Alternatively, upon login the next time, managers could see a popover informing them that they can update their settings. The only question is, how would they know where to go?
Option 3
The third idea was to display a persistent banner until the user selected a particular choice. I liked this option, but it didn’t reveal where the user had to go to update the settings if they changed their mind.
Final Design
Ultimately, I combined options 1 and 2 with each other. The popover didn’t feel as intrusive as the popup, and it hints at where they might be able to find the setting again.
Tracking Metrics
Success indicated through metrics
Between Sept 1 and Nov 30, 2021, when we released this, 410 people chose percentages, while 392 people chose to stick with hours. There were 944 people who dismissed the capacity prompt upon login. However, out of those, 285 opened the user menu, 69 clicked “change preferences”, and 41 people changed their preferences. Our experiment was a success, because there were people who did dismiss the popover upon first login and needed to return there.
Enhancement 2
Real-time Feedback
Adding Toast Notifications to Provide Real-time Feedback
Our users also mentioned that they never knew if the changes they made in our application were saved or not. As a result, we decided to add toast notifications for certain important tasks.
And finally…
Enhancement 3
Design system enhancement are important to improve the efficiency of the design team so that they can deliver mockups faster at a higher quality.
Tables
Making Table Creation Easier
Tables are notoriously time consuming to build from scratch, so I wanted to build components so that making tables is easier. I started by doing an audit of all the tables that existed in our web application and categorizing the different types of tables we had.
Then, I made individual table cells components, added variants for different types of data, and then compiled them into a column component. That way, designers could add as many columns as they wanted to in a table without having to edit each individual row (as they would have to if they made rows components, instead).
This is an example table I built with the components I created.
The table components were well received; the other designers on our team remarked at how simple it was to build tables now.
Selection Methods
Creating Radio Buttons and Checkboxes
In addition to tables, I remade our radio buttons and checkboxes so that people could switch seamlessly between them, if need be.
Contextual Menus
Simplifying Context Menus
Finally, I made three context menus to add into our library, as this component was a key interaction point in the UI.
Learnings
Takeaways
We are still evolving the design system as we speak. I’ve learned a lot, especially how to construct atomic variants to build larger components, which I hope to employ at a smaller startup! Always learning, always evolving.