OSS Diversity Website
Open source software is important to sustaining the world’s infrastructure, and millions of volunteers help maintain it. However, growing evidence shows that people of different genders, particularly women, face particular barriers when contributing to open source software. To help visualize the issue, our team collected Github trace data for different open-source projects, analyzed the data based on gender diversity among contributors/commits, and then generated the appropriate data visualizations. This is a research project that was created through the use HTML, Tailwind CSS, and JS.
My Role
Frontend Developer, UX/Graphic Designer, UX Research
​
Team
Justin Wang - Backend Developer
Huilian Qiu - Project Manager
Zihe Zhao - Data Analyst
Dr. Bogdan Vasilescu, Dr. Laura Dabbish - Advisors
​
Timeline
12 weeks (June 2022 - September 2022)
​
My Contributions
1. Designing all the graphics with Figma to fit the desired color scheme, as well as all animations to make the user journey more memorable
2. Wireframing page layouts to find the most effective way to display information to users
3. Translating prototypes into comprehensive code with HTML, Tailwind CSS and JavaScript
​
Website Link
Project Overview
The main goals of the website were to provide information on the current state of gender diversity in OSS today, explain how we collected our data for the study, and allow users to generate and interact with graphs. In the final iteration of the website, there are three main pages. The home page is where we introduce the problem, lay out our mission statement, and describe how we collected and analyzed our dataset. The overview page is where we provided quick facts on open-source libraries and pointed out key trends in OSS diversity. The comparisons page is where users could generate graphs and visualize data for different OSS ecosystems.
At the beginning, I was given guidelines on what information needed to go on the website, but had a lot of freedom on the overall design of the project. I chose a purple and orange color palette, which you can tell I liked a lot by the colors of this portfolio site. I started off with five main pages, but would condense it down to three later on.
Iteration 1: Trying It Out
​
.png)
Iteration 2: New Overview Page and Logo
Since the Quick Facts page from the pervious iteration didn't contain much content, I decided to merge it into the Overview page, while also redesigning the entire page to be less "blocky" and more fluid/liquid. I also designed a new logo after discontent was expressed on the previous logo. I wanted the gear to represent the open-source community and the different sections of the gear to represent diversity within it.
Iteration 3: Color Change!
After reviewing the website, my advisors requested that the purple color of the website be swapped out for a more gender neutral color. I decided on green and changed all the colors of each page. I also condensed the Ecosystem and Comparisons page from Iteration 1 into one page, since both involved user-generated graphs. Lastly, I redesigned the home page to fit more with the fluid/liquid design style I was aiming for.
After implementing these mockups into code, we wanted to conduct usability testing to understand if users interacted with the site as intended. The link to the interview protocol is below.
https://docs.google.com/InterviewProtocol
​
After utilizing the think-aloud protocol and evaluating task completion among the users we tested, we found that some users were confused by terms on the website that weren't explained well (such as "Ecosystem"), as well as how the data on graphs should be interpreted (due to confusing labels). Changes were made in the final iteration to adjust for this.
​
​
Final Product
Simple animations were added to the site to keep certain graphics in motion. Loading in sections of the page on scroll was accomplished through the use of JS. With the IntersectionObserver API, I was able to get the navigation bar to change whenever the user scrolled past a certain part of the viewport.
Here's the final version of the home page
Here's the final version of the overview page, with 4 different types of interactive graphs, all from the HighCharts library.
Here's the final version of the comparison page. The user first has to choose whether to display data for commits or contributors on Github. Then, they have to choose which ecosystems they want to display. If they want to change the number of ecosystems they display, they can click the add and delete buttons. Last, they have to pick a year. If they want to see data across all years, they can select "All", or they can select a specific year to view data for.