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 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.

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

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 UIlibrariesforDashboardDesign. 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.

Starting process of a wireframe collage

wireframe collage work in progress

A collage of a wireframe, half scribbled, half glued

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 PageInteraction 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).

Comparison of the prototype versions

Project 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.

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.