dying is not an abrupt
end

digital and analog research phase
After the topic was defined and we had collected a large pool of content, it was time to structure the whole project.

detailed information structure
Since there are five phases in which the process of dying can be roughly subdivided, it was obvious to construct the information architecture in one line and linearly. So we decided to build the narrative form linear as well. In order to give the user the opportunity to discover the system in an explorative way, we developed side stories for each phase. These round off the content and also provide an optionally explorable user experience.

interaction and navigation
Since the projection is shown life-size, the interaction is a challenge. Here is a touch operation not possible, because you are too close to the content and it is difficult to record it at a glance. That's why we decided that interaction must be possible from a certain distance in order to optimally perceive the entire content of the system.

the gesture control
The great advantage of gesture control is that no external device is required. In addition, it can be used intuitively after learning the gestures and does not distract from the content. To navigate through the system we have chosen simple gestures: a swipe gesture to the left or right to navigate forwards or backwards. A swipe gesture up or down to open or close a side story. The open hand to control the cursor and the closed hand to select something. These gestures make all functions of the system easy to use.

the approximation stages
Our Idle-mode is intended to attract the user's attention to the system from a distance. We animated the illustrations of the most important phases and integrated them as a video loop on the start screen. In addition, we placed our theme "the process of dying" as a headline next to the animation. To attract the user to the system, there is a short introductory text under the headline. However, this is only well visible by some closer distance. Two meters before the projection there are clearly visible footprints on the floor. These serve as optional distance markers and start the system with an introduction to gesture control as soon as the user stands on them.

defining a layout for the system
‍The Facit typeface developed by Tim Ahrens gives the typographic elements a contemporary and easily readable overall image that does not attract too much attention and thus brings the visual content to the foreground.

The black background immerses the projected surface in the somewhat gloomy world of the chosen topic and allows the luminous texts and illustrations to come to light more clearly. The text fields are located at eye level to the left of the graphic elements. The illustrated body occupies the largest area, as the illustrations and animations are to be in the foreground. However, to ensure that the text is still pleasant to read, the illustrations are placed on the right half of the projection. The user's natural reading flow begins at the top left where our progressbar is placed in case of that he/she keeps always the orientation.

illustration and animation
For the final illustration we orientated ourselves on the first variant of the hero from our sketches. Although, we reduced the opacity of the body silhouette to emphasize important objects such as organs and blood circulation. We assigned different colors to the organs, as these were hardly distinguishable when all are active.

Since it should be clear that an organ is selectable or has been selected, we have assigned different hover states to the organs. In addition, we have shown the organs in white if they are not relevant and in grey if they are no longer functional.

In order to convey the sometimes complex content in a simple and understandable way, most of the illustrations were animated. Easing, motion blur and magnifying glass effects bring the illustrations to life.

how we bring our concept into reality
Our concept was implemented as a prototype in Principle. This serves for the representation of the expiration of the application and simulates our system in action. The layout designed in Sketch was filled with graphic content drawn in Adobe Illustrator and animated in Adobe After Effects.