Digital generated image of wooden twisted shapes. ESG, green technology, sustainability and responsible business concepts.

HHIS Tutor Board Design Outline

Introduction

I wanted to built a utility tool to show all of our school’s notices in a centralized place, similiar to systems I had seen in Bangkok.

Often in the mornings at form time, we play a game of Wordle, Do a quiz, look at news, share reminders about band sign-ups, ECAs, deadlines etc.. I wanted a place where all these things can be found in one place. Laid out similarly to a wall of bulletin boards, one for the daily notices, weather, games, word of the day, etc.

Project Goals

Now, I had to outline some clear goals with this project:

  1. It is not meant to replace anything in Google Classroom, the Classroom announcements exist and serve their purpose well, I don’t think I have anything to add to that.
  2. If teachers want to post their own announcements, I don’t want it to be cumbersome to create posts in both Classroom and The ‘Tutor Board’.
  3. My goal is to create a centralized, easy to view and access website, perhaps only hosted on the schools network (won’t be accessible from the ‘world wide web’).
  4. I want this to be a place where students can access all relevant school events and notices for that day.
  5. I want the information to only pertain to that day. Maybe in the future, if there seems to be a need for it, I will add the ability to look at past day’s event boards.

Feature List

I need the teachers to be able to post an event or alert and schedule it. They can add:

  1. Target for Announcement (KS4, Secondary, Whole School, etc.)
  2. Notice Title
  3. Notice Description
  4. Date of Announcement

I’ll also outline user roles and the features they have:

  • Teachers
    • Can edit and create notices
    • View all notices
  • Students & Parents
    • Can only view notices

Apart from the notices section which will only be a small section of the webpage, I also want to include:

  • Daily games (Wordle, Connections, Globble, GeoGuesser)
  • Trivia questions
  • Word of the day
  • Joke of the day
  • Flag quiz
  • Name the element
  • Weather and Air Quality
  • Canteen food that day
  • Quote of day (provided by each form tutor)
  • Fascinating / Impactful videos shared by teachers

UI & UX Considerations

UX & UI will be vital in ensuring the app is simple, easy to use and easily adopted.

I intend to make the system easy to navigate with a one page design that mimics a wall with multiple bulletin boards. Each section of the webpage, will serve a distinct purpose, just like individual boards on a wall that convey information for different tasks or topics

However, this design choice comes with its drawbacks, the page may be large, so it’s important to create a layout that is logical and not confusing, and has distinct visual elements, instead of a bundle of incoherent text, links and photos.

To achieve these goals, I’ve decided to use a ‘bento grid’ layout, where each box is comparable to a sticky note, or piece of paper, taking on an element of skeuomorphism. I think this design draws parallels with real life making it logical and easily understandable at a first glance. All while taking on a simplistic, flat shaded design.

The font I will use is Nunito, as this is the font used across many HHIS created things. This will help tie my app to the school and convey the idea that the website is designed for the school.

Technical Considerations

I’ve adopted the ReactJs framework for this project’s frontend, as its flexible and versatile features will allow me to quickly create this project, given I have some time constraints as a single developer.

The backend will be using Python 3, and will act as an interface for a MySQL database, which will be used to store the notices, and other relevant information with security in mind.

The table used for storing the notices may look like the following, though this may change later in development.

ID Title Description Timestamp Date to Be Announced Start Date to Be Announced End
1 U18 Basketball game Join us for a fun and exciting basketball game at 1pm 24-9-24- 13:00:00:0234 14/9/24 16/9/24
… … … … … …

A table will also be needed to store the user roles (teachers)

This design leaves room to add user permissions, which could be added in the future.

Hosting can be done on the school intranet, so it’s only accessible from the school WiFi network, or it can be hosted on the internet, though this perhaps has security concerns related to it. I think this is a consideration for later.

As for the Word/Joke/Riddle of the day, I could either make calls to an API for this, but I think I can create a long list (at least the next year) of Words, Jokes and Riddles, that the website will continually pull from. Another consideration could be to use AI to generate these things everyday.

Costs

The project cost will be low, especially if it is run on the local school network, otherwise a MySQL and backend server hosting fee and domain name fee will have to be paid each month.

Estimated Costs:

Service Provider Cost ( USD / month )
MySQL server hosting Digital Ocean 15
Web Service Backend hosting Render.com 7
OpenAI API Chat Completion OpenAI 1
    TOTAL: 23 USD (751.41 THB)

Testing and Feedback

Testing and feedback is crucial for this project. I plan to have a feedback form or similar method for users to provide helpful feedback or request certain features they think are useful.

The first iteration of this website will be a beta available to a small number of teachers. I think this is the best option, as by the time it is available for all teachers, I want the website to be polished.

The beta run and feedback process should help the project better align with its goals by its full release on top of helping find and fix bugs.

Future Features

Here’s a list of possible future features, depending on necessity and requests from users:

  • Customizable tutor pages for each tutor (background images, color themes etc, button styles, which boards to show, board layout)
  • Calendar view that shows not only notices on that day, but in the past and future.
  • Notices that can be pinned and show at the top of the list, if they are more important
  • Word of the day in French and Spanish
  • Teacher Hosted Board
    • Mr. Rich can have a math question of the day and each class can submit an answer to the board.