top of page
Tapestry Tool
Adding new dimension to a collaborative, multi-modal learning platform
Role
Primary Product Designer
Scope
Prototyping, Usability Testing, Component Systems, Interaction Design, Illustration
Tools
Figma, Qualtrics
Overview
Tapestry Tool is Microsoft-funded online platform that allows users to interact and collaborate with multi-media content. Ideas are presented as nodes, which connect and branch out to form a Tapestry, similar to the way neurons connect in the brain. Tapestry Tool has been used by many students and educators, but the interface needed a more intuitive way to represent depth and hierarchy.
My challenge was to design an interface with visual depth cues and gestures to help users build and navigate their Tapestries with ease. As the primary product designer, I created interactive prototypes, conducted usability testing, and designed a library of icons for the interface. I led the redesign of Tapestry Tool's navigation and authoring experience to create a seamless, intuitive transition from a 2D interface to a more dimensional one that enhanced the hierarchy of ideas in a Tapestry.
Approach
01 Ideate
Starting off, I explored ways to visually represent 2D and 3D interactions in the same space, making sure to keep ideation parallel with the existing interface.
02 Examine
I worked with the UX researcher to perform usability tests on different visual depth cues and determine where there was room for improvement in our navigation experience.
03 Refine
Once the most intuitive depth cues were established, I refined the interaction design for navigating through levels within a Tapestry.
Successfully implemented into health research, tech, virtual education, & more
Students, professors, researchers, and organizations across Canada have used Tapestry Tool to present complex concepts in a visually appealing way. The new interface has also made a positive impact on virtual learning experiences, providing an accessible, engaging way to interact with multi-media content.
Initial sketches for building connections & hierarchy
During the ideation stage, I experimented with ways to enhance visual hierarchy when building a tapestry. I aimed to create a sleek, seamless transition from Tapestry Tool’s previous interface to one that shows more of a multi-dimensional perspective. I focused on connecting ideas across various levels of hierarchy.
I sketched out 2 potential interface layouts that provide users flat and dimensional perspectives to build their tapestries based on level of specificity. On the left, there is a stack of 3D levels that act as a guide for users to create hierarchy among ideas. On the right side, levels are displayed as a slideshow above the tapestry. For inspiration, I looked to video game UI and physical interactions in space, like elevators and the game Jenga.
Visualizing interactions between levels of depth
I created prototypes based on the level stack map design since it was the most intuitive layout to represent levels of depth among ideas with their hierarchical structure.
Dual perspectives shown in this interaction support a smoother transition for users who are familiar with using the previous interface.
Exploring visual indicators of depth within 2D spaces
A/B testing combinations of visual depth indicators like shadow, size, and brightness provided valuable insight into users’ natural perceptions of depth within a 2D space.
1. Size Only
2. Shadow + Size
Users preferred this as the most intuitive visualization of depth
3. Brightness + Size
4. Brightness + Shadow + Size
During moderated task-based usability testing, users also preferred shadow and size as the primary visual depth cues. Across the board, participants were able to grasp the hierarchical relationships when interacting with the prototypes. Without any previous context of using Tapestry Tool, the participants understood that the specificity of nodes increased as the nodes became smaller, while larger nodes housed broader information.
Refined 3D zooming interactions in motion
In the new zooming interaction, I designed a UI system with dynamic shadows, node links, and node sizes to communicate hierarchical relationships with more clarity. Users are able to navigate through complex, multi-layered concepts with ease.
Previous 2D Interface
Redesigned 3D Interface
Supporting navigation with level indicators & mini map
The final interface is designed with a 3D level stack, which indicates where the user is oriented within a Tapestry’s hierarchical structure. On the bottom right corner is a mini map, showing where the user is zoomed in on a 2D plane.
Mini Map
3D Level Stack
Seamless authoring within a multi-dimensional space
Improved toolbar designs make it easy to visualize ideas and make connections within a multi-dimensional space. Users are able to quickly switch between detailed editing and navigating to see the rest of the Tapestry as a whole.
Connection links taper to show hierarchy between associated nodes / ideas
More Projects —
bottom of page