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.
