.... Torus | Janet Xie
top of page

back

Torus Interactive Tutorial:

An Onboarding Experience 

Target Audience

  • Users who are interested in using Torus as a course design tool.

  • New employees at Open Learning Initiative who work with Torus daily.

​

My Role

I am the Full-Stack Instruction Designer and Subject Matter Expert(SME) for this project.

Tool Used

Figma

Visual Studio Code

Camatasia

Google Doc

?

Problem

The existing Torus onboarding materials were difficult for new users to navigate effectively due to several issues:

  • Long, Single Video Format – All onboarding content was condensed into lengthy video tutorials, making it time-consuming for users to locate specific information.

  • Scattered & Unstructured – Instead of a centralized learning hub, materials were listed as separate YouTube links on Torus website without clear categorization or integration.

  • Lack of Interactive Learning – The static video format did not allow users to engage with Torus in a hands-on way, making it harder to retain and apply knowledge.

As a result, new users often struggled to find relevant information quickly, leading to frustration and inefficiencies when learning to author, publish, and manage courses in Torus.

?

Solution

To address this challenge, I designed and developed a fully interactive, clickable tutorial system that walks users through Torus step by step, mimicking the real authoring environment.

Key Features of the Solution:

  • Guided Walkthroughs – Clear instructions integrated into an interactive, self-paced experience.

  • Persistent Navigation – A custom menu allows users to revisit key sections anytime.

  • Hands-On Interactions – Clickable elements allow users to simulate real actions within Torus.

  • Scenarios & Use Cases – Practical examples guide users in creating, structuring, and publishing courses.

  • Search Function Feature – A dedicated search tool lets users quickly locate relevant tutorials by matching keywords within video transcripts, with direct navigation to the selected section.

  • Scalable & Reusable Design – Can be updated and expanded easily as Torus evolves.

Process

1

Define Learning Objectives & Modules

Based on expert interviews and think-aloud studies, I identified key user pain points and knowledge gaps when onboarding to Torus.

From that research, I:

  • Defined clear learning objectives for each stage of the tutorial

  • Structured content into modular units, each aligned to a user task

  • Prioritized core features for autoplay and marked advanced features as optional, click-to-learn elements

Screenshot 2025-04-02 at 2.11.36 PM.png
Screenshot 2025-04-02 at 2.12.08 PM.png

2

Writing Instructional Scripts

Once the structure was set, I wrote instructional scripts that:

  • Mirror the real Torus interface and workflow

  • Use a friendly, supportive tone to guide new users

  • Include optional branches for deeper feature exploration

  • Highlight decision points and common misconceptions

This phase also included collaborative editing with Subject Matter Experts to ensure clarity and flow.

Screenshot 2025-04-02 at 2.43.35 PM.png

3

3

Voice & Video Production

I recorded all narration using my own voice for a more natural and human tone.

During production, I:

  • Synced narration with on-screen interactions

  • Created illustrative content to visualize concepts and show real UI behavior

  • Edited each segment for smooth transitions, timing, and clarity

  • Incorporated captions using the previously written scripts

This approach made the tutorial more engaging, authentic, and user-friendly.

Apr-02-2025 14-49-47.gif
Apr-02-2025 14-52-01.gif
image.png

4

4

Interface Prototyping in Figma

Before building the actual interaction, I designed the interface layout and menu structure in Figma to establish a clear visual flow.

This helped prototype:

  • A clean and intuitive layout

  • Persistent sidebar navigation

  • Visual grouping of related actions and tutorials

Screenshot 2025-04-02 at 2.55.16 PM.png
image.png

5

Full Development in Visual Studio Code

​

1. Interface Design

The system uses a unified HTML and CSS template to ensure a consistent look and feel across all tutorial pages.

  • A responsive video container fills the available space, with a dedicated blue title bar directly beneath the video.

  • Typography, spacing, and colors are standardized so design updates can be applied globally.

  • The layout adapts to different screen sizes to support responsive viewing.

​

Screenshot 2025-08-12 at 9.45.06 AM.png

2. Navigation System

A collapsible, scrollable sidebar menu allows users to browse tutorial sections efficiently.

  • Styled to match the target UI theme with smooth transitions and hover effects for better interactivity.

  • Sidebar items can expand/collapse for section grouping.

  • State-preserving navigation ensures users can move between tutorials without full page reloads.

torussidebar.gif

3. Search System (Search Wrapper)

A dedicated search wrapper page integrates with transcript-data.js, which stores transcripts for every tutorial.

  • Fuzzy search matches keywords within transcripts, highlighting relevant results.

  • Each result includes a snippet of the matching transcript and a “Go to tutorial” button.

  • Clicking the button opens the corresponding tutorial page directly.

  • Modular design makes adding new tutorials as simple as updating the transcript data file.

torussearch.gif

4. Maintainability and Scalability

  • Consistent templates and centralized data allow rapid updates.

  • The modular JavaScript structure means features like search or new UI elements can be integrated without disrupting existing pages.

  • Future tutorials can follow the same template without extra configuration.

bottom of page