OVERVIEW
Redesigning from end to end.
Since 2005, UC Berkeley’s Sutardja Center for Entrepreneurship has helped tens of thousands of students learn innovation and entrepreneurship skills from top entrepreneurs and tech industry leaders. From November to December of 2022, I worked closely with the other members of the marketing team to prepare the SCET website for a crucial end-of-year review by the UC Berkeley College of Engineering.
The existing site lacked clarity and cohesion, and was challenging for users to navigate and understand. I set out to complete a swift yet comprehensive redesign of the website during this 4-week period, building new backend information systems and designing a library of flexible templates and modules to be deployed on the frontend.
Role: Web Design and Development Lead (2022-2023)
Time frame: November – December 2022
RESEARCH AND
STRATEGY
Identifying problems with the existing design.
Frontend: What students had to say
The primary users of the SCET website are UC Berkeley students interested in entrepreneurship, business, and technology courses. I shared the existing SCET website with some of my peers and asked for their feedback on the site and its organization:
“Every page looks very different.”
“The website is overwhelming.”
“I don’t know where to click.”
The existing navigation bar contained dropdown menus with links to all of SCET’s programs, and many of the students I spoke with found this overwhelming and confusing. It demanded that the user guess at which of SCET’s programs best matched their needs, without providing a way for users to view all of SCET’s offerings at a glance. The visual layout and aesthetic of every page also varied significantly, which created a disjointed navigational experience.
Backend: The team’s perspective
Speaking with members of the SCET team, I learned that many of them, including those who were not a part of the marketing team, needed to be able to update the website when small details—such as dates, locations, and links—were updated for the programs and courses they managed.
“Too many cooks in the kitchen.”
“I wish more things were automated.”
“Making updates is too complicated.”
In order to make simple changes to pages across the website, members of the SCET team were forced to edit pages directly using a frontend visual editor, which resulted in inconsistent visual and organizational styles across the website and created a sense of discontinuity.
THE SOLUTION
Building new systems.
Hero banner redesign
I started by designing what viewers saw above the fold on each page, ensuring that this was both minimal and impactful. On the old site, every page was headed by a hero banner bearing only the page’s title. I updated the structure of the hero banner to Include a tagline, and added a summary card underneath to visually draw the reader down the page.
Custom post types
To accommodate a growing database of course pages on the SCET website, I developed a custom post type data structure to house, format, and display this course data in a more streamlined manner. My post type utilizes fields on the backend to populate a course template on the frontend with user-inputted information so that pages for every class can be customized but still remain consistent.
Improving user experience
At the bottom of every Professional Program page, I also developed a ‘Find Your Perfect Fit’ feature, which reminds users of SCET’s other programs, and provides an easy way to explore them, in case the program they just finished reading about does not suit their specific needs.
