SCU Product Club
SCU Product Club
Embedded Files
Web Design · UI · Responsive Website Redesign
Overview
Overview
A website redesign for Santa Clara University's Product Club, an organization focused on helping students develop product management knowledge and hands-on experience through industry talks, events, and workshops.
The redesign focused on creating a clearer navigation system, more organized content, and a cleaner visual structure while maintaining the organization's existing blue-and-white branding.
01 — Identifying the Problem
01 — Identifying the Problem
The original website was built on Google Sites and had a navigation bar positioned on the right side rather than across the top.
The landing page was also visually cluttered, making it difficult to find information.
I redesigned the site around four main pages:
Home · About · Resources · Join Us
02 — Structuring the Content
02 — Structuring the Content
I used a consistent navigation bar and footer across the redesigned pages.
During the work-in-progress critique, I received feedback to make greater use of vertical space, so I extended the page layouts to create more room for content.
I also introduced rounded rectangular containers to separate information into smaller sections.
Rather than placing all of the content inside one large block, I divided it into individual sections so users could move through the information more easily.
03 — Organizing Resources
03 — Organizing Resources
The Resources page was redesigned to make the available materials easier to explore.
I used the same rounded-rectangle system from the About page and turned the resource categories into anchor links.
Each category also includes a short description explaining what users can find there, such as design drawing boards and books written by product managers.
04 — Visual Design
04 — Visual Design
I maintained the Product Club's existing blue-and-white visual direction while incorporating a gradient inspired by the organization's logo.
The final design uses:
Dark blue
White
A logo-inspired gradient
I used Open Sans with regular and semibold weights to create hierachy while keeping the interface clean and professional.
The footer includes social media icons, copyright information, and a contact email.
Tools: Adobe XD · Adobe InDesign · Adobe Illustrator
Course: ARTS 177 — Website Graphic Design
Focus: Web Design · UI · Website Redesign
Google Sites
Report abuse