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.

All images and diagrams used to create this project page belong to Autodesk Inc. 

© 2015-2018 by HIMANSHU RASAM. All Rights Reserved.