FHG Online

School planner for my grammar school

Already in the 9th grade I wanted to try out my new skills on real projects while learning different scripting languages and web development frameworks instead of just sticking to simple example projects. That's why I was working on this exercise project on the side, which should simplify the everyday life for me and others.

Project details

Services	Concept, UI/UX & Logo Design, Web Development
Tools	Adobe Illustrator, Adobe Photoshop, Adobe XD, Adobe InDesign, Angular
Year	2017 – 2020
Code	GitHub/dennis-adamczyk/fhg-online
Preview	beta.fhg-online.de

Idea

The idea

The problem

The first idea for the project came in the ninth grade 2017 when I taught myself the basics of web development (HTML, CSS, PHP, MySQL) and I wanted to program a website with a specific purpose. So I thought about what problems I myself or my fellow men have that can be easily solved.

After looking at my phone and receiving dozens of messages from my class group again, all of which were just about what homework was assigned, I had the clinching idea. “There has to be an easier way to share what homework has been assigned than always having to cross-read and send so many messages”, I thought.

The solution

So for me, the subject of my new project was clear. I want to provide a shared homework notebook where everyone can immediately view all assignments, and only a single authorized person has to enter them right after each lesson. Just like with the analog school planner, I also quickly added a schedule and timetable function that worked with the same principle.

After a few weeks of programming, the Progressive Web App FHG9A was finished. I presented it to my class and received a lot of encouragement. The website was easy to install and use. After the 9th grade, however, the senior class started, for which the system was unfortunately not designed. This meant the end of the website after just under a year.

Continuation

The continuation

Reinventing proven concepts

Half a year later, students from the younger grades found out about the former school planner app and often asked me to make the app available for them as well. However, because I learned a lot of new things in the meantime, I decided to redevelop the app from scratch with the framework Angular, which I learned at the time, under the name “FHG Online”.

Services and tools used by the new FHG Online App

Concept

The concept

Together with two other students, we thought about concepts for the new FHG Online WebApp to avoid difficulties when entering homework. In particular, we had to take care of edge cases, where students try to sabotage the app by, for example, creating duplicate or spam homework entries or trying to delete real homework entries. Teachers are also supposed to play a role in the new version of the app, volunteering to act as administrators for their classes.

Homework

Student or teacher enters a homework assignment for a subject

Timetable

Students enter the timetable

Majority of students must confirm changes

Teacher or admin enters his lessons

New timetable is displayed for everyone

Development stages

Closed Alpha

As of April 17, 2019, the app was in the initial reprogramming phase, accessible only to the development team.

Closed Beta

As of September 19, 2019, the app was tested in a sixth grade class, so bugs and suggestions were reported. The calendar function was not yet available at that time.

Open Beta

An open beta was to take place in 2020 with a total of 10 fifth and sixth grade classes, however, the project was unfortunately cancelled before then.

Target group

The target group

Primary target group

The students of Franz-Haniel-Gymnasium should be able to use the app independently without intervention from others (e.g. teachers) and thus also strengthen the class/grade community. Surveys and reporting systems ensure that the data displayed is nevertheless secure.

Secondary target group

In the system, the teachers of Franz-Haniel-Gymnasium play a secondary role, because they should not be obliged to use the app. Nevertheless, we give them the possibility to plan their lessons with the app and to sanction their students via the app if necessary - especially class teachers.

Design

The design

User Interface

Use of the material design

Quick comprehensibility
Good user experience
Suitable for young target group

Navidation drawer

Divider

List

Badge

App Bar

Icon Button

Card

Checkbox

Floating Action Button

Responsive Design

Students use smartphone WebApp
Teachers use website on tablets or PC

Logo

The two components of the site's name, FHG and Online, are also represented by the logo. The FHG is written out in a uniform mono font in the center, while it is enclosed by a globe icon, which stands as a symbol for the Internet and thus the “Online” in the name.

Colors

Primary color

Indigo50

#E8EAF6

100

#C5CAE9

200

#9FA8DA

In dark mode

300

#7986CB

400

#5C6BC0

500

#3F51B5

In bright mode

600

#3949AB

700

#303F9F

800

#283593

900

#1A237E

Material design pallet

Red 500

Pink 500

Purple 500

Deep Purple 500

Indigo 500

Blue 500

Light Blue 500

Cyan 500

Teal 500

Green 500

Light Green 500

Lime 500

Yellow 500

Amber 500

Orange 500

Deep Orange 500

Brown 500

Gray 500

Blue Gray 500

Black

Use of all colors to represent the individual school subjects

Typography

We also use Material Design for the typography. Roboto is the simple standard font developed by Google. It is easy to read in apps and websites and is therefore ideally suited. For web purposes, we tend to use Montserrat, as it is very wide and open. This makes it more appealing and legible to strangers.

Roboto

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz , . ! ? / 0 1 2 3 4 5 6 7 8 9

Montserrat

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz , . ! ? / 0 1 2 3 4 5 6 7 8 9

Visit website

Result

The result

FHG9A 2017 – 2018

FHG Online since 2019

Registration

When opening FHG Online for the first time, there is a foolproof registration process to ensure that users are also from Franz-Haniel-Gymnasium (and are in the class with which the app is being tested in closed beta). To do this, we have simply divided the process into 4 or 5 steps.

Overview

The most important thing with a school planner is to always keep track of everything. The overview page serves this purpose perfectly, because all important information is visible at a glance: The subjects on the next day,to pack his school bag, and the homework that must be done by the student until the next school day.