• UX Design & Project Lead

    The Berlin Wall

    Content Platform www.the-berlin-wall.com by TV channel rbb

With archive material from Rundfunk Berlin-Brandenburg (rbb), a TV channel of the German association of public broadcasters, we developed a bilingual responsive website for the 25th anniversary of the fall of the Berlin Wall. This project made historical content accessible through several digital channels and types of media.

MY ROLE

UX Design & Project Lead

 

Merken

 MY Tasks

At the beginning of the project, I was responsible for the transformation of the conceptual design into detailed wireframes and technical specifications of the multilingual cross-device content platform.

Afterwards, I co-led the cross-functional team during UI Design and Engineering until launch.

 The Challenge

Our aim was to provide easy, intuitive and open access to the historic material across all common devices.

All content is accessible via a timeline and a city map. Filters help the user to research topics like the border, escape attempts, contemporary witnesses, everyday life in East and West, politics, opposition, etc.

We tried to serve heterogeneous user types and scenarios with our design.

Accordingly, we stored all video content in different resolutions and versions in the Python-based content system. Therefore, we could support an equally fluent experience to users independent of their chosen device and type of internet connection.

 

THE APPROACH

Development of the responsive content-platform

  • Daily Deliverables

    Evolving step-by-step

    Turning product ideas from sketches and wireframes into the final UI and code

  • Conceptual Approach

    Responsive Design

    Mobile first and progressive enhancement have been our guiding principles for the responsive design

Wireframing & Prototyping

Wireframing & Prototyping

"Mobile first" and "Progressive Enhancement" were my guiding principles. Thusly, I defined the details of the application in wireframes and a keynote prototype for my team members and to coordinate the development with the clients’ product managers and editors.

Requirements & Specifications

Requirements & Specifications

I supported the development team with requirement definitions and specifications to build a solution for video delivery in different resolutions according to the device type and internet connection.

Cross-functional collaboration

In daily standups, we easily organised our cross-functional team collaboration and also invited our project colleagues on the client side for weekly reviews and planning sessions.

Responsive Design Planning

Responsive Design Planning

In collaboration with visual designers and engineers, I optimized flows and specifications for the design of our web application for smartphones, tablets and desktop devices.

  • Conceptual Design Deconstructed

    Parallax Effect

    Communicating history in several layers

  • Conceptual Design Deconstructed

    PARALLAX EFFECT

    Paintings by international artists, photographed at East Side Gallery

  • Conceptual Design Deconstructed

    PARALLAX EFFECT

    Archive videos from East & West TV stations SFB/rbb & GDR TV

  • Conceptual Design Deconstructed

    PARALLAX EFFECT

    Historical pictures about daily life in East & West

 

THE RESULT

www.the-berlin-wall.com

 

Merken

Merken

 

 responsive web app

We were aiming to create a user experience similar to a native app, integrating the editorial benefits of a website. Taking different user scenarios into account, we realized an intuitive interface to explore history, teach history or curate your own documentary playlist.

Parallel to accompanying the development of the web app, I developed conceptual designs to consult rbb about how to additionally support walking tours through Berlin.

I also contributed a concept for using the previously edited video data in an additional native application with Augmented Reality techniques.

 

Timeline

Timeline

Research historic content by date and filter category

Map

Map

Find historic content by location and discover indicated location while watching the videos

Create a documentation

Create a documentation

Interesting feature also for history classes and presentations

Choose a city tour

Choose a city tour

History guide in your pocket for your Berlin walking tour

  • http://www.the-berlin-wall.com

    The Berlin Wall

    A multimedia history platform by rbb (member of the German association of public broadcasters)

  • Annual Multimedia Award

    Best Website 2015

  • 25th anniversary of the fall of the Wall

    Digital meets analog

    The content-platform got integrated into the official celebrations and events in Berlin on the occasion of the “25th anniversary of the fall of the Wall"

  • Mentioned on the national evening news

    Tagesschau

  • Editorials

    Making of

    Featured interviews and whitepapers about our production process, for example in Weave

Merken

Merken

Merken

Merken

Merken

Merken