TransparenCS, or as we call it, TCS, stemmed from the lived experiences of my collaborator and I as a computer science majors at Wellesley College. As students passionate about CS, we noticed that although many of our peers shared this passion, there existed students, especially BIPOC students that ended up dropping the CS major despite this, under the belief that they were not capable of being computer scientists.

One of the foremost factors in students becoming discouraged from pursuing the CS major was the gap in CS knowledge and the lack of knowledge in finding resources that can bridge this gap. As such, my collaborator Alana Mackey and I teamed up to create an accessible resource bank website to provide free CS resources for these students. After redesigning the website, I primarily collaborated with another developer, Becky Chen, and launched the website in Spring 2024.

I first joined the TCS team in the Fall 2021 semester, where we had a website in development as well as a list of compiled online resources that were in the process of being added to the site by my collaborator. In the beginning, my role was mostly to assist with compiling resources and continuing the development process with my collaborator, having had some experience with web development prior to this role.

However, we both recognized that it was important for us to talk to our primary target audience, Wellesley CS students of underrepresented minorities, to gauge the potential helpfulness of our site, our resources, as well as its design, so that we could accomplish our goal of streamlining the resource finding process. Additionally, we acknowledged that there were many BIPOC student needs that our site could not directly address, wherein the root cause may stem elsewhere. We also wanted to use this opportunity to highlight those problem spaces for the CS faculty at Wellesley College.

• Too much for a user at one time; might overwhelm a new user.

• Have another page where you can see all the lists on one page; difficult to scroll back and forth if you want to look at everything at once.

• Specific navigation for students in different years, what they’re interested in, as well as their coding level.

• Not easy to find specific sources for the Wellesley website, so a guide on this website would be helpful, especially better if it’s student-made.

One of our chief challenges was that although we had a hundred resources compiled, we needed to present the website in a way where people could find the one resource they needed. Based on the feedback we received on the first iteration of our website, we realized that we need to re-organize resource content and navigation in a way that would ease stress and feelings of being overwhelmed on the student’s end. As such, in Spring 2022, I proposed that we could use this feedback redesign the site.

Design process

For Fall 2022, I ended up having to take on a more independent working style due to my collaborator studying abroad, coupled with my advisor going on leave. This meant that it was up to me decided the pace and steps I would take in my design process. With that in mind, I planned to spend the fall semester prototyping my design and running it through CS students for usability so that we could have a design to work with for the development process.

First, I began with a basic sketch that contained potential features we wanted to add based on focus group feedback. I wanted to greatly simplify and reduce the blockiness of the previous layout in my initial sketch.

With our higher fidelity prototype completed, I then focused on additional usability testing with 5 participants. For finding participants, I wanted to a test group that had a variety of class years (to signify varying experience levels and resource needs) as well as having participants that were underrepresented minorities in the tech field. I also sought a participant that had participated in our previous user research focus group, so that I could get a good idea of if there were design elements from the previous version that would be useful in the redesign. For usability testing, I used the think-aloud method and A/B testing of our different prototype versions. Based on our feedback:

Reworking the design

A high-level sketch of the landing page redesign with the sidebar feature in mind, with notes detailing functionality

1. Create a well-structured game plan. In some ways while undertaking this project, I felt like I was in over my head and had a lot of things to consider at once, which I think would have been mitigated if I had outlined when I should be following particular steps in the design process early on in the redesign.

2. Regularly communicate progress. During the course of working on this project individually, I kept a log of my work and regularly updated it. I believe this was helpful in allowing me to put my progress in perspective and identify when I needed to ramp up my progress.

3. Organize your design process. A struggle I had while working with a developer was the lack of organization I had initially put into putting all of my functionality notes and design components in order. This was largely because at the time of prototyping, I was still working alone as a designer and didn’t have enough foresight to anticipate the importance of making my design notes comprehensive for a developer that was new to the project. As I worked with a developer during 2023-24, I realized the importance of cataloguing my design features in an understandable way to minimize misunderstandings in intended functionality.