• responsive website

    rbb Berlin Wall

    www.mauer-berlin.de

The public TV channel rbb opened its archives to video material of the years of the Berlin Wall 1961-1990.

With the video material, we created a responsive website to provide an experience of this part of german history to the users.

My role

I joined the team as a user experience designer and project lead. Besides the ux design, I was responsible for the communication towards the rbb editorial and technical team. I also guided the visual design development and the technical realization of the responsive application.

Merken

 

The Challenge

Our aim was to provide easy access to the video material via mobile, tablet and desktop devices. We decided to develop a responsive website.

To acquire the project, the pitch team produced a broad design overview for all devices. Therefore, my first design challenge was to return to a mobile first approach.

I started to design and prototype for mobile devices first and finalized the responsive design after that for larger devices.

Users should be able to experience the video content via different approaches. I designed access via a timeline view and a map of Berlin. With this approach, users could access the information via a specific date or date range and via the historical relevant locations.

In the Django CMS we stored the video material in different resolutions to provide a good user experience to mobile users with a maybe weaker internet connection aswell.

The approach

wireframing & prototyping

wireframing & prototyping

After the pitch, I started wireframing and prototyping the responsive website. Starting with the mobile version, I went on to optimize input fields and screen design also for larger tablet and desktop devices.

features for development

features for development

I supported the development team in daily stand-up meetings with features and specifications. We provided a solution in the Django CMS to deliver videos with different resolutions according to the device type.

creating the parallax design

creating the parallax design

Additionally, I was creating picture material from the historical parts of the Berlin wall together with a photographer. This material was integrated in a parallax design into the timeline view of the website to explain the history via an additional picture level.

The result

We developed a responsive website to provide access to archived video material of the years of the Berlin Wall 1961-1990. Users were able to use the website on all devices. Even if it was a website, we tried to optimize navigation and interfaces with HTML5 and CSS3 to create an experience for mobile users like a native application would offer.

Merken

Merken

I created the wireframes and a prototype with Keynote for the website. I started to design the mobile view and created a layout pattern for the responsive design afterwards. Then, I designed all screens for the tablet and desktop view of the website.

Timeline

Timeline

In the timeline view, users can search for videos from 1961-1990. On tablet and desktops, the user additionally sees the parallax effect with historical pictures. In the mobile versione, we left this effect out to increase the website performance.

Map

Map

The map displays all videos according to their main location. On tap, the user can see a preview of the video including the title and a description.

Video

Video

We uploaded all videos in different resolutions to optimize the video performance on all devices. Under each video, the user sees a map of Berlin. The current location in the video gets highlighted.

Related videos

Related videos

To each video, we offered a list of related videos according to topic, location and date.

Create your own documentation

Create your own documentation

Inside the application, the user can collect his favourite videos. With these videos the user can create an own documentation. In the list view of the documentation, you can order your videos, add or delete videos.

Choose a city tour

Choose a city tour

While I was designing according to the personae, I realized that we underestimated the user group of tourists in our initial concept. I created a concept for city tours. Users can choose an existing tour or create an own tour and use the application while walking through the city. We introduced the concept to rbb and could integrate this feature after the initial launch.

Media

 

 

annual multimedia award

rbb was extremely proud of the result and applied with the project for the Grimme Online Award. In 2015, our project won the Annual Multimedia Award for the best website.

 

Merken

Merken

Merken

Merken

Merken

Merken