Project Skill Tree: Student View of App Page Part 1

Contents

• Introduction
• Features
• TODOs
• Conclusion

Introduction

  Today, I designed the student view of the main application in Figma. The background placeholder is the skill tree from Super Smash Bros. Ultimate.

Features

• NavBar
  • Logo
    • Goes to home page
  • Search Bar
    • Search for topic node
  • Settings Button
    • Opens Student profile settings and viewing settings
• SideBar
  • Sidebar size must be adjustable.
  • Topic Title
  • Markdown document
    • Teacher's notes, links, and images written in markdown
  • Edit Feedback button
    • Open the Feedback form
• Response Pop-Up
  • Rating Multiple choice
    • Required
    • Rate from "not well at all" to "very well" how well you feel like you understand a topic
  • Written Feedback Form
    • Optional
    • Can explicitly tell the instructor how you're feeling about this topic
  • Done Button
    • Pressing Done button causes the feedback form to hide

TODOs

• Come up with a color schema.
  • I should come up with several color schemas for the UI and leave that choice up to the user.
• Think of how you're going to procedurally create the skill tree.
• Think of how you're going to implement user view-navigation on the skill tree.
• Think of the final visual design of the skill trees. I'm thinking of copying Skyrim.
• Think of node icon defaults
• Think of background image defaults. This will be the background beneath the skill tree.

Conclusion

  It's a good start. I drew a lot of inspiration from the Figma UI itself, which I thought was funny. Using markdown for the instructor notes was inspired by my time writing posts at dev.to. Markdown has the benefit of being useful whether teachers take advantage of its features or not.
  I will be building the teacher view next. It should be as close to the student view as possible.