Project Skill Tree: UX and Defining the App Utilities
Tags: design, webdev, projectmanagement, ux
Published: 2022-03-06 21:00:58

## Contents

- [Disclaimer](#disclaimer)
- [Introduction](#introduction)
- [Login](#login)
- [~~Creating Skill Trees~~](#creating-skill-trees)
- [Creating Skill Tree Nodes](#creating-skill-tree-nodes)
- [Using Skill Trees](#using-skill-trees)
- [Sharing Skill Trees](#sharing-skill-trees)

## Disclaimer

&emsp; A real user experience story completed in a business setting will create multiple user-perspectives, not just an idealized user scenario. This venture is not profit-motivated and is instead focused on solving [problems]().

## Introduction

&emsp; As much as I would like to start designing the website on [Figma](https://www.figma.com/), first I'll need to specify what the user experience should be like. Defining user experience now will aid graphic design decisions later.

&emsp; Let's start with my ideal user: someone who creates, uses, and shares skill trees.

## Login

1. User arrives at the front page.
2. User presses the Login button from the nav bar.
3. User is redirected to Login page.
4. User inputs email and password or other login method such as Github.
5. User is redirected to a main page consisting of:

&emsp;a. ~~Skill trees that they have created or are in the process of creating~~
&emsp;b. ~~Skill trees that they are w~~

&emsp; When I think about how many skill trees that could be out there, it hurts my head. It might be a bad idea for everyone to create multiple skill trees. Perhaps everyone should have one skill tree. Branching can represent learning a different subject. Visually, branching can be represented as being in a different lane.
&emsp; That being said, I think the user should be redirected to their own knowledge tree. It would be cool if the user-view starts the user from a zoomed-out overview of their skill tree and then the page zooms in on the last node they were working on.

## ~~Creating Skill Trees~~

Instead of focusing on building skill trees, I should focus on building nodes of the skill tree.

## Creating Skill Tree Nodes

&emsp; The node will likely be square-shaped instead of circular, only because you can fit in a lot more text in a square than a circle.

1. The user wants to add a new node.
2. The user presses the "add new node button".
3. A [pop-up](https://miro.com/app/board/o9J_ltxi12g=/) appears that gives the user four options:
    - create their own adventure
    - first recommendation of next thing to learn
    - second recommendation of next thing to learn
    - load more recommendations of things to learn
4. The user is prompted to name the title of the topic. The title must have a unique name. If a duplicate title is entered, the user will be given the option to go to the node with the duplicate title.
5. The user is prompted to name the subject.
    - When the user types the subject, multiple suggestions are listed below it. The first three suggestion are based on subjects that the user has already created. The second three are suggestions based on subjects that already exist in the system.
    - If the user picks a subject that already exists, then the node will be placed in that subject's lane.
    - The user will be given the option to define a sub-subject of that main subject. The sub-subject will only have suggestions of existing sub-subjects in the database of the main subject.
6. The node is now properly categorized. If the node is custom, it will act as a text document for note-taking. Valid URLs can be directly copy and pasted and then automatically added to a list of recommended links for the node. If the node already exists in the database, then the node will already have a list of recommended links. Broken or inappropriate links can be reported and blacklisted. There will always be a text document section for note-taking.

## Using Skill Trees

As alluded above, the node will act as a text document that users can use to take notes and post links. All URL links posted will be automatically added to a list of links.

### ~~Bad pre-made nodes~~

~~If the user is not satisfied with resources provided by the node from the database, the user can press the "Use Next Recommended Node" button. There will be a "Use Previous Recommended Node" button if the next nodes are not useful. Recommended nodes are recommended based on how many users are actually using that node in their skill tree. Notes for that node will not change or be lost. These notes are unique for each user.~~

&emsp; When I think about it, nodes are not really unique if all they do is have recommended links. Rather, what is unique is the ranking of the usefulness of the link. What rates the usefulness of the link will ultimately be a "like" or "dislike" system to show the links in the order of usefulness. Another method of increasing the rank of the link is users recommending the same link.

## Sharing Skill Trees

&emsp; Sharing skill trees will be mostly about showing off your skill tree: statistics like:
- Your most knowledgeable subject based on the amount of nodes you have on your skill tree.
- Your most recent subject
- Your most recent topic of study

&emsp; In the future, this will be useful for a "verified" nodes system. A verified node system will allow users to submit artifacts and for verified graders or automatic graders to verify the node.