Established in 1985 as one of the first supercomputing centers in the United States, Q LTD’s work helped advance the center’s new strategic direction and position them as a leader in the rapidly growing areas of AI, data, and computing.

Telling a cohesive story

Based at UC San Diego and now a part of the School of Computing, Information and Data Sciences, San Diego Supercomputer Center (SDSC) was ready for a big change. Re-branding at the university level required SDSC to comply with new visual and accessibility standards; but more importantly, SDSC leadership looked to transform the website from an archive of decades worth of information — with links off to many subdomain websites — into a cohesive story of the systems, services, and educational opportunities SDSC currently offers.

Engaging the executive team

SDSC is organized into six divisions, each with unique expertise (e.g., cloud, storage, cyberinfrastructure development, support, research, etc.). Divisions operate independently, but must work together to meet the mission, vision, and goals of the center. 

During our discovery phase, SDSC Director Frank Würthwein and Communications Director Cynthia Dillon brought together the SDSC executive team to actively participate in the creation of the new website. The executive team was key in shaping the center’s new strategic direction and helped our team by defining:

• SDSC’s expertise and unique offerings
• The primary audiences the website serves, what content they are looking for, and what actions they should take
• Services that SDSC offers across divisions
• Consistent language that describes the center — What do we mean by “domain”? What is a “service” versus a “product”?

The executive team then served as ambassadors for the project which paved the way for implementation across divisions.

A new brand

Q’s design team provided a visual history of the SDSC brand to the executive team and helped set the stage for the new brand. Brands are emotional, and any change is often met with resistance — or at the least, concern about the expense and potential confusion of making a change. We showed that the brand had not changed since the early 2000s. In comparison to their peers (other supercomputing centers and national labs), the brand was dated and did not reflect the strength of the center or the new brand direction that UC San Diego was moving toward.

Using typography and color standards supplied by UC San Diego we provided four options for the new wordmark and acronym. We emphasized that the full name of the center should always be used whenever possible. The final logo required approval not only from the SDSC leadership, but also from the university’s branding department.

Website strategy

Our web strategy included:

• Limiting top-level navigation — past visitors were overwhelmed with choices and uncertain where to go
• Organizing content by systems and services, not by divisions — visitors don’t care which division provides the service or system, they simply want that service
• Creating scannable pages to help visitors find the content they need versus long “walls of text”
• Providing a “project highlights” section that showed work across SDSC, work all divisions can be proud of
• Improving calls to action — what’s the next step for visitors, who do they contact, etc.

Design features

As we began to develop the new user interface design we wanted the design to reflect the advanced computing and research done at SDSC as well as adhere to UC San Diego website guidelines.

Our team:

• Created a scientific, bold, modern, high-tech — yet approachable and human — design
  
• Used engaging imagery (people and domain-centered images vs. tired “computer-bytes” imagery)
  
• Used CSS to create a subtle gradient animation that shift the background color from green to blue — an example of computer-generated design
  
• Developed an engaging home page video that demonstrates SDSC’s unique expertise in technology to predict and track earthquakes and the effects of climate change, like flooding and wildfires
  

HTML/CSS deliverables

Once the new site map and user interface design were complete, we provided responsive HTML/CSS templates and code for each component of the website: navigation, headers, tables, etc. SDSC uses the Cascade content management system. One reason SDSC decided to retain the Cascade CMS was due to the large amount of user documentation that already existed in the system, as well as past news archives and events. The developers at Hannon Hill integrated the code we provided into the Cascade system and then the Q team worked together with the SDSC communications team to enter new content and images.

Final note — accessibility!

Throughout this project, from user interface design through production, we were required to meet WCAG 2.1 AA standards — a set of internationally recognized web content accessibility guidelines developed by the World Wide Web Consortium — meaning that the SDSC website must be accessible and usable for all users, including those with disabilities. The university communications department tested the site to ensure it is in compliance and provides ongoing scanning to ensure all new content is accessible.

Project Team

Creative Director: Christine Golus
Design Team: Andy Sikora, Christine Golus
Development Team: Matt Restorff, Andy Sikora

Visit the San Diego Supercomputer Center website