UBC Science Undergraduate Society Website
UI DESIGN
UX DESIGN
Background
The existing UBC Science Undergraduate Society website no longer reflected the scale, professionalism, or evolving identity of the organization. Navigation felt outdated, branding lacked consistency, and the overall experience did not effectively support the needs of students looking for resources, events, and opportunities.
Working alongside two other designers, we completely redesigned the website experience while also rebranding the organization’s visual identity.
Our work included:
Redesigning the website UI/UX
Refreshing the organization’s branding
Creating updated logos, typography, and color systems
Building a consistent design system across pages
Collaborating closely with developers during implementation
The redesigned website has since been deployed at https://www.susubc.ca/ and is now used by more than 10,000 science students at UBC.
The Challenge
The previous website struggled with several issues:
Outdated visual identity
Inconsistent page layouts and branding
Difficult navigation and information hierarchy
Limited scalability for future content and growth
Because the website served a large student population with diverse needs, the redesign needed to balance professionalism, accessibility, and ease of use while remaining flexible for future updates.
Rebranding the Experience
A major part of the project involved rebuilding the organization’s branding from the ground up.
Working collaboratively with the design team, we explored:
New typography systems
Updated color palettes
Refined logo concepts
Consistent visual hierarchy
Modern UI patterns and layouts
The goal was to create a visual identity that felt more approachable, polished, and representative of the student community.
To ensure consistency across the redesign, we established shared design guidelines and reusable components that could scale across multiple pages and future updates.
Developer Collaboration
Once the designs were finalized, we handed them off to a team of three developers for implementation.
During development, we worked closely with the team to:
Clarify interactions and responsive behaviors
Maintain visual consistency during implementation
Adjust designs based on technical constraints
Iterate on feedback from both developers and stakeholders
This process strengthened my understanding of the relationship between design systems and real-world development workflows. It also reinforced the importance of flexibility and communication when moving designs from concept to production.
Reflection
This project taught me the importance of collaboration when working on large-scale digital experiences.
Working with multiple designers and developers strengthened my ability to:
Contribute within collaborative design environments
Maintain consistency across large systems
Communicate design decisions clearly
Adapt designs based on development constraints
Design for scalability and long-term maintainability
Most importantly, seeing the website deployed for thousands of students showed me how thoughtful UX and branding decisions can directly shape how communities interact with organizations online.
