top of page
Tapestry Header.png

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 an interactive learning platform that helps users interact and collaborate with educational content in a Tapestry. Developed at UBC, the tool is used by students, educators, and researchers, but the interface wasn’t quite visually representing the association of ideas in the most intuitive way.

My challenge was to design an interface with visual depth cues and gestures to help users build and navigate their Tapestries with ease. 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 to enhance 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.

Ideation

Experimenting with different blueprints, I visualized Tapestry Tool’s interface transition from 2D to 3D. In my initial sketches, I focused on the authoring interaction of connecting ideas and organizing them in a hierarchical structure with visual 3D aids to guide users.

Authoring Ideation
Authoring Ideation

Usability Testing

A/B testing and task-based usability tests provided insight into users’ expectations when navigating the interface. I worked with the UX Researcher to test size, color, shadow, and brightness as cues for physical depth and hierarchy within a tapestry.

Size + Shadow Prototype

Size + Shadow + Brightness Prototype

Users preferred shadows as the primary visual cue for communicating depth.  

Solution

Incorporating user feedback from testing, I refined the design with varying opacities of shadow to represent depth in a multi-level Tapestry. Referencing physical shadows, I created a linear system for shadow intensity that flows with the zooming animation.   

Key Features

Seamless Authoring 

Improved toolbar functions make it easy to visualize ideas and make connections.

Interface flexibility allows users to quickly switch between making node-specific changes and navigating to see the rest of the Tapestry.

bottom of page