Web interface for a
knowledge transfer tool
for research museums
— HIRED BY
FU Berlin, Faculty HUMAN CENTERED COMPUTINGIKON
— PROJECT REQUEST
Improvement of web interface and development of a functional prototype
— ROLE
UX / UI
Visual Design
Project Coordination
— PROJECT TIME
3 Months
— FURTHER LINKS
— DEVELOPMENT
— MOTION DESIGN
— PUBLISHED ON
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 1 – I 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 www.r-o-o.com.
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
Learnings.
⭐️
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.