Designing A Web-based Clinical Counseling Tool About Disorders of Sex Development

Shelley L. Wall, AOCAD, BA, MA, MScBMC, PhD; Michael J. Wiley, BSc, MSc, PhD; Barbara J. Neilson, Res Dip SW, RSW; Jodie Jenkinson, BA, MScBMC; Gordon Tait, PhD; Darius J. Bägli, MDCM, FRCSC, FAAP, FACS.

Download PDF

An online clinical counseling website was developed by the authors to address the need for sensitive, highly visual, easily understandable instructional material  to teach parents about disorders of sex development (DSD). During the design process, focus groups were conducted with parents at the DSD clinic of a major pediatric teaching hospital to assess usability, optimum levels of visual complexity, and educational value. Since its launch, the site has had a demonstrated positive impact among patients, families, and clinicians. 


Figure 1. A screen capture from the prototype website, showing the gender-neutral palette based on a triadic color scheme. © 2007 The Hospital for Sick Children. Reproduced with permission.

Figure 2. An example of three versions of an image, representing infants of three different racial origins. One of these versions loads randomly each time the page is accessed. © 2007 The Hospital for Sick Children. Reproduced with permission.

Figure 3. Click on the numbered “week” buttons under each image to view these paired animations demonstrating the evolution of the uterus and spermatic ducts from the Müllerian and Wolffian ducts. © 2007 The Hospital for Sick Children. Reproduced with permission.

Figure 4. Drag the slider button from left to right to demonstrate the “zipping up” of the penile urethra. © 2007 The Hospital for Sick Children. Reproduced with permission.

Figure 5. Drag the slider button from left to right to demonstrate the degrees of virilization in an XX infant, as designated by the Prader scale. © 2007 The Hospital for Sick Children. Reproduced with permission.

Figure 6 . An example of illustrations of the female neonatal urogenital system rendered with varying degrees of complexity. In our evaluations, most parents preferred the most complex illustration (on the right).


We have developed an illustrated, interactive, web-based counseling tool about prenatal sexual differentiation and disorders of sex development (DSD) for use by clinicians in patient, or parent-teaching sessions. DSD, formerly called “intersex conditions,” are a broad range of congenital, biological conditions in which an individual’s gonadal, chromosomal, or anatomical sex development is atypical (Hughes et al. 2006). The website we have created differs from other online resources about genital development and DSD in that it is intended for active, hands-on use as a demonstration tool; the illustrations and animations replace the clinician’s hand-drawn diagrams or desktop models as teaching aids. When the counseling session is over, parents can refer to the material or share it with family members, as desired, anywhere they have access to the internet.

Before the launch of this resource, no comprehensively illustrated patient- or parent-directed educational material about DSD was available (Feder 2000; Neilson 1999). Most resources are largely or exclusively textual, and often pitched at a high literacy level. ¹ Where illustrations are used, these tend to cluster around one of two poles: very simple diagrams, or images that are affective rather than didactic—pictures of happy families, well-adjusted children, caring doctors, and so on. ² The online information provided by DSD advocacy and support groups follows the same pattern of minimal, non-didactic, or nonexistent visuals. Given the demonstrated value of pictorial illustrations in enhancing comprehension (Levin et al. 1987), and the established presence of the internet as a source of healthcare information (Bass et al. 2006), we believed that a flexible, highly visual, web-based teaching aid would be of significant value in explaining to parents and patients the chemical and dynamic anatomical changes involved in urogenital development and variation.

The incidence of some form of DSD has been estimated at 1.7 % of live births (Fausto-Sterling 2000); one researcher points out that physical sexual ambiguity is about as common as cystic fibrosis or Down syndrome (Preves 2003). Yet, until recently, DSD have been largely unspoken of, unrepresented conditions (Dreger 1999). Disorders of sex development carry a psychosocial burden that many medical conditions do not (Sytsma 2006). There is stigma, often shame, in being identified as having “abnormal” sexual anatomy. In addition to providing a didactic tool, therefore, we wanted to provide a resource that would help to counteract the stigma so often associated with DSD, by promoting a rational understanding of the developmental aspects of these conditions in a compassionate, objective, and reproducible manner.

The sex development website was initially developed as a prototype. A later iteration now forms part of How The Body Works, a suite of online clinical counseling resources created and hosted at The Hospital for Sick Children (SickKids), Toronto, Canada (

Development of the website: Methods

We developed a prototype website in three main stages: 1) needs assessment; 2) site design, storyboarding and programming; and 3) in-clinic evaluation through parent interviews.

1) Needs assessment

Content for the site was determined through interviews with members of the Multidisciplinary Urogenital Group (MUG) at SickKids, who manage and counsel the parents of children with DSD. Parents attending the monthly MUG clinic vary widely in education, cultural background, medical knowledge, comfort with illustrations of sexual anatomy, and exposure to clinical intervention; their children may range in age from newborn to adolescent; and the children’s medical histories and specific conditions also vary widely. The consensus that emerged in the course of our needs assessment was this: The one element common to these very diverse counseling situations is the need for clinicians to explain the process of normal ³ sexual differentiation, as a context for explaining each child’s individual variation. We decided to begin the project, therefore, by creating web pages demonstrating normal male and female sexual differentiation, and changes at puberty. Additional pages devoted to specific variations would be added once the first part of the project was launched.

2) Site design, Storyboarding, and Programming

Next, a medical illustrator/multimedia developer (Wall) devised the site architecture and created storyboards. The site was structured to allow both a chronological unfolding of the story of prenatal development (for independent exploration by parents and patients) and random-access navigation to specific pages (for focused teaching use by clinicians). The site architecture and storyboards were created in close consultation with a pediatric urologist, anatomist, pediatric urology social worker, pediatric endocrinologist, and other experts in biomedical communication and web design. Once these planning documents were approved, the site was programmed in Macromedia Flash MX™. Illustrations were created in Adobe Photoshop™ and Adobe Illustrator™, based on original drawings by the medical illustrator.

Specific decisions about the site’s design and aesthetics were guided by the mandate to produce a didactic, information-rich site that would be inclusive, calming, and user-friendly. This guiding aim influenced decisions about, for example, color palette, the depiction of ethnically-diverse children, the use of interactive animations, and the degree of visual complexity in static illustrations.­

Palette: In North American culture, pink and blue traditionally herald the birth of girls and boys, respectively. Because one aim of the website is to encourage an open, non-judgmental attitude toward variation, we wished to avoid the implications of the cultural shorthand of the pink/blue opposition. Instead, the prototype website was given a gender-neutral palette based on a green/orange/violet triad (Figure 1). In addition to avoiding gender stereotypes, these colors harmonize well because of their balanced spacing on the color wheel.

Ethnicity of children represented: Wherever possible, the website illustrates sexual anatomy, not as isolated body parts, but in the context of a whole, healthy child—a strategy that required several different, full-body views of female and male infants. Canada is a profoundly multi-cultural and multi-ethnic nation; serious consideration was given to ensuring that our illustrations of infants would reflect this diversity.  Each illustration of a child, accordingly, exists in three versions, representing three different racial origins (African, Asian, Caucasian) (Figure 2). Each time a page on the site is accessed, one of these three full-body versions loads randomly, then yields to isolated anatomical images through a series of zooms. The illustrations were created with Adobe Illustrator’s calligraphic pen tool, to preserve the intimacy of a hand-drawn image in the digital environment.

Use of interactive animations: Wherever appropriate, we have used animations rather than static illustrations to depict dynamic embryological processes. Animations can convey more clearly than static illustrations the continuities between apparently very different states—between the Wolffian and Müllerian ducts at seven weeks of development , for example, and the uterus or spermatic ducts of the newborn (Figure 3), or between the indifferent genitals and those of a baby girl or boy. Animations such as these, showing the continuity between different anatomical shapes, are symbolically important in the depiction of DSD: they allow variations from typical dimorphic sexual anatomy to be seen, not as freakish departures from what is “normal,” but as variations along a continuum (Kessler 2002; Sytsma 2006). Furthermore, we speculate that visualizing for parents the morphing of indifferent structures into more atypical variations characteristic of children born with DSD may not only help them understand how their child has developed, but also alleviate possible feelings of guilt about the child’s condition.

Animations also have the advantage of involving the user in the construction of information: by breaking animations into sequential, mouse-controlled steps, and through interactive slider bars, we have given users the ability to control the pace of animations and to revisit key steps where necessary. Interactive slider bars also allow some graphics to be customized. An animation of the “zipping up” of the urogenital folds to form the penile urethra (Figure 4), for example, can be halted at any point to represent varying degrees of hypospadias. The Prader scale, likewise, has been animated along a user-controlled timeline (Figure 5) so that any degree of virilization of female anatomy can be represented in the course of a teaching session.

Degree of visual complexity: Genital anatomy and sexual variation are highly sensitive subjects. The embryology of the urogenital system, moreover, is complex; its concepts and vocabulary are unlikely to be familiar to a lay audience. In designing illustrations for this complex and sensitive subject matter, we sought to determine what level of visual detail would be appropriate to the task. Simple diagrams may lessen the discomfort some parents feel at the depiction of sexual anatomy, and convey basic concepts rapidly. More organically complex images, on the other hand, may promote a more accurate understanding of anatomy and development, and lead to more fully informed decision-making. Such information-rich visuals take longer to understand, and require greater attention from the learner (Peeck 1987). Determining an appropriate level of visual complexity was one aim of our in-clinic evaluations.

3) In-clinic evaluation through parent interviews
To assess visual complexity, we conducted six interviews (with five mothers and one father/mother pair) over the course of two MUG clinic meetings at SickKids. Of the families interviewed, five children were in the four- to eight-year-old range; one was an adolescent. All had been followed clinically since shortly after birth. Using a simple Flash interface, we showed each parent a series of prototype illustrations (Figure 6), and asked them multiple-choice questions to determine which illustrations they found most informative and which they preferred. Each illustration was shown in three versions: a) a simple, diagrammatic version; b) a more visually complex version incorporating visual cues such as directional light and volumetric shading; and c) a fully rendered version incorporating information about texture as well as the more sophisticated visual cue of transparency to indicate anterior-posterior relationships.

One parent preferred the median version (b); all other respondents preferred the most highly rendered version (c), commenting that it was “more realistic,” gave “more detail,” looked more “natural” and transmitted more information. Parents also said that they would use these same illustrations to teach their children. As a result of these interviews, we decided to render static illustrations as fully as possible, including information about texture, volume, and the subtleties of organic form. This decision runs counter to the standard approach to patient education, which is to simplify visual representations (Rohret and Ferguson 1990).

Once the prototype site was completed, we conducted further informal in-clinic interviews to evaluate the site for usability. We invited respondents to navigate the site on their own, observed by two members of the site-development team, and to comment on any problems they had in understanding site layout and navigational cues. The insights we gained from these interviews fed back into revisions to page layout and navigation.

Outcome and discussion

Once a sound prototype had been developed, tested, and revised, it was integrated into SickKids’ Child Physiology Web Project, the precursor of How The Body Works. The sex development website went live in November 2004. The site as first launched covered typical genital development only; subsequently, sections on congenital adrenal hyperplasia and hypospadias, two major forms of DSD, were completed and launched.  A section on androgen insensitivity syndrome is currently in development.

Since its launch, the site has been used in clinical counseling at SickKids in the MUG clinic and the Neonatal Intensive Care Unit. Extensive e-mail feedback (approximately 50 e-mails to date) indicates that it has been used for clinical counseling in other centers as well. Netzwerk Intersexualität, a German research and support network for DSD, has collaborated with SickKids to translate the site into German ( The site has also been accessed by individuals seeking to understand their own condition. We have received feedback through personal communications to members of the development team and through a “feedback form” accessible by a link at the bottom of the Child Physiology web page. This feedback has come from across Canada and the United States, and from Sweden, Australia, New Zealand, Italy, Israel, Turkey, France, Germany, and the Netherlands. Responses have come from people with DSD, parents, professionals involved in research and teaching, and students in the life sciences, among others.

Below is a selection (necessarily anonymous) of some of the comments we have received:

I received notification about the site on [a pediatric endocrinology] list serve on the weekend. I had a new baby with ambiguous genitalia on Saturday and shared it with the family.
- Clinician

I am a mom with a young child with CAH. This site would be perfect for her to learn about her condition.
- Parent

I teach Biology of Human Sexuality at a university, and these websites will be extremely useful to me and the students.
- Educator

Your site has absolutely the best diagrams and explanations for the different intersex conditions of which I’m aware.
- Researcher

My daughter was born with classic bladder extrophy… Just showing her the pictures of development helped her understand what happened to her body when she was developing! GREAT INFORMATION.
- Parent

The sex development site received an important endorsement in 2006, when the Lawson Wilkins Pediatric Endocrine Society and the European Society for Paediatric Endocrinology published a consensus document on the clinical management of DSD. As a general concept of care, the authors note that “[p]arents need to be informed about sexual development, and web- based information may be helpful, provided the content and focus of the information is balanced and sound” (Hughes et al. 2006, 555); as an example they provide the web address of our site. Another important endorsement has come from the Consortium on the Management of Disorders of Sex Development, a collective of people with DSD, their family members, researchers, clinicians, and other patient advocates. In their handbook Clinical Guidelines for the Management of Disorders of Sex Development in Childhood, they cite the SickKids sex development website as a core resource (ISNA 2006a, 41); in their Handbook for Parents, they supplement their discussion of genital development with a referral to the site (ISNA 2006b, 71).


The sex development website has had a demonstrated positive impact among those who live with and counsel patients and families about urogenital conditions. One reason for this success, no doubt, is that the site provides visual explanations for a complex medical, anatomical, and embryological process that has not been adequately represented in the past. Another reason we believe the site is a successful educational tool is that it employs design strategies that address critical psychosocial issues specific to DSD, such as the use of non-gender-coded colors, the holistic emphasis on healthy children, and the representation of anatomical variation as part of an inclusive continuum. In adopting these design strategies, the site achieves sensitive, non-stigmatizing visual communication about an aspect of development that has too often been a source of undeserved shame and emotional suffering.


The authors thank the families at the MUG clinic, SickKids, who shared their time and perspectives.
This project was funded with assistance from The Research Training Centre at The Hospital for Sick Children, and The Vesalius Trust.


Bass, Sarah Bauerle, Sheryl Burt Ruzek, Thomas F. Gordon, Linda Fleisher, Nancy McKeown-Conn, and Dirk Moore. 2006. Relationship of internet health information use with patient behavior and self-efficacy. Journal of Health Communication 11: 219-236.

Consortium on the Management of Disorders of Sex Development. 2006a. Clinical Guidelines for the Management of Disorders of Sex Development in Childhood. Rohnert Park, CA: Intersex Society of North America. Available online, (accessed September 20, 2007).

Consortium on the Management of Disorders of Sex Development. 2006b. Handbook for Parents. Rohnert Park, CA: Intersex Society of North America. Available online, (accessed September 20, 2007).

Dreger, Alice Domurat. 1999. A history of intersex: From the age of gonads to the age of consent. In Intersex in the Age of Ethics, ed. Alice Domurat Dreger, 5-22. Hagerstown, MD: University Publishing Group.

Fausto-Sterling, Anne. 2000. Sexing the Body: Gender Politics and the Construction of Sexuality. New York: Basic Books.

Feder, Ellen K. 2000. Doctor’s orders: Parents and intersexed children. In The subject of care: Feminist perspectives on dependency, ed. E.F. Kittay and E.K. Feder, 294-320. Lanham, MD: Rowman and Littlefield Publishers.

Hughes I.A., C. Houk, S.F. Ahmed, P.A. Lee, and LWPES1/ESPE2 Consensus Group. 2006. Consensus statement on management of intersex disorders. Archives of Disease in Childhood 91(7): 554-563.

Kessler, Suzanne J. 2002. Lessons from the Intersexed. New Jersey: Rutgers University Press.

Levin, J.R., G.J. Anglin, and R.N. Carney. 1987. On empirically validating functions of pictures in prose. In The psychology of illustration, Volume 1: Basic research, ed. D.M. Willows and H.A. Houghton, 51-86. New York: Springer-Verlag.

Neilson, Barbara. 1999. Sex, lies and ambiguous genitalia. NAPSWFORUM 19(1): 1, 4-6.

Peeck, J. 1987. The role of illustrations in processing and remembering illustrated text. In The psychology of illustration, Volume 1: Basic research, ed. D.M. Willows and H.A. Houghton. New York: Springer-Verlag.

Preves, Sharon E. 2003. Intersex and Identity: The Contested Self. New Jersey: Rutgers University Press.

Rohret, Linda and Kristi J. Ferguson. 1990. Effective use of patient education illustrations. Patient Education and Counseling 15: 73-75.

Sytsma, Sharon E. 2006. Introduction. In Ethics and Intersex, ed. Sharon E. Sytsma, xviii-xxv. Dordrecht, Netherlands: Springer.


Shelley L. Wall, AOCAD, BA, MA, MScBMC, PhD, is a Lecturer, Biomedical Communications, Institute of Communication and Culture, University of Toronto at Mississauga.

Michael J. Wiley, BSc, MSc, PhD, is Professor and Division Chair, Division of Anatomy, Department of Surgery, University of Toronto.

Barbara J. Neilson, MSW, Res Dip SW, RSW, is an Academic and Clinical Specialist; Social Worker, Urology Program, The Hospital for Sick Children

Jodie Jenkinson, BA, MScBMC, is Assistant Professor, Biomedical Communications, Institute of Communication and Culture, University of Toronto at Mississauga.

Gordon Tait, PhD, is a Staff Scientist, Department of Anesthesia, Toronto General Hospital, University Health Network; Assistant Professor, Departments of Surgery & Anesthesia, University of Toronto.

Darius Bägli, MDCM, FRCSC, FAAP, FACS, is a Staff Urologist; Director of Urology Research; Associate Scientist, The Hospital for Sick Children; Associate Professor, Department of Surgery (Urology), University of Toronto.

Shelley Wall is a graduate of the Biomedical Communications program, University of Toronto. She worked as a multimedia developer at The Hospital for Sick Children before taking a full-time teaching position at her alma mater. Her research interests include gender issues in biomedical visualization, web-based biomedical communication, health writing, and communication for patient education.

Copyright 2008, The Journal of Biocommunication, All Rights Reserved
Table of Contents for VOLUME 34, NUMBER 1