MEET UP
Der Medieninformatik
Process Highlights
Meet-Up Website
Introducing the result of my bachelor project at the university of Lübeck.
A dynamic website that celebrates the Media Computer Science Meet-Up from my university.
The Meet-Up has been around for 10 years now - and during this time many innovative ideas and exciting projects have emerged. To ensure that all these EMI projects and the best qualification theses are not forgotten, we have bundled them and presented them clearly on the new website.
You can discover the modern website and get a structured insight into the history of the Meet-Up.
Here on my portfolio site you will get an detailed inside view behind the creation process and many other informations regarding this Meet-Up website.
Human-centered design process
GenZ as Target audience
The human-centered design process is at the heart of the website development and is here aimed at the Generation Z target group. Generation Z includes those born between 1997 and 2015 and is the first generation to become familiar with the diverse possibilities of the digital world at a young age. This generation is characterized by a high affinity for technology and a deep understanding of the digital world, which shapes their everyday life in many areas. Generation Z is not only one of the most technologically savvy groups, but also one of the most multitasking-capable, as they are used to using several digital channels at the same time. For this generation, technology should above all be seamless and usable. They prefer simple, naturally operable user interfaces that enable quick and uncomplicated use
Accessibility
The focus of the website design is a human-centered approach that takes all user groups, including people with disabilities, into account. In order to provide all users with easy access to the platform, the international standards of the WCAG guidelines (Web Content Accessibility Guidelines) are implemented at Level A. These define basic accessibility requirements and promote inclusion. Measures such as high-contrast color schemes, alternative image texts, clear navigation elements and a clear page structure ensure an accessible and user-friendly website that is tailored to the needs of different user groups.
Developing a modern
Design System
In addition to developing the navigation structure, the development of individual design solutions also plays a central role in the design process. A cooperative brainstorming session was carried out to develop various ideas, which were then documented using sketches and wireframes and discussed in the team. Building on this, an interactive prototype was developed iteratively. First, a mobile-first approach was followed. This approach ensured an optimized user experience on mobile devices, which was then expanded to include a desktop version. The font selection and color scheme selection were also made using the co-design methodology. As with the UI design, this participatory approach promotes the active involvement of all those involved in the design process.
Implementation of a
dynamic website
The technical foundation of the website is based on Nuxt.js, a framework for Vue.js, and Tailwind CSS, a modern utility-first CSS framework.
In addition, DaisyUI, a UI component library, is used to integrate ready-made design components. These technologies were chosen to ensure efficient and flexible development that meets both the design and functional requirements of the project.
The chosen technologies also provide a robust foundation for the implementation of the project. Nuxt.js ensures performance and scalability, Tailwind CSS enables flexible design, and DaisyUI accelerates development through ready-made UI components. Together, they enable an efficient, user-friendly and accessible website that meets the needs of the target group and is designed to be future-proof.
Meet Up
My degree program in Media Informatics annually hosts a meetup where various projects are presented.
In commemoration of the meetup’s tenth anniversary, my bachelor project involved the creation of a website for this meetup.
Timeline
+
Timeline
On the homepage, you will find an interactive timeline that takes you on an exciting journey through the highlights of the past years. This visually designed overview allows you to quickly grasp the most significant milestones, developments, and achievements at a glance.
To explore the history in greater depth, you can select and examine each year individually. Within these sections, you will find detailed information about the various EMI projects and theses from that particular year – ranging from innovative concepts and technical advancements to creative design solutions.
Winner Podium
The result of a one week-long design sprint at a gamification course. This university project is focused on helping people get out of their comfort zone.
EMI Award
You can examine each year individually. Within these sections, you will find detailed information about the various EMI projects.
Cross Platform
FAQ
This year, the Meet-Up of the Media Informatics course at the University of Lübeck is celebrating its 10th anniversary. In order to be able to look back on the previous Meet-Ups, a website is urgently needed on which all important information is provided. At the same time, this should serve to create anticipation for the next Meet-Up. Previous information is scattered across various servers and in Moodle courses. This approach makes it difficult to access relevant content and prevents the history and highlights of the Meet-Up from being conveyed. The website aims to close this gap and provide a central, easily accessible point of contact.
The conception of the new website aims to achieve a design that is both creatively and visually appealing. A special focus is on engaging the target group of Generation Z, without excluding older generations. A usable navigation was developed to allow visitors of all ages effortless access to the content and to offer them an inspiring review of the meet-up.
The process was divided into three phases: analysis, conception and implementation. As part of the analysis, the target group and the principles of accessibility were first identified. The target group of the website consists primarily of prospective students and new students, i.e. Generation Z, who were born between 1997 and 2012 and grew up with digital technologies. They have a high affinity for technology and prefer simple and modern user interfaces. For this reason, a mobile-first approach was followed. In addition to this approach, a human-centered approach was also followed in order to include all user groups. International standards for accessible web content (WCAG) were defined with a focus on the basic requirements. These primarily include high-contrast color schemes and alternative image captions. On the basis of these findings, a design system including a style guide was developed. Based on this, a prototype was developed based on sketching.