Documentation:Digital Tattoo Student Orientation/Proposed Architecture

From UBC Wiki

The Digital Tattoo site needed a refreshment for the architecture of the site. On June 7, we did a card sorting activity to brainstorm the architecture of the tutorial pages.

Goals for this activity

The goal for the card sorting is:

  • To come up with the new architecture to sort the tutorial page.
  • To figure out where the existing pages will fall under the new architecture

Process for the activity

  1. Quickly come up with a new architecture for the new Digital Tattoo site
  2. Print existing tutorials on the current Digital Tattoo site.
  3. Sort the tutorials to see where the existing tutorials will fall under the new architecture
  4. Discuss the observation in groups, and tweak the proposed architecture


Site-wide Architecture

This is a proposed Site-wide/Home page architecture that we brainstormed during the Digital Tattoo meeting on June 7 prior to the card sorting activity. :

  • Home
  • Blogs
  • Tutorials
  • Teaching Resources
  • Quizzes
  • About

Tutorial Architecture

From the card-sorting activity, We came up with the following architecture. Each architecture will have multiple set of "themes"(For example: online preference) which will help with further organizing the tutorials.

Proposed new architecture for the tutorial Privacy and Surveillance Academic and Professional Life Copyright and Open Access
Tagline- "Take control of your privacy"

Online presence:


Online Safety:

Digital Security:


Accessing Information:

Open Education

Branding and Reputation:

Wireframe for Tutorial Landing Page/Theme Landing

During the card sorting activity- we realized that there are tons of tutorial pages. We decided to come up with a "Tutorial theme" in addition to the proposed architecture, so that it will help with organizing tutorials. Below are the wireframe of how the tutorial landing page and theme landing page will look like:

Tutorial Architecture Wireframe

Digital Tattoo tutorial landing page
  • Under each Tutorial Landing Page (For example, Privacy and Surveillance), there will be thumbnails that links to the "Themes" landing page.
  • The page will have "related blog posts" section that will display around 5 new blog posts that are related to the Page. For example, if it is Privacy and Surveillance page, it will show 5 recent blog posts that are related to the Privacy and Surveillance theme.

Theme Architecture Wireframe

Digital Tattoo theme landing page
  • On the theme landing pages (For example, Online Presence), there will be thumbnails that links to individual tutorials.
  • The page will have "related tutorials" that displays tutorials that are related to the theme. For example, if the theme is Online Presence, the related tutorial can be "e-portfolio" which is a tutorial that is part of the "Branding and reputation" theme.
  • Similar to the Tutorial landing page, each themes can have related blog posts. For example, if the theme is Online presence, it will show 5 recent blog posts that are related to the Online Presence theme.