Blog: Schulabgaengerwebsite — undnun?
1) We have noticed that the Internet is flooded with information about possible careers after school and that there is no single point of contact that offers a compact and pretty overview of all these possibilities. We wanted to change that and therefore created the “undnun?” (in English: “and now?” website.
Our approach was as follows:
First, with our mentor, we worked out a schedule that we could use as a guide during the development of the website. This contained the individual milestones including the target date.
The first step was to collect the content. Specifically, this involved identifying potential career paths after graduation and then researching the relevant information on the Internet. Our goal was to work out only the essential features of each option as briefly and compactly as possible. In addition to just presenting the information, we were looking for a way to offer school leavers not only information but further an orientation and possibly even a recommendation as to which of the many options might be the right one for them personally. We wanted to realize this with a kind of quiz in which the user answers some questions, gives their answers points and the score represents the best option and shows it to the user. We developed questions and associated answer choices, as well as the weight of matches between an answer and an option. This will be explained in more detail later in this article.
The creative process then began. Without technical aids, we first used pen and paper to capture our brainstorming ideas on layout and presentation. We didn’t impose any restrictions on ourselves, we had a clear goal in mind, and we were sure we could do it with the help of the learning tracks provided by Tech Labs and our mentor. From a multitude of different ideas, we finally agreed on a color scheme and a concrete presentation for the individual pages of the website. The basic colours were dark turquoise and yellow. Fortunately, we had a educated designer in our team who was able to bring our ideas into realistic drafts so that we had something to orientate on. She designed our logo, which is an essential part of the finished website and at the same time an important recognition feature.
Meanwhile, the rest of the team was involved in structuring and preparing the content. This means that we determined pros and cons for each option, which should give the reader a first overview later. For this purpose, we assigned separate subject areas to the information (example: costs, duration, requirements, etc.).
In the next step, we linked the design draft with the content. To do this, we coordinated both aspects and, if necessary, adjusted minor details.
In the end, we had a finished optical design in our hands before we started to realize the whole thing in code.
After the design and information were ready, we started coding. First, we defined the techniques. We chose Bootstrap as our CSS framework because it provides many elements in a basic version. We used the React Framework because it simplifies the development of complex web pages through reusable elements.
The website we created in our template essentially consisted of four independent subpages, each of which had to be developed individually. The concrete development — the writing of the code — was split between us. During the process, we kept coordinating on the WhatsApp and Slack platforms and also used Skype for virtual meetings during the semester break. This worked without any problems at any time. In order to keep the effort as low as possible and to keep the design in a uniform style, multiple used elements were developed by only one person and transferred to all other pages. These were for example the logo and navigation bar, the text style (font, size and colour) and the footer. We also had to look for suitable, theme-related images, graphics and icons that we wanted to implement. The images had to be legally royalty-free and commercially usable. Websites like www.unsplash.com or www.pixabay.com are ideal for this.
In order to make the website easily visible and convenient to use on all end devices, we made sure that the design was responsive. This means, for example, that elements that are displayed next to each other in the desktop version appear one below the other on the mobile screen. Within Bootstrap the so-called “Grid System” is used for this purpose.
After writing the pages in individual HTML and CSS files, we redesigned them so that we could include them in React and link them to each other. In order to keep track of the current status of the website and to make it centrally visible for all team members, we put the current version on the Internet with the help of the free webhoster “Netlify”. The link gave us the possibility to view the website on all devices and to make possible bugs visible, which we could fix afterwards.
Finally, we checked the finished website for minor blemishes. We noticed a few optical impurities, which we were able to remove with a few changes in the code. These were, for example, distances or font sizes or marginal position changes.
3) When you open the finished website, you first land on the start page. This is divided into two halves, visually and in terms of content. After the user is greeted with the question “What’s going on after school?”, he now has the possibility to choose between two paths: “Give me more information” and “Do the test now!”. If he chooses the info, he is taken to a page where he has to enter his school leaving certificate. He can choose between “Abitur”, “Fachhochschulreife”, “Realschulabschluss”, “Hauptschulabschluss” and “Ohne Schulabschluss”. This is queried so that the user is then only shown the options relevant to him personally for the time after school. Example: In contrast to secondary school graduates, high school graduates have, among other things, the opportunity to study. Accordingly, the “Study” option would not be displayed for the latter in the following.
On the next page all relevant options are shown which are open to graduates with the respective school graduation. This is done optically, as on the previous page, in tiles. These are rectangular boxes of different sizes within which a monochrome background image is located behind the text, but which only appears when the mouse cursor is on the box. As an additional effect, the image is zoomed in and the text turns from blue to yellow.
The options presented here are “study”, “training”, “dual study”, “abroad”, “internship”, “Bundeswehr” and “Bundesfreiwilligendienst (BFD)”.
If you now select one of the options, you will be taken to the corresponding information page. This is structured as follows: A short introductory sentence is followed by advantages and disadvantages. Below, in the form of individual text sections, you will find information on the respective subtopics, paired with a photo next to it. We realized this again with the Grid System from Bootstrap. At the end of each page there is a box with links to websites where the user can get further information. This was our goal, because “Undnun?” should, as described above, only present the most important features in a compact way. We deliberately refrained from detailed contents and therefore linked them.
If the user chooses the button “Do the test now!” on the start page, he should actually go directly to the quiz and answer a total of 15 questions, which then give him a recommendation for an option on a results page. The logic behind this was as follows: Each answer option is assigned points for one of the seven options. If, for example, the question is “Do you like learning?”, the answer “Yes, very much!” will be assigned more points for the “Study” option than for the “Bundeswehr” option. In this way, a total score is calculated at the end. The option with the highest score is then displayed to the user as the first recommendation on a results page.
However, we were no longer able to realize this in terms of time.
4) There were some challenges in our development process, but we were able to master them together as a team. At first, communication was a problem, as we rarely met and therefore had to switch to Skype. It was often difficult to find a common date. As a consequence, there always was at least one of the team member that could not be present. But via WhatsApp and Slack we brought them up to date immediately after the meeting so that everyone was always fully informed.
In terms of content, React caused us some problems, which we were usually able to solve either after a brief consultation with a mentor or with the help of Google.
There were some interferences with the design at first, as everyone developed their own page and parameters such as font and font size or the position of different elements seemed to be very inconsistent.
We countered this by assigning the development of recurring elements to only one person at a time.
In addition to problems and challenges, our learning and working process has also been marked by a sense of achievement. This was usually the case when we failed several times in one task and were then able to solve it suddenly.
Especially the more difficult subject areas required more time and concentration, so that the sense of achievement was even higher after the completion of such tasks.
Overall it was a great and exciting project phase in which we could all learn a lot!
5) team members:
Simon Herbert — Web Development Frontend
Felix Ruhl — Web Development Frontend
Milan Wurth — Web Development Backend
Carolin Hölling — Web Development Frontend
Laura Gördes — Web Development Frontend
Git repository of “Undnun?”: