cssa website in browser

Berkeley Cogsci Student Association Website Rebuild

Rebuild org website from scratch to encapsulate modern design and accessibility of information.

Role

Tech Director

Timeline

Fall 2021 - Spring 2022

Client

CSSA

Tools

HTML, CSS, JS, Github, Figma

What is CSSA?

UC Berkeley’s Cognitive Science Student Association (CSSA) is the main 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). This conference brings in speakers from around the world who each specialize 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.

What did I do?

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 engineering.

My first decision: update the existing website to incorporate the new changes, or just start from scratch? There were two main reasons why I decided to go all new:

  • the previous website was overloaded with unnavigable files
  • I wanted to change the file system workflow from using Filezilla to being on Github to ensure a more seamless transitioning phase for future Tech Directors.

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. Check out the result: CSSA Website

IDEATION & ORGANIZATION

My Approach

This was basically my first big web project for a “client” (somebody other than myself or a class). I reached out to one alumni for guidance, and they helped immensely with making me realize I needed to narrow down a specific goal statement. Other than that, I was on my own - so what did I do?

Here’s a breakdown of my vision at the time on how to design and build the website:

  • What are we getting rid of from the old website?
  • What are we taking from the old website?
  • What new information are we adding?
  • What tabs do we need / what are the most important elements?
  • What do we want our website to accomplish?
  • Who are going to be are main users and what do we want to provide them?
  • What is our color scheme?
  • How are we going to account for accessibility?
  • What is the general vibe of the website? (To what extent do we want it professional, modern, colorful, etc.)
  • How do we want the CCSC page to be designed? Are we creating a specific style, using the conference, style, or the website's?
  • How is this going to get built (with the skills I have at present)?
  • Are we going to change the file system?
  • How should I organize planning out the content, to designing, to building?
  • When should we start building by?
  • When should the website be published by? Are there going to be more edits after publishing?

My Method

This is a breakdown on the steps I actually took to answer my aforementioned questions:

  • Sift through website, organize content by tabs and write out overview of all of the information
  • Make a basic outline with my initial thoughts on the tabs that would be included on the website as a starter talking point
  • Schedule meetings, lots of them, and with both returning and new members to get a range of perspective
  • Narrow down the content by each tab with important information and directed users for each one
  • Made mockups on Figma using different color schemes. Some with different colors across pages, others with consistent themes.
  • For accessibility, made sure to use contrasting shades (of similar hue) in each element as well as easily legible fonts. Navigation was also made simple and buttons were obvious.
  • Held meetings with the teams in between designing to discuss overall styling and decide on the direction of the CCSC page. Ended on keeping the CCSC page as a tab on the website, but giving it a different theme to contrast its purpose.
  • Started just building it early on in HTML, CSS, and vanilla Javascript. I wanted to get the structure of the website built even in the intial design phases to set the pace early on.
  • The first repo I started was on my personal github account, because it was intially just for testing designs. I ended up creating a new repo on the CSSA account which I would just push changes into from my personal repo.
  • I held frequent meetings with the OCF (the website's hosting service on campus) to figure out how to reconfigure their remote repo to connect to mine.
  • At first, I would just set up meetings randomly to discuss content and other intial thoughts.
  • My position was part of the marketing team of board officers so I would present to them any time I had a big change.
  • Eventually, we came to a more concrete schedule and I would make reports in every other board meeting and each marketing meeting.
  • Made sure to frequently check ease of design into implementation and see if all website elements are coming together coherently.

The Results

These are an overview of important elements that were narrowed down and/or decided upon.

  • Tabs: index (with particles), about, involvement, events, conference (CCSC page), resources, people
  • Goal: accessibility of information and new design
  • Target user groups: new members, current members, CCSC (Califonria CogSci Student Conference) speakers/attendees/general interest, alumni
  • Color scheme: blue-purple (primary color), light gray (primary container), yellow-gold (CCSC color), dark blue (CCSC container)
  • Font: Josefin Sans
  • Style: modern, professional, fun
  • Tech stack: HTML, CSS, Javascript
  • File system: change from Filezilla to Github
  • Meetings: Frequent scheduled meetings with board officers and marketing officers
  • Cycle: dicuss, design, implement into build, re-discuss
  • Documentation: keep docs on website organization and future upkeep to-do
  • Timeline: website published before spring semester, then worked on that year's CCSC page and published updates according to conference marketing decisions.

DESIGN

Design Process

I essentially just used figma as a playground for my thoughts. I tested out any idea that came to my mind on color schemes, typography, general interface layouts, and everything in between. I would incorporate more concrete ideas into the actual website build to then present to the marketing teams for discussion.

Doing everything by myself became a bit apparent as I was too caught up in moving forward; I never compiled a finalized design system at the beginning, instead just testing out various ideas along the way. Nevertheless, I’m grateful that I now understand the importance these aspects of organization have in ensuring an efficient build process.

Visual Design

Now getting to the actual design. To coincide with the goals of the website, the design was intended to be clean, modern, and have a purple color scheme.

Here's the general visual identity (colors & typography):

example UI of compass app

Interactive Design, Flow & Accessibility

Much of my implementation of design principles into the interactivity and functionality of the website’s design was admittedly based off on intuition. Font choices and sizes were picked with the intention of being clean and easy to read. The website uses contrasting colors for primary versus non-primary elements, buttons, text, etc.

Eye Catching Libraries

One of the coolest elements I incorporated onto the website was particles.js.

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

Play around with it below (on desktop view) :D

ENGINEERING

Github & Filezilla

One of the biggest improvements to the website architecture for the CSSA was transferring the file system from Filezilla to Github.

Making a new repo was easy since I was just starting a new website from scratch. It was the deploying and hosting side of things that I barely understood and were by far the most important part.

The OCF is what the CSSA website uses to host its website. They’re an organization based in UC Berkeley and give free hosting to Berkeley clubs. I found myself in their office many times, working to eventually figure out how to configure the remote repo with them to connect to the new repo I created on github. The years-long process of locally sharing files and configuring them with Filezilla was over, and now the files could be pulled and changed at any time. Success!

Everything Else

If you were to actually go into the github you’d see how much room for improvement there is. I’m proud of all the work that I did, but knowing what I know now - it’s far from a clean build. The CSS naming conventions aren’t readable enough, and the build itself is very basic. Still, it got the job done and made the improvements the club was looking for, so as my first client project I was more than satisfied :).

THOUGHTS

  • This taught me a lot about building something in which I'm working simultaneously on my own and with teams of people. I couldn't have asked for a better first project to gain experience with designing, building, and planning.
  • I still had much to reflect on especially with creating an organized structure for myself, and setting better intermittent goals to keep myself focused and directed.