Master project
How can we mindfully visualize information for a
sensitive education about infertility?
Involuntary childlessness is a challenging situation because existential fears and poorly prepared information material make it difficult to come to terms with one’s own infertility. On the Internet as well as in the treating practices, educational materials are often e
Together with the fertility center of the Hirslanden Klinik St. Anna, a visual language and media concept was developed to provide gentle and well-founded information about involuntary childlessness.
01 Research Phase
Many affected women seek advice on the Internet, as doctors’ offices often cannot reconcile the desire for factual information and simultaneous compassion during the consultation. This leads to stress and frustration among those affected.
How can this stress be reduced? To find out, I turned to my own environment by means of a social media survey. When asked what is generally perceived as calming and gentle, the respondents mainly answered with terms from nature, which seems to be an intuitive place of relaxation and recreation for us.
Visual and Color Research
Why does nature help us with stress? We can instinctively process and interpret natural stimuli more easily than urban stimuli. If one speaks of a “nature-based design”, it not only includes a “natural” aesthetic, but also a reduction of technical stimuli. Transferred to the visual language
and aesthetics, visually perceptible elements of nature, such as color, shapes and lighting conditions, can help those affected to learn new content in a stress-free and mindful manner, because natural life and natural landscapes allow us to relax.
01 Media Concept
A sensitive education
The web prototype “Make a Babe. Differently” combines the desire for compassion and reliable as well as understandable information. Mindful imagery and use of text supports the user’s own research and gently explains characteristics of disease patterns as well as chances and risks of treatments.
Besides making the information understandable and reducing stress, “Make a Babe. Differently” can also reach those affected easily due to it’s planned online presence.
Try it yourself! – click on the Link or the image above to view the web-prototype in another tab.
Wireframe
The current version of the prototype deals with polycystic ovary syndrome (PCOS) as clinical picture and its treatment with anti-estrogens (Letrozol). In future this system can be translated to other fertility problems.
Guidance
In order to avoid that viewers don’t find their way through the information, it is recommended to be guided by the prototype. The showcased topics build on each other. In later development, the click system will be replaced by an endless scroll system.
In some places, the user has the opportunity to decide on the sequence of topics. For example, an introductory symptom quiz offers the possibility to jump directly to the desired clinical picture.
Comparisons
In order to better understand clinical pictures, the prototype offers the possibility to switch
to a healthy representation at relevant points. Through direct comparison, differences in the
affected organs and hormones become clearer.
Bar charts
They explain more complex topics such as the hormonal concentration during the female cycle.
Small animations help to visualize the differences as well as the rise and fall of the hormones.
Bar chart to showcase the hormonal concentration during the female cycle 
Bar chart to showcase the concentration of insulin
Social Media Representation
On social media at @makeababe, the goal is to convey content to the target audience and provide them with a trusted source. From here, they are directed to the web prototype.
03 Visual Language
Leadimage: overview 
Leadimage: hormonal cycle under PCOS 
Leadimage: the healthy ovary
From model to illustration
The basis of all illustrations is a specially constructed and rendered 3D model of the female reproductive organs. This form of representation alone, however, can quickly appear contrived and artificial. Only by painting over the organs and subsequently adding textures creates the desired soft and natural effect.
Sketch 
3D rendering
Edited 3D rendering
Digital Painting
In particular, fine image areas such as the fimbriae that guide an egg from the ovary into the fallopian tube are difficult to represent without subsequent processing. The same applies to highly detailed areas such as the interior of the ovary. Subsequently applied textures allow for more precise design….
The color coding
We associate blue with vastness and clarity. Therefore, a blue background is used to create overview illustrations. Warmer colors like beige can appear very physical, but in nature they can also represent drought and disease.
Therefore, beige is used as a background color for unhealthy illustrations. Green backgrounds or pistachio-colored ones, on the contrary, serve as positive color coding for healthy and treated conditions.
Graphic Elements
Effects and interactions of hormones and medications require a high level of attention due to their complexity. Vector-based graphic elements and clear, reduced lines can help out.
Together with a deviating color scheme, they clearly stand out from the natural base image. Artificial active ingredients are shown round and white to distinguish them from the body’s natural hormones.
Prototype animation: the hormonal cycle under PCOS
Artificial active ingredients’ function within the hormonal cycle of PCOS patients.
Aknowledgements
Special thanks goes to my scientific mentor Dr. Sabine Steimann & my design mentor Fabienne Boldt-Spinnler
Emily Strowitzki 