PORTFOLIO MENU




BACK HOME



COSMISTACK ASP LAB COMPASS H&B CAFE CSSA









LAST UPDATED: 11/04/25
CSSA OVERVIEW




ROLE
Tech Director
DATE
May ‘20 - Aug ‘22
TEAM
Berkeley CSSA
STACK
HTML, CSS, JS, particles.js, Github, Figma


CSSA BERKELEY







DESIGN DEVELOPMENT



CSSA
Introduction
Making a new website for Berkeley’s CSSA.

As the tech director of the organization in undergrad, I designed and built a website for the Cognitive Science Students Association at UC Berkeley. I organized meetings with current org members, incoming students, and board members to define the direction for the IA, content, and visual design.













THE COGNITIVE SCIENCE STUDENTS ASSOCIATION (CSSA) at UC Berkeley is the official undergraduate organization for anyone with an interest in Cognitive Science. It’s widely recognized for its hosting of the annual California Cognitive Science Conference (CCSC), bringing in speakers from around the world with expertise in one of the disciplines of Cognitive Science at Berkeley - Psychology, Neuroscience, Computer Science, Linguistics, Philosophy, and Social Sciences or other related fields. The organization therefore is catered toward a wide variety of people, and hosts many different kinds of events throughout the year.

As the Tech Director of the organization, I decided to take on the challenge of changing the website for the first time since its creation over ten years prior. It was my first attempt tackling every aspect of something at this scale - product design, planning, as well as the actual development.

Focusing on accessibility of information, ease of presentation, and incorporation of a more distinct color scheme and modern style, the website came to be what it is currently.







1.   The Users and Content Landscape



UNDERSTANDING TARGET USERS
  • new students in the major, a related major, or with any interest in Cognitive Science will utilize the website for resources and to find events to attend.
  • students, faculty, speakers, alumni, and people with general interest in the field will be able to easily access and navigate the CCSC (annual conference) page. 
  • current members of the organization and major will easily find and attend events, utilize provided resources, read information on joining the organization further. 



INFORMATION ARCHITECTURE
Two of the biggest pain points in the previous website were information bloating and confusing navigability. In other words, defining the information architecture was imperative for this project.

Had board members, org members, and prospective members go through the pain points in the previous website to nail down our objectives for the new one. Target users and their journeys were then considered, leading us to determining the actual site structure.








2.   The Design (+ Development Crossover)



VISUAL DESIGN ELEMENTS
To coincide with the goals of the website, the design was intended to be clean, modern, and have an academic style blueish-purple color scheme. Font choices and sizes were picked with the intention of being clean and easy to read. Colors were chosen with maintaining contrast in mind.


EYE CATCHING LIBRARIES
One of the coolest elements incorporated onto the website was particles.js. Made to mimic the neural pathways Cognitive Science is ever so familiar with, it was the perfect interactive element to catch people's attention. I edited the nodes to fit the colors of the CSSA logo, but other than that the particles spoke for themselves.





3.   The Development (Using Github)



TRANSFERRING FROM FILEZILLA TO GITHUB
Changing the file system workflow from using Filezilla to being on Github improved both the onboarding phase and overall development process for prospective CSSA students looking to work on the website.

The making of a new repo was simple. Understanding how to deploy and host the new website, however, was not, and required many trips to the OCF lab on Berkeley’s campus.

The OCF is an organization based in UC Berkeley which grants free hosting services to any Berkeley clubs. It’s also what the CSSA website uses to host its website. Worked with them to eventually figure out how to connect the remote repo to the new repo. The years-long process of locally sharing files and configuring them with Filezilla was over, and the files could now be pulled and changed at any time.  +1 for efficiency.