Locals Aachen
This project was carried out as part of the TechLabs “Digital Shaper Program” in Aachen (Winter Term 2020).
Abstract
As we are facing the second year of the corona pandemic and are about to enter our third lockdown, creating a website with the purpose of discovering events and places to meet other people, might not seem like a particularly good idea.
Despite that, our group consists of hopeful and forward-looking members, who are firm in their belief, that after the pandemic there will be flocks of people gravitating towards anything even resembling some sort of event. With that in mind we wanted to create a hyperlocal platform for discovering events and cool places to meet up in Aachen.
Method
As Stephen Sondheim once said :”*White. A blank page or canvas. So many possibilities. *”.As for us, the blank canvas was a html page void of any content waiting to be filled. To decide how to fill that void, we first tried to create a sketch of the webpage, which, to be honest, wasn’t pretty, but got us a rough sketch of where we wanted to go with our project.
To enable our group working in parallel in a collaborative effort, we tried to divide the webpage into areas with their own subtasks, using highlighting on different areas, making them distinguishable.
One important aspect of designing a page is the overall emotion it is supposed to evoke in the user through the use of color. For our page we wanted to go with themes of freedom and warmth, so we went with shades of blue and Aachen’s titular color yellow.
Following that we started thinking about how to implement user friendly functionality and tried to imagine how a new user would navigate through the page.
After each group member presented their concept, a decision was made on how to go forward, with focus on these points:
- simplicity
- filtering
- making the page accessible for international users
Project Results
Event Card
The most important aspect of our page are of course the events, which makes their respective element the core of our page. The event information is displayed on a card, presenting its key details, such as the name, place, date and a short description, with an image of the event on top.
An event is created by selecting the “create event” button on the pages navbar. The decision to place the create option in such a centered place is driven by our need for accessibility, which means users not having to search the page for this option.
While the cards serve as an access to the actual event page, we added the option to actually proclaim attendance for the event, without having to navigate the info page for the event. On top of that we added a like-function in case you want to promote an event or save it for later.
Event Grid
When talking about the event cards we can’t get around the topic of structuring them. To make browsing these events as easy as possible, we decided on a grid structure, which places the event in a symmetrical order in rows of three. With the thought of later adding new events to the page, we gave the grid an endless expansion feature.
Control Bar
To give people easy access to their favorite kinds of events, we came up with the idea of a control panel, where the suer can select from a list of different activity types containing options such as sightseeing or hiking.
Nav Bar
An essential part of the user experience is the nav bar, which serves as a vehicle for moving through the website. It contains the options for creating events, registering an account, logging into said account and searching for events, using specific keywords.
Server
After the concept finalization on the frontend side, the data structure was defined. The database used in this work is MongoDB, which is supported by Node and thus can be used with Express. Prior to the data storage, a schema was defined, which includes a collection of properties. In our case, these properties were e.g. event title, location, date and description.
Problems
When talking about problems we faced during the semester, the one common point that always comes up is time. With the semester being as chaotic as it was and the track, while being extremely interesting and entertaining, taking up a lot of time, we simply didn’t have enough space in our calendars to do all the work that an ambitious project like this demands.
Conclusion and Outlook
At the point of writing this, we’re taking a look at what we wanted to achieve and what we actually realized. The page contains all the elements, needed for addressing the main aspects we put as the cornerstone of the project. Frontend-wise it’s able to do everything it needs to do, while still being clear and straight forward. The main issue we’re still facing is the lack of back-end code fleshing out these hollow elements. While the overall design of the page is largely finished, features like an interactive map, browsing capabilities and user accounts are sorely missing and should be added in the future.
TEAM:
- Gerriet-Maximilian Goldschmidt — Web Development
- Adrian Kasner — Web Development
- Philip Dittke — Web Development
- Sandhya Vasudevan — Web Development
- Verena Laura — Web Development
- Finn Zentgraf — Mentor
Github repository: https://github.com/TechLabs-Aachen-e-V/WiSe20_WebDev
TechLabs Aachen e.V. reserves the right not to be responsible for the topicality, correctness, completeness or quality of the information provided. All references are made to the best of the authors’ knowledge and belief. If, contrary to expectation, a violation of copyright law should occur, please contact journey.ac@techlabs.org so that the corresponding item can be removed.
