SCET Rebranding

#design-system #ux-engineering






Beaver Builder

My Contribution

Design System

Design System Application

Front-End Design

Stakeholder Collaboration


Chief Marketing Officer

2 UX Designers

1 Web Developer (me)

4 Program Directors


Design System Handoff & Stakeholder Collaboration

At the start of the year, I was part of a team tasked with rebranding the website for the Sutardja Center for Entrepreneurship & Technology (SCET) at UC Berkeley. Our goal was to modernize the site, making it more engaging for our diverse audience, including internal staff, UC Berkeley students, professionals, and partners.


Brand System

The process began with a handoff from our UX designer. I collaborated with her to work on this comprehensive brand system. This system was our blueprint, outlining visual guidelines for typography, buttons, links, and the overall layout. A critical part of this phase is ensuring that every web element adheres to these guidelines and is aligned with WCAG accessibility standards


Implement Brand System

The implementation phase revealed the complexity of managing numerous customizations across pages, challenging our ability to maintain consistency with the newly established design system.

To address this, I developed an Airtable database as a repository for tracking style specifications. This tool helps ensure that each page adheres to our design guidelines and provides a clear reference point for managing the website's diverse content needs while preserving the integrity of our design system.


Program Page Template

Besides the overall brand system, we also have a new design for individual program page.


Accommodate diverse programs

The template, while beautifully designed, needed to be flexible enough to accommodate the varied content of SCET’s many student programs. The original layout was crafted for a single program, but our content landscape was much more complex. This discrepancy highlighted the need for a design approach that could adapt to this diversity without losing the cohesive look and feel of the new brand.

To tackle this, I divided the new template into modular content sections that could be reconfigured as needed. This strategy allowed us to tailor page layouts to suit a range of program specifics, from feature images and basic info to media and contact details.

Further, to manage the wide array of program-specific content, I developed an Airtable form to meticulously catalog all content types across the existing program pages, ensuring no detail was overlooked.


Balancing front-end aesthetics and back-end functionality

Another significant hurdle was empowering stakeholders to update program information without risking the new design. I enhanced the WordPress CMS and back-end, developing an interface that provided program directors the autonomy they needed without direct access to the front-end editor. This solution preserved our design aesthetics while offering the necessary flexibility for content updates


  1. Flexibility in Design

Adapting a single template to fit a variety of content types taught me to balance uniformity with the need for customization. It’s important to make sure the design is aligned with technical feasibility and business objectives.

  1. Stakeholder Engagement and Management

Navigating stakeholder needs while preserving design integrity highlighted the value of clear communication and collaborative problem-solving. It reinforced my belief in engaging stakeholders early and often in the design process.