50 Years of ABBA

// brief

In my university’s major «Media Applications», a group project had to be completed over two semesters, with the first semester focusing on conception and the second on realisation. It was up to us whether the final product was an app, a game, a website, or something else. We only had the task as a group of completing a project that required us to learn in-depth new programming skills over the course of a set number of hours.

// goals

My two colleagues and I set out to create a scrolly telling website because we are particularly interested in the front end of websites. We wanted to bring knowledge and exciting inputs on an interesting topic together in a creative way in a website that doesn’t feel like a typical website, but where scrolling itself is part of the story.

// challenges

In the first semester, we as a group developed a concept for an idea that we all liked but that didn’t excite us as much as it could. Ultimately, during the semester break, we decided on a new theme (50 Years of ABBA) and adapted the entire concept in consultation with our lecturer. During the implementation, we were all working on other parts of our website at the same time and only being able to put them together at the end. Working with GitHub for the first time went smoothly, but we had to keep checking to see if our various frameworks worked together in the end.

I was in charge of the website’s navigation. Our plan was to use it as a process bar for the website, while also providing additional information and thus contributing to the overall story. It was difficult to find relevant information that was adequate to the story and the length of the website. And the implementation was far from simple. Several frameworks and variants were tested through trial and error until a variant that was compatible with all components was discovered.

// process

First, we created a concept of which design elements the website should contain, and which contents are of interest. Based on this information, a simple prototype was then created, which served as a guide for the entire realisation.

Concept and Prototyp

After we had our initial concept for the website, we defined the different steps and components of the realisation: navigation with process bar, basic structure of the website with scrolling behaviour (horizontal and vertical), Google charts, gathering of content and design.

I took care of the navigation. Since we defined various epochs in ABBA’s career, I then researched a plethora of different facts about the band, which could eventually correlate to the epochs and be displayed on the process bar. We eventually decided to display significant world events on the Process bar in order to place the band’s career in the context of world history and provide context for what was going on at the time. Because of my strong logical reasoning abilities, I was tasked with designing a well-organized and user-friendly process bar.

Since I’m skilled at imagining how visual information can be put together, I came up with a few ideas on paper. However, when implementing the final sketch into code I faced several challenges. A simple vertical progress bar was easy to manage, but when we added the additional information, and the progress bar should suddenly move both vertically and horizontally it became tricky. Thanks to my convincing that there is always a solution, however long it might be in programming, I faced those challenges with a never-ending trial and error mentality. I have run into many dead ends. And often I despaired looking for the small error in the code. So, I kept looking for a new approach, but never doubted that it was possible. And with the team’s unwavering commitment, I eventually succeeded in building a fully operational process bar.

During this time, my colleagues worked on the rest of the website’s parts before we were able to put all the components together and tackle the last to-dos together.

Screenshots of the final Website

// reflections

Finally, we were able to create a scrolly telling website that worked. But it’s far from flawless. The navigation that I designed only partially functions on mobile devices. Additionally, there are a few scrolling behaviour flaws that are dependent on the web browser and screen size. In any event, the objective of dealing with programming in depth was met. Since we ultimately worked without a framework and had to design the entire navigation from scratch, in my case, this primarily applies to the programming language JavaScript.