GSSoC: Recreating the look of India’s largest open-source festival
“Open-source, hmm! Cool projects, awesome people, but how should I get started as a UX designer?”
This was the first thought that came to me about a year ago as I began to dive into the worlds of UX design and open source. As a new designer, I wanted to work on exciting team projects to test my budding skills. Around this time, I came across this on LinkedIn and applied...
What exactly is GSSoC?
GSSoC stands for GirlScript Summer of Code, one of India’s largest open-source programmes. Every year since 2018, the GirlScript Foundation has held this 3-month-long FOSS event. Participants work on real-world projects with the help of experienced mentors.
3 days after applying, the interview schedule arrived. After the interview, I was invited to join the GSSoC UI/UX team (with Sumit Kumar and Ishitachoudhary) and design the program’s new avatar.
Starting the GSSoC Journey
We joined the GSSoC Discord, where the project was maintained by the program managers Suvraneel Bhuin, Harsh Ghodkar, and Rebecca Elisabeth Falcao. We started our UX process by using ideas and brand identity assets from GirlScript Foundation’s past programmes, like the former GSSoC website, the GWoC website, and girlscript.tech.
We compared ourselves to other open-source programmes and realised that websites must balance a brand’s online goals with user needs. We added previously missing sections like past statistics, in-program events, etc, and used topic-based navigation to easily access organisational information.
Target Audience
- 1st-time Contributors (Age 18 to 23)
- Details about the programme timeline and structure
- A beginner’s guide to contributing to open source
- Track progress against other participants
2. Mentors or Project admins (Age 20 to 35)
- Details about the basic responsibilities, programme timeline, etc
- Evaluate current and past projects to select or modify them.
3. Sponsors (Age 35+)
- Details about the programme and the organisers
- Estimate visibility by reviewing past statistics, top contributors, etc
We compiled all of our research data and created a rough wireframe for the home page.
Gathering the UI elements...
- Made the colour scheme around primary orange #FF6901, which is a staple in the branding of the GirlScript Foundation.
- Defined text styles based on the tailwind font size class, using the geometric font Rubik as the primary typeface and the Mozilla Foundation’s monospace font Fira Code in some cases as a tribute to the program’s coding culture.
- Illustrations from undraw.co completed the UI design.
Dev tools we used
We kept a smooth, agile pipeline between us and the developers, led by Vishwa.R. The front-end was built with the React JS library and the tailwind CSS framework, with Framer Motion used for the subtle animations.
Here‘s our final design...
On the home page, you can learn about the GirlScript Foundation, GSSoC statistics, past sponsors, top participants’ perks, the program’s schedule, and how to sign up as a contributor, mentor, or project admin.
The website has several pages for user needs and brand marketing.
- All Projects: This page lists all GSSoC projects, their admins, and the primary tech stack needed for contributions. We updated this section by reducing content and adding past projects, as well as a filter option.
- Single Project Details: Check out the project description, repository, and demo video before contributing.
- “How GSSoC Works”: The “what they do?” section describes the roles of a project admin, mentor, and contributor. The “how they do?” section shows the steps mentors and contributors take to resolve issues and submit pull requests.
- All Events: GSSoC speaker events are listed here. These sessions discuss open-source, blockchain, women in tech, and more.
- Leaderboard: A live table ranks the participants’ contributions over the 3-months of GSSoC. For the table, we used banded rows because it is easier for a reader’s eye to follow the associated data.
- Single Contributor’s Statistics: The contributor’s GitHub profile and pull requests are here.
- Blogs: Search engines can provide a unique experience that engages a user through blogging. Therefore, blogs are beneficial to SEO because they aid in a variety of ranking factors.
- GSSoC Team: If you have any doubts about GSSoC, you can contact the GSSoC team via social media on this page.
Conclusion
Now in its 5th year, GSSoC 2023 continues to be one of India’s largest open-source celebrations. Each year, more people sign up, and more industry partners flock in to hand-pick the best talent. Thus, GirlScript Summer of Code continues to grow and introduce many like me to the exciting world of coding and open-source.
