Gender Study Contrast

Interactive Data Visualisation



Designed together with Felix Stricker and David Wyssen

My role in the project: research, concept, screen design

4 weeks 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 visualize this ratio between studying women and man in the canton of Zurich over the last decade.

Conceptvideo (currently only in german)

Visualize the progress of gender ratio

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

Expanding bar charts

We intended to build a system based on vertical bar visualizations. One bar 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 section. 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
UI-Architecture, first layer where a user gets an overview of gender-ratio over all years and can dive deeper into a specific year

From Wireframe to a working prototype

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

Gender Study Contrast Gender Study Contrast
Wireframes, 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 breadcrumps to jump inbetween the different layers. In a next step we focused on a color palette and played around with gradients that would harmonize together and give each element enough contrast, so the user won't get lost.

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

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

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

UI 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 progess of a single faculty over the last decade. A simple point-graph shows the progression

You Personas
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 increase of women studying, the university ETH it still male-dominated. The amount of male is bigger in sectors of economics, sciences and technics. However the amount of women is bigger in human disciplines, social sciences, veterinary medicine and teacher training. In mayors which 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

Now it’s your turn, say Hi or just give me a digital highfive 👋 let’s act now!