Our Work


Screenshot of CalNERDs website home page


Client Since
June 2014

The Cal NERDs program at UC Berkeley is a vibrant community of science, technology, engineering and mathematics (STEM) undergraduate and graduate students. Cal NERDS scholars become professional NERDS in industry, academia, or government.

While in the program, this diverse group of students can participate in a large number of programs, research opportunities, and receive advice and coaching.

Screenshot of CalNERDs website student listing page
Services Provided

Cal NERDs is led by Diana Lizarraga, who reached out to Hop Studios after seeing our work on the Greater Good Magazine, another Berkeley project. The original Cal NERDs website was in serious need of a design update and code overhaul. Although Diana could have continued coding the pages—she is a Cal NERD, after all!—she was also looking for a content management tool that would allow her and others to update the site more quickly and flexibly. Diana had two other key priorities in mind as well: the need for the site to display responsively across desktop, tablet and phone browsers; and accessibility support for disabled site visitors.

We began the project by reviewing the extensive branding and identity material provided as guidelines by the university. Diana selected a range of suitable colors from the approved palette. After talking with Diana about her updating needs and getting an understanding of her busy schedule, it was clear that what was most necessary was a site that could flex with the program throughout the school year. We limited the number of static content areas on the home page in favor of a series of easy-to-update boxes that can be used to highlight anything on the site, from students to awards to upcoming events. Some neat customization features allow Diana to pick the color, graphic treatment, and pair them with photographs of the NERDs and their projects.

The resulting design is vibrant, modern and professional, and highlights the student-designed Cal NERDs logo. Inside the site, visitors can read student profiles, keep up with events, make donations, and even apply to participate in Cal NERDs programs.

We even planned for the future by creating a handy alumni section where the site visitor (perhaps even a job recruiter?) can look up alumni by year and/or area of the study. Visitors using screen readers will find some features intended to make browsing the site a little easier: jump links make it easy to get to the page content; CSS styles can be turned off without also losing site readability; and the site can be navigated effectively using the tab key or other non-mouse input device.

We’re always excited to work with universities, which host such a wide variety of activities and initiatives, and we’re pleased as punch with the way the Cal NERDs site turned out.

Go, Nerd Nation!

We've Blogged About This Project

Have a Project for Us?

Request a Proposal