Berkeley SCET Website
Redesigning the user experience and establishing a brand system.
Timeline
Aug - Dec 2023
Team
1 Product Designer
1 Software Engineer
Skills
Interaction Design
Design Systems
User Research
Tools
Figma
Project Overview
The Sutardja Center for Entrepreneurship & Technology (SCET) is a UC Berkeley department whose mission has been to empower innovators to positively change the world by providing resources such as challenge labs, influential courses taught by entrepreneurs, professional programs, and start-up opportunities. The website UX was overly-complex and challenging due to the variety of user groups served: Berkeley students, international students, professional students, global academics, companies who may wish to engage, researchers, and others interested in working with the Collider Labs.
Coming onto the UX/UI role at the Sutardja Center for Entrepreneurship and Technology meant coming during the middle of a large redesign; there were major issues with accessibility, SEO, branding, and navigation that needed to be addressed in order to improve website metrics and market the department better to all users.
Thus, we asked
How might we improve SCET’s design system and site pages to create a consistent experience and better guide all users depending on their motivations?
Starting the discovery
User Research
I began the process of sending out surveys and conducted nine, hour-long interviews with stakeholders, including the head of Berkeley design, professional program faculty, and students. The questions we had in both were divided into these four sections:
From the twenty seven responses collected in the two week time frame, I asked for the specific category of information that users were seeking when they accessed the site, as well as collected demographics to asses which type of users visited the site the most.
Paired with these responses were the interviews with the staff that led the individual program marketing and updated those pages. When discussing their goals for the site, common responses included better page layouts aimed at marketing to prospective universities and students instead of the information-heavy pages that were currently used on the site.
Once I was able to synthesize the interviews, survey responses, and website analytics, I arrived at these main points of insight:
key insights
01
There is a lack of consistency in branding and design throughout the site.
02
Aligning more with the Berkeley brand aids in the marketability of SCET.
03
The presentation of information with the design hierarchy is confusing.
04
Images and data do not scale well.
05
It’s difficult to find course information with the unclear navigation menu.
06
Colors and texts are not accessible on many of the pages.
Brand Analysis
One key factor in this project was the changing Berkeley brand, which ultimately was implemented on May 21, 2024, a few months after the publication of the site. However, changes were originally made to the official Berkeley site as well as the Berkeley News site, and interviews with the head designer helped guide our development of the design system to ensure a seamless transition later.
New navigation and typography for UC Berkeley
The College of Environmental Design site
However, all individual Berkeley sites are able to have their own site designs and structure, so while SCET’s goal was to align more with the official brand for marketing purposes, it still wanted to incorporate unique designs that would elevate it over other departments. One effective use case can be seen with the College of Environmental Design which doesn’t include typical Berkeley fonts and colors, and instead, created its own branding.
prototyping
With the insights from the research, especially the goals of the stakeholders, it was then possible to begin prototyping components to be used for the design system: buttons, links, navigation menu, and data presentation.
One goal was to introduce a secondary navigation menu that held more information for students, staff, and faculty to have direct links to the pages they wanted. Additionally, given the user painpoint of not finding courses easily, I ideated on integrating ‘courses’ into the primary navigation. With this, I had to revisit the user journeys to understand which design was most suitable as courses were offered for multiple programs (ie both students and professionals).
Throughout all the designs, I had to keep in mind the limitations that needed to be assigned with them as they scaled, as well as how they could be used modularly and in a template, as other staff members would also have to be able to use these to build their pages.
Designing Solutions
Establishing a Design System
After two rounds of feedback from the design team and software engineers on the feasibility and user experience, I was able to begin to finalize components for the new design system. These assets needed to be scalable, pass accessibility standards, and in-line with the Berkeley brand.
One major design decision involved the implementation of a secondary navigation module, in which users, especially students, staff, and faculty, had access to a greater amount of pages than what was in the general navigation. This was meant to address the user pain point of finding information throughout the site.
Creating Templates
Since the SCET website has many administrative users that can build and edit their program pages, the layouts can get overly complex and information-heavy as the site lacks simple and scalable designs to divide data.
With the newly established design system, I was able to work on the program pages’ template who were my main clients. The purpose of the program pages was to market to students and partnering universities, which was not being achieved in the current layout.
Original Layout
Final Design Decisions
When determining these, although I was working specifically on the use case of individual programs, I had to keep in mind that the components would be used by a variety of staff who were unfamiliar with design and accessibility goals. Therefore, I had to keep my designs modular so that they’d be able to be placed at any point in a page, and also scalable, in that there could be multiple of the same style one after the other.
Less is More
In the original site layout, many of the CTAs were buttons which cluttered the pages and confused users on the top-priority items. With the redesign, we limited buttons to only be used for lead sign-ups and application forms.
Additionally, the buttons now included the same Berkeley colors as before, but now passed all accessibility standards.
Interactive Tabs
In an effort to condense the amount of information on the page, I designed a tabs that users would be able to click through. Although this design biases the default tab (“Track 1”) when opened, it was actually preferred as that was the main track that the stakeholders wanted to market more.
Pull-Out Quotes and Callouts
One key ask was to bring in more marketing opportunities onto the pages, especially with student reviews. The goal here was to continue the SCET branding with the crossed lines while still bringing in Berkeley branding and colors that would break up any heavy text on the page.
Font Hierarchy & Callouts
There was a site-wide goal to restructure the font hierarchy so that headers, sub-headers, and body text would be better distinguished and pass accessibility standards. Putting them together onto use cases such as that of the individual programs’ shows how they all scale and come together.
