Gender Study Contrast

Team: Felix Stricker and David Wyssen
My Role: I was involved in research, concept, UX, UI & user testing
Created within: 4 weeks as part of the data visualization course, BA Interaction Design at ZHDK in 2015

The proportion of Women and Man still differentiates in a lot of areas of life. This divergence is also strongly visible in the elected majors of education.

With Gender-Study-Contrast, we visualise this ratio between studying women and man in the canton of Zurich over the last decade.

Concept video (currently only in german)

Visualise the progress of gender ratio

During our research, we stumbled over a study of the department of equality in the city of Zurich. The study focuses on the development of the percentage of women in education over the last decade. Our goal was to visualise this progress of gender ratio at Zurich's universities in a specific, precise and interactive way. All data is based on an open-dataset by the education statistics of the canton Zurich.

Expanding bar charts

We intended to build a system based on vertical bar visualisations. One row always represents the gender ratio in every section. It is possible to dip into specific bars to get more precise data about the chosen segment. It is possible to explore, filter and compare all data from university, faculty and mayors over the last decade with just a few clicks.

Gender-Study-Contrast
Work in progress - assets and colour exploration

From wireframes to a working prototype

We started with simple wireframes in Balsamiq to fix the main structure of our visualisations. In this phase, we also experimented with more complex ideas and arrangements and with first user test, we tried to break our wireframe down to the essential.

Gender Study Contrast Gender Study Contrast Gender Study Contrast Gender Study Contrast Gender Study Contrast Gender Study Contrast
Wireframes, exploring & setting the main structure of the UI architecture

It is in this phase that we came up with the expanding bar charts. Furthermore, we introduced breadcrumbs to jump in between the different layers. In the next step, we focused on a colour palette and played around with gradients that would harmonise together and give each element enough contrast, so the user won't get lost.

Gender-Study-Contrast
UI Architecture & an overview of all the detail from the final visualisation

Through our user test, we found out, that it would be meaningful to jump in-between years of one faculty to compare the data and visualise in which years there has been an in-/decrease of gender in specific faculties.

Luce Device Rendering
Exploration of different visualisations and designs for the graph inside the faculty layer
Luce Device Rendering Luce Device Rendering

We also intended to code the whole visualisation as an online prototype. We used the data-driven d3.js library and the dataset from the education statistics of bista.

UX Architecture

The whole visualisation is divided into three layers. First, the user can choose a year, the second layer is focussing on the different schools and universities, and the third layer is dedicated to the faculty. The height of the bars always represents the total amount of students.

You Personas
3-layer architecture with the possibility to change into any layer at any time

In a more detailed look, the user can see and compare the progress of a single faculty over the last decade. A simple point-graph shows the progression

You Personas
The final graph helps compare a faculty over the last decade without leaving the layer

Insights gathered through the visualization

There is an increase in women who are studying (still counting). Despite the rise in women studying, the university ETH is still male-dominated. The amount of male is more significant in sectors of economics, sciences and technics. However, the amount of women is more significant in humanistic disciplines, social sciences, veterinary medicine and teacher training. In mayors who are provided by Zurich University and ETH, most women start studying at Zurich University.

We had the chance to display a working prototype of Gender-Study-Contrast at the Grafik 15 exhibition in Zurich.

Our working prototype can still be tested here.

You Personas

Wanna know more about this project? Just reach out!