Home > Design, english, Interaction, My Experiments > Personalize the online platform medizintechnologie.de

Personalize the online platform medizintechnologie.de


After launching the online guide for developing medical devices, our team had the chance to rest a little bit and dealt with some minor improvements for the platform in general (see our Kanban Board, other inspirations on Agile Board Hacks).


Medizintechnologie.de Kanban Board

We used and adapted the Kanban Board method for our coordination.


Beside of those minor tasks on our board, we had to explore these additional user needs for our next milestone:

  • Improve user engagement through a customized and personalized online guide
  • Increase the level of learning for the online guide without being too theoretical
  • Improve decision making  skills of a medical product development through online tools
  • Improve the quality of grant applications for medical products

After some internal meetings with our copywriters and the medical engineering team, we figured out some key features for our new service in a very abstract sketch.


Sketching the new features

Sketching the new personalized service of medizintechnologie.de


Beyond that abstract sketching process, we decided to keep our good working procedure from our previous milestones. All feature requests, coworker and stakeholder feedback were again gathered at my position. It was my task to develop a set of prototype ideas based on that given input. The challenge for the new service was to implement a customized and personalized medizintechnologie.de version.

Honestly, I was pretty exhausted after the launch of the InnovationLotse. I had suffered slightly of a creative trough. Luckily, a lot of literature and movies exist about that problem of mind work. One of the first solutions for this problem was to arrange my daily routine back to normal, which comes close to this day structure.  The next step for stimulizing my creativity was a web and literatur research on e-learning and creative techniques.


Book Interface Design for Learning

Book Interface Design for Learning


For my research I read some standard E-Learning texts and I found this very helpful book Interface Design for Learning by Dorian Peters. The notes of my research were put on my pinboard in an cluster-based order (see picture underneath). The advantage of a pinboard is its strong collaborative character. Every coworker was invited to come in my office and check the current state of (research) work. Some very useful just-in-time feedback came in by them, while we had short coffee breaks conversations.


Cluster groups of my research notes

Cluster groups of my research notes


After the research on creative techniques, I had chosen the Walt Disney Method, because it fits the best to my way of thinking. So I started to brainstorming about the new medizintechnologie.de service from a day dreamer view and in the second brainstorming round from a realistic point of view. Additionally, I enriched my thinking experiments with some inspirations, sourced by common UI libraries for Dashboard Design. This base of information was more than enough for me that I could get started with some wireframe collages. After a few hours my creativity came back and I was able to enter the Flow state. One wireframe sketch after the other was scribbled.


wireframe collage

Starting process of a wireframe collage


collage in progress

wireframe collage work in progress


Wireframe Collage

A collage of a wireframe, half scribbled, half glued


scribbled wireframe

a complete scribbled wireframe after warming up my mind


During my sketching process, I took care about features that fit into a context-based design. That means a collection of features, which are strongly connected with each other, are summarized into one wireframe sketch. That makes the UX and the technical implementation of Page Reloads (SEO optimizing) and Single Page Interaction much easier. Furthermore, it simplifies the comparison of the other prototype version. A discussion about a context and its features is more framed than just a list of loose coupling features. Another benefit of this approach is the requirement engineering, which gets closer to a user centered design perspective with that context-based method (in my opinion).

After the fast process of scribbling, the software Balsamiq was used to make everything digitally available. The low-fidelity prototypes got their interactivity through my programming with Adobe Flash. In my opinion Flash is still a powerhouse for rapid prototyping. It works perfectly together with graphic design tools and the programming environment for basic stuff is more than enough for the most use cases. Additionally, Flash enables the export of a whole prototype in one file. An exe (for Windows) or .app (Apple MacOS) file can be sent to the stakeholders. Those stakeholders can start the prototype with "one click" and without installing any additional software. In my opinion that is a key feature for environments with restricted IT infrastructures (usually the case in big enterprises).


Wireframe Evaluation

Comparison of the prototype versions

Project oriented Wireframes

Project oriented Wireframes

Personalized oriented Wireframes

Personalized oriented Wireframes










Both interactive prototypes were presented by me on our big milestone meeting. I decided to do a live presentation of the interactive prototype version, while I explained the different contexts, functions, and ideas. Afterwards I turned around the two big cardboards with the clamped wireframe prints (see the pics above). Every workshop participant got 2 blue points and 3 green points. The blue points meant high priority context and the green ones were for a nice to have context. This metaplan moderation made the whole meeting a little bit more physical active. Another advantage of this format was that the participants were allowed to have short conversations in small groups in front of the wireframe sketches. Furthermore, introvert and shy participants get the same voice without getting suppressed by more dominant ones. After 10-15min everyone went back on their places. The result was a clear priority voting, which contexts we would like to implement in the future and which we had to discuss in the limited time of the meeting. We started with the highest rated one. For each wireframe screen or context, I asked why the participants have voted for it and if questions exist to that screen. At the end we figured out, that a project oriented online guide would not be reasonable. Every participant (managers, medical engineers, copywriters, web developers and designer) agreed with the made decisions and we could go on with our other topics.

Directly after that milestone meeting, the results and feedback were integrated in new wireframe sketches. A new version of an interactive klickdummy was created by me. Then a list of user stories, wireframe prints, and the klickdummy were summarized to our new design specification. This design specification was sent to our internet agency, who implemented then this new version for the Medica 2015.

The interactive tools for our online guide were mostly conceptualized directly from our medical engineering experts. In some cases a developer or a designer checked the concepts on technical or design issues. If an issue emerged, both coworkers came together and developed a valid solution for that problem. Those tool concepts were sent again to our agency. End of November 2015 we provided these interactive tools for our users:

In Mid of November, we successfully launched the new service MeinMedizintechnologie.de at the Medica. From this time on, our users were engaged to bookmark interesting articles, save the results from our tools, and share them with their coworkers.

The next step would be from a Designer perspective to create a pattern library for medizintechnologie.de. But the winter was calling me. So I decided to follow my inner drive and left my employer VDI Technologiezentrum GmbH and the great medizintechnologie.de team.


Mein Medizintechnologie.de Startpage

Mein Medizintechnologie.de

Checklist product specification list

Checklist product specification list

Decision tool for medical devices

Decision tool for medical devices










Distribution Evaluation

Checklist distribution partner evaluation

Make or Buy Decision Tool

Make or Buy Decision Tool

public grant calculator

public grant calculator










This last 3-4 years working for medizintechnologie.de was pretty intense. I am still surprised how well we mastered some of the critical states. Big kudos to my coworkers and the team! We always supported each other so good, that I hope to get such experience again at my future opportunity.


  1. admin
    November 18th, 2016 at 20:54 | #1

    Some interesting design frameworks for digital product development are published by

    Mozilla -> Open Innovation Toolkit
    IDEO, d.school, Dan Nessler -> The revamped Double Diamond
    Google -> Design Sprint Framework | Review

    A little bit off-topic, but still a nice read about Ritual Design

  2. April 13th, 2017 at 10:54 | #2

    Two very interesting article for further deatials how to work on bigger projects:

    The Component Cut-Up Workshop – Kickoff a Design Library Effort by Engaging the Whole Team

    How To Deliver Large-Scale Projects Using A Content Hub Strategy

  1. No trackbacks yet.