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.
Work in progress, assets and colors
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.
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 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.
UI Architecture & an overview of all the detail from the final visualization
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.
Exploration of different visualizations and designs for the graph inside the faculty layer
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.
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
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.