CSIL

Introduction

CSIL (pronounced see-soul) is my workplace where people come for assistance with UChicago's CS Labs.

I was tasked with redesigning and developing the official CSIL website to give it a more updated look. The goal is to do a complete overhaul so that even in the Zoom™ age, students and teachers can easily access whatever they need.

The goal was to make a site in React that easily highlights what CSIL provides as well as how to get those resources. The original site was very well organized so the redesign was was more focused on a UI transformation.

Website Design

The website's design is clean and minimal with a nod to functionalist sites like Wikipedia. I wanted to use the same typeface that Crerar (the UChicago CS building that CSIL is in), uses—which is Monaco

It's an obvious reference to the typical programming font that we developers stare at every day.

The heading font is in Montserrat. I wanted another sans-serif to keep it ultra sleek and I felt that Montserrat bold offered enough contrast and character so that it doesn't become boring and corporate.

I also added a couple illustrations to make the site more friendly, warm, and welcoming (yes, Alegria). But it mainly serves to add some visual diversity and texture since there's so much text on this site already.

CSIL redesign typography showcasing Montserrat, Monaco, and the color palette

The color palette is blues with red as a highlight. I liked how this palette conveys a "STEM" feel, but one that's inviting instead of cold and distant thanks to the red and the tone of the blues.

Website Development

The original website was basically pure HTML/CSS architecture so we wanted to move development to React to make it easier for us. I'm working on developing this website with 2 of my CSIL colleagues.

Compilation of 4 CSIL redesign screengrabs

Using React also allows us to host this website on our own CSIL servers rather thank going through external providers like Heroku/Github pages which is a huge advantage.

The site is still currently being developed but it's going smoothly and we expect it to be done by the end of this year!

Learnings

I had a lot of fun redesigning the CSIL site and this was also my most minimalistic design that I've done so far. I learned the most about the importance of typography and spacing--the core elements of minimalist design.

Development of this site was done remotely so we had to make constant use of Kanban boards and many Slack messages. Although the pace is slower than we predicted, I still really enjoyed collaborating with others on this project and I look forward to being able to work together in person soon.