Mobile, simple, direct: a new version for the website of the
ÖBZ - Ökologisches Bildungszentrum München
(Figma)
GERMAN - Das Projekt ist die erste Übung nach meiner Weiterbildung zum Visual - UX/UI Designer, das heißt eine Idee für die Aktualisierung der Website des Ökologischen Bildungszentrums, um dem Benutzer die Verwaltung einiger Funktionen zu erleichtern, beginnend mit der Buchung für die Teilnahme an Veranstaltungen, die in Zusammenarbeit mit dem Münchner Umwelt-Zentrum und der Münchner Volkshochschule organisiert werden.
ENGLISH - The project is the first exercise after my Visual - UX/UI Designer training course, that is, the update of 'Das Ökologische Bildungszentrum' website (the Ecological Education Center) to make it easier for the user to manage some functions, starting with the booking for participation in events organized in cooperation with the Münchner Umwelt-Zentrum (Munich Environmental Center) and the Münchner Volkshochschule.
G - Die Idee war, auf der Homepage einen Bereich für die zu buchenden Veranstaltungen und die erstellten Videos hinzuzufügen, wodurch der Bereich für Nachrichten (die in der aktuellen Version die gesamte Homepage einnehmen) reduziert wird.
E - The idea was to add an area on the homepage for the events to be booked and for the videos, reducing the news area (which in the current version takes up the entire homepage).
Die neue Struktur zielt darauf ab, die Suche nach einer Veranstaltung und die Buchung zu beschleunigen und die erforderlichen Schritte im Vergleich zur aktuellen Version der Website zu reduzieren.
The new structure aims to speed up the process of finding an event and booking, reducing the steps required compared to the current version of the website.
Der Versuch besteht darin, die Website moderner zu machen, geeignet für das Surfen mit dem Smartphone, ohne die ursprüngliche Website-Grafik vollständig zu verzerren.
Die Website oebz.de ist in die Jahre gekommen: Ästhetik und Struktur der Desktop-Site entsprechen den Standards von vor einigen Jahren. Die Website ist nicht responsive und es gibt keine mobile Version.
The attempt is to make the website more modern, suitable for smartphone browsing, without completely distorting the original website graphics.
The oebz.de website is showing its age: the aesthetics and structure of the desktop site correspond to the standards of a few years ago. The website is not responsive and there is no mobile version.
Einrichten von Veranstaltungen auf der Mobil- und Desktop-Seite
Set up events on mobile and desktop
In der mobilen Version habe ich, bei der Suche nach Veranstaltungen,das Scrollen nach unten bevorzugt, in Anbetracht der größeren Benutzerfreundlichkeit auch mit einer Hand und in Anbetracht des Bereichs, den eine Hand besser erreichen kann.
In the mobile version, when looking for events, I preferred to realize a down-scrolling feature, considering the better ease of use even with one hand and considering the area of the smartphone that is easier to reach with one hand..
Die Mobile Version der Aktualisierung der Website oebz.de - The mobile version of the update of the website oebz.de
Für die Desktop-Version habe ich stattdessen eine vertikale Komposition aus zwei sichtbaren Veranstaltungen bevorzugt, mit der Möglichkeit, auf die Pfeile zu klicken, um die vorherigen oder nachfolgenden Veranstaltungen vollständig anzuzeigen.
Ich hielt diese für eine bessere Option als ein Scrollen nach unten, das im allgemeinen Bereich für Veranstaltungen vorhanden ist, wo es möglich ist, Ereignisse nach Art, welchen Teilnehmern oder Datum auszuwählen.
For the desktop version, I preferred a vertical composition of two visible events instead, with the ability to click the arrows to view the previous or subsequent events.
I found this to be a better option than a scroll down available in the events general section where it is possible to select events by type, which attendees or date.
I found this to be a better option than a scroll down available in the events general section where it is possible to select events by type, which attendees or date.
Die Desktop Version der Aktualisierung der Website oebz.de - The desktop version of the update of the website oebz.de
Die aktuelle Version der Website oebz.de - The current version of the website oebz.de
Das Menü
The menu
In der Desktop-Version habe ich ein klassisches Menü erstellt, indem ich die Bilder entfernt habe, die den Platz Above the fold einnahmen, ohne einen besonderen Nutzen zu haben (sie sind nicht einmal anklickbar).
In der mobilen Version habe ich oben ein Menü mit den Hauptabschnitten erstellt, die Nebenabschnitte sind im Footer. Für die anderen Abschnitte steht ein Burger-Menü zur Verfügung.
In the desktop version, I created a classic menu by removing the images with no particular use (they're not even clickable) that took up the space above the fold.
In the mobile version, I created a menu with the main sections at the top, the side sections are in the footer. A burger menu is available for other sections.
Nutzungskontextanalyse
Context of Use Analysis
Bisher wurde keine echte UX Research durchgeführt, ein Fragebogen für die Newsletter-Abonnenten wurde aber geschrieben und an das ÖBZ via Mail gesendet. Eine art Vorabanalyse habe ich trotzdem geführt.
So far, no real UX research has been carried out, but a survey for newsletter subscribers has been written and sent to the ÖBZ via email. I did a kind of preliminary analysis anyway.
Über ÖBZ
About ÖBZ
Das Ökologische Bildungszentrum (ÖBZ) ist eine Umweltstation in München mit einem 6,5 ha großen biotopreichen Außengelände. Als Ziele hat das ÖBZ Umweltbildung und Bildung für nachhaltige Entwicklung sind.
Die Leitidee ist dabei die zukunftsfähige Entwicklung der Großstadt München. Als Nachhaltigkeit werden die Zusammenhänge zwischen wirtschaftlicher, ökologischer, sozialer und kultureller Entwicklung verstanden.
An Kinder, Jugendliche, Familien und Erwachsene richten sich die Veranstaltungen.
Das Ökologische Bildungszentrum (The Ecological Education Center, ÖBZ) is an environmental station in Munich with an outdoor area of 6.5 hectares rich in biotopes. The objectives of the ÖBZ are environmental education and education for sustainable development.
The guiding principle is the sustainable development of the city of Munich. Sustainability is understood to mean the connections between economic, ecological, social and cultural development.
The events are aimed at children, young people, families and adults.
(from Unesco.de)
The events are aimed at children, young people, families and adults.
(from Unesco.de)
