project3

about the project.

For the final multimedia design exam, my group and I created a website for the danish brewery Amager Bryghus. Their current website is outdated and not working properly, so we saw a good opportunity to improve that and match their online quality to the quality of their brand and beer. We got in touch with the owner Morten Valentin Lundsbak and went out to visit their brewery on Amager in order to take pictures, ask questions and taste some of the beer – all part of the research.

In this project our group consisted of three people. We therefore had our individual tasks and responsibilities. My primary solo tasks consisted of partly programming the website, editing photos in Photoshop and creating surveys to test our solution with. Besides this everyone in the group was involved in doing the interviews, creating the sitemap for the website, visualizing our research into models and then writing the report.

final home page.

the design.

The brand identity of the company, as expressed on their labels and in their descriptions of themselves, was a sort of rock/metal vibe, so we wanted that reflected on the website. Besides this, the actual labels on their bottles and cans were very creative, unique and interesting graphic designs which we also wanted to be shown more on the website. The final website consisted of a black and white colour palette where all photos, except for the images of the beers, were also black and white. We kept the beer-images in colours, so they would shine through on the site.

the individual beer information in Wordpress.

the programming.

When it came to the programming of the site, we decided to use the CSS framework Bootstrap. In order to do this we created a HTML document in Brackets, where we then fetched a eksternal and ready CSS framework. After this, we were ready to program a fully responsive website for Amager Bryghus. At times when we wanted to do something that Bootstrap couldn’t do, we made our own internal CSS file and linked it to the HTML document. To make it easy for Amager Bryghus to upload new beers to the website, we set up the content of the site in Wordpress. Here it will create a json file with the data which we then fetched into the code with the help of Javascript.

mock-up of the Instagram profil.

social media.

For this project we also took the time to look at the company's marketing and social media platforms, where we noticed there was room for improvement as well. In our research we had noticed that the elder customer segment was overrepresented in comparison to the expectations the company had about their own target group. Furthermore the owner Morten wanted to attract more customers in the younger customer segment, so our primary focus therefore ended up being on the platform Instagram. We kept the tone-of-voice humorous and somewhat provocative to reflect the tone-of-voice on the website, as well as youthful to attract the targeted group of new potential customers. On top of mimicking the tone-of-voice from the website, we also chose to do the same image-style where all photos, except for the beer and label ones, are in black and white.

See the final website by clicking here.

Project3

about the project.

the design.

the company's label designs.

the history page of the new site.

the company's current landingpage.

the programming.

the content in Wordpress.

the json file.

a piece of the code.

social media.

individual post with caption.

a story to catch attention.

a story promoting the guided tours.