Simon Stellwag

Web interface for a

knowledge transfer tool

for research museums




Improvement of web interface and development of a functional prototype



Visual Design

Project Coordination


3 Months


IKON – Project


Room of opportunity


Philip Krüger


19th April 2020 from

Moscow, Russia

Background of the project

This web application is part of a bigger research collaboration between the Natural History Museum in Berlin and the Humas-Centered Computing department of FU Berlin. An endeavour to develop a system that visualises research project data and its potential for knowledge transfer in research museums like the Natural History Museum. Making this information available across disciplines and organisations.

My project contribution

Part 1I was asked to improve and extend the user interface of an already existing prototype. Structuring interface elements and bringing consistency to achieve more user friendly experience.

Part 2 – Extending the existing functional prototype. Developing and implementing the improved user interface design elements. Which was achieved by my friends at the remote development studio room of opportunity.

Original prototype

Improved prototype

Phase 0

Knowledge transfer from client. Learning about the Project.

It all starts with collecting information and asking questions – How do researchers work in a museum? Where is their work and information stored and who has access to newly created knowledge? How is this distributed and how can we connect it?Knowledge transfer from client. Learning about the Project.

Phase 1

Visiting the museum & learning about the project environment.

Stepping away from the Screen gives me a creative boost. Besides getting closer to the real project environment, it is a fundamental part in my design process. It gives you the ability to see things that you would not notice starring at a screen.

Entrance Hall of the Museum für Naturkunde in Berlin. Picture is take from Museum’s website © by Naturkundemuseum Berlin

Biodiversity wall at the Museum für Naturkunde – It is the inspiration for the Grid and Colours used in this project. Picture is take from Museum's website © by Naturkundemuseum Berlin

Phase 2

Grid. Colors. Fonts. Icons.

The more complicated the work the more structured it needs to be. Laying the basic foundation on what to build on helps me to create a universe where the project lives.

Phase 3

Some little Movement

Animation support by Philip Krüger.

Phase 4

Finalising visual design, UX and UI. Preparing handover to Development.

We usually start the development phase when almost every element finds its place and finish the interfaces in super close collaboration with our development partners from

Phase 5

Development of the

web interface.

We were asked to improve the existing prototype, so we closed this project after delivering design and code to the client. 

The Development of this web interface was achieved in close collaboration with Mof, who was coordinating the development team and taking care of client’s tech requirements.

By the end of this project we delivered a functional prototype to our client.

Phase 6



Click dummies and Prototypes need movement in form of animations and transitions.


If you can not write down a task and explain it to another person, don’t start working on it.


Researchers are very busy people.


Do not experiment with version control tools on a real project. You will have to work double to restore work progress.