SCET Rebranding
#design-system #ux-engineering
Time
2024.01-03
Tools
Figma
WordPress
Beaver Builder
My Contribution
Design System
Design System Application
Front-End Design
Stakeholder Collaboration
Team
Chief Marketing Officer
2 UX Designers
1 Web Developer (me)
4 Program Directors
BACKGROUND
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.
HANDOFF FROM UX DESIGNERS #1
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
CHALLENGE #1
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.
HANDOFF FROM UX DESIGNERS #2
Program Page Template
Besides the overall brand system, we also have a new design for individual program page.
CHALLENGE #2
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.
CHALLENGE #3
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
Reflection
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.
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.