HIMANSHU RASAM
Product Manager
Tree Navigation Research
Project : Collaborative
Role : User research, UserTesting.com, Qualtrics Survey, Un-moderated research
Summary
One of the popular design components in many of Autodesk's products is the Tree Navigation on the left side of the screen. It stacks the elements existing in the canvas in a hierarchy. As we moved towards a single design system, we needed to get a check on various attributes of that component such as contrast, line spacing, hover states, selected states etc. We created multiple variations for an un-moderated round of testing with over 150 stakeholders ( internal designers as well as end customers).
The mock-ups were created by the lead visual designer and the interactive prototype were collaboratively generated using InVision. The tasks and the test was distributed using UserTesting.com.
After we had narrowed down options, we used Qualtrics for the next round of research to get a quick feedback from stakeholders.
A. Tree Navigation Design Variations
Fig 1. Light theme with different contrasts
Fig 3. Variations in Hover states for Light theme
Fig 2. Dark theme with different contrasts
Fig 4. Variations in Hover state for Dark theme
B. Survey Results
After the initial round of research and feedback from our stakeholders, we moved to iterate the many design variations into 3 final ones. These were sent out in a form of a survey to internal stakeholders.
For the dark theme, we had a clear winner. But for the light theme, we combined the characteristics of design 1 and 2 to create a final version.