COMMUNITY
2025
Out The Archive
Surfacing the hidden creative community at UCSD and showcasing what was once archived
Timeline
November 2024 - May 2025
Role
Product Designer
Skills
Figma, Framer, Cross-functional Collaboration, Responsive Design, Interaction Design
Team
Jarenz Castillo, Celine Leung, Ryan Eang, Alexa Der, Kate Hong, Rylee Boyles, Isla Cheng, Cassie Dela Cruz, Phoebe Zhang
TL;DR
Problem
Out The Archive (OTA) set out to surface UCSD’s creative community and give student projects a home. Our challenge: boost OTA’s presence while celebrating creativity in a way that inspires others to join. From surveys, students wanted community, collaboration, and skill-building, not just a showcase. Competitive analysis showed the need for a simple, focused site, so we prioritized three essentials: Join Us, About, and Portfolio. While a member dashboard was our original idea, we pivoted to a leaner website that could scale with OTA’s growth.
Results
Through multiple design iterations, we built OTA’s first official site in Figma and Framer, creating an on-brand, interactive experience that felt playful yet intentional. The Home Page featured draggable creative items and event callouts to boost engagement and involvement. The Story Page used doodles and scrappy visuals to share OTA’s origins, while the Join Page highlighted events, applications, and members to inspire participation. I led the Portfolio Page, designing interactive folders and postcards to showcase member projects, supported by a streamlined content submission process. Together, these pages established a cohesive, creative hub that amplified OTA’s presence and gave students a visible platform to share their work.
1,123
Potential Users
20%
Increaes in Community Engagement
✅
Successfully created an on-brand experience
COMMUNITY
2025
Out The Archive
Surfacing the hidden creative community at UCSD and showcasing what was once archived
Timeline
November 2024 - May 2025
Role
Product Designer
Skills
Figma, Framer, Cross-functional Collaboration, Responsive Design, Interaction Design
Team
Jarenz Castillo, Celine Leung, Ryan Eang, Alexa Der, Kate Hong, Rylee Boyles, Isla Cheng, Cassie Dela Cruz, Phoebe Zhang
TL;DR
Problem
Out The Archive (OTA) was created to spotlight UCSD’s hidden creative community and provide a home for student projects, but as a new org, we faced the challenge of building visibility while celebrating members’ work in a way that inspires others to join. Through first-principles thinking and a survey of 16 students, we learned that students wanted more than just a showcase—they wanted community, collaboration, and skill-building. Competitive analysis showed that too many pages can overwhelm visitors, so we focused on three essentials: a Join Us page for involvement, an About page to share OTA’s story, and a Portfolio to highlight student projects. While we initially planned a member dashboard for deeper connection, limited resources led us to pivot toward a leaner, more intentional website that could scale with OTA’s growth.
Results
Through multiple design iterations, we built OTA’s first official site in Figma and Framer, creating an on-brand, interactive experience that felt playful yet intentional. The Home Page featured draggable creative items and event callouts to boost engagement and involvement. The Story Page used doodles and scrappy visuals to share OTA’s origins, while the Join Page highlighted events, applications, and members to inspire participation. I led the Portfolio Page, designing interactive folders and postcards to showcase member projects, supported by a streamlined content submission process. Together, these pages established a cohesive, creative hub that amplified OTA’s presence and gave students a visible platform to share their work.
1,123
Potential Users
20%
Increaes in Community Engagement
✅
Successfully created an on-brand experience
COMMUNITY
2025
Out The Archive
Surfacing the hidden creative community at UCSD and showcasing what was once archived
Timeline
November 2024 - May 2025
Role
Product Designer
Skills
Figma, Framer, Cross-functional Collaboration, Responsive Design, Interaction Design
Team
Jarenz Castillo, Celine Leung, Ryan Eang, Alexa Der, Kate Hong, Rylee Boyles, Isla Cheng, Cassie Dela Cruz, Phoebe Zhang
TL;DR
Problem
Out The Archive (OTA) set out to surface UCSD’s creative community and give student projects a home. Our challenge: boost OTA’s presence while celebrating creativity in a way that inspires others to join. From surveys, students wanted community, collaboration, and skill-building, not just a showcase. Competitive analysis showed the need for a simple, focused site, so we prioritized three essentials: Join Us, About, and Portfolio. While a member dashboard was our original idea, we pivoted to a leaner website that could scale with OTA’s growth.
Results
Through multiple design iterations, we built OTA’s first official site in Figma and Framer, creating an on-brand, interactive experience that felt playful yet intentional. The Home Page featured draggable creative items and event callouts to boost engagement and involvement. The Story Page used doodles and scrappy visuals to share OTA’s origins, while the Join Page highlighted events, applications, and members to inspire participation. I led the Portfolio Page, designing interactive folders and postcards to showcase member projects, supported by a streamlined content submission process. Together, these pages established a cohesive, creative hub that amplified OTA’s presence and gave students a visible platform to share their work.
1,123
Potential Users
20%
Increaes in Community Engagement
✅
Successfully created an on-brand experience
🌱 The Start of Something Big
Out The Archive was founded to create a collaborative space for inspired creatives and enable them to surface their hidden work. As the first cohort of designers, we had to set a strong foundation for future creatives to come.
Our goal: To scale Out The Archive as a student organization on-campus and create a home for projects to live in.
My team and I before KILLING our presentation!
🌱 The Start of Something Big
Out The Archive was founded to create a collaborative space for inspired creatives and enable them to surface their hidden work. As the first cohort of designers, we had to set a strong foundation for future creatives to come.
Our goal: To scale Out The Archive as a student organization on-campus and create a home for projects to live in.
My team and I before KILLING our presentation!
🌱 The Start of Something Big
Out The Archive was founded to create a collaborative space for inspired creatives and enable them to surface their hidden work. As the first cohort of designers, we had to set a strong foundation for future creatives to come.
Our goal: To scale Out The Archive as a student organization on-campus and create a home for projects to live in.
My team and I before KILLING our presentation!
📚 First Product Principles
Before starting anything, we answered the 3 product principles to understand the problem and mission at hand.
What customers does the organization serve?
What problems does the organization solve?
What values drive the organization?
Answering these principle questions helps us ground this project to user needs and purpose.
📚 First Product Principles
Before starting anything, we answered the 3 product principles to understand the problem and mission at hand.
What customers does the organization serve?
What problems does the organization solve?
What values drive the organization?
Answering these principle questions helps us ground this project to user needs and purpose.
📚 First Product Principles
Before starting anything, we answered the 3 product principles to understand the problem and mission at hand.
What customers does the organization serve?
What problems does the organization solve?
What values drive the organization?
Answering these principle questions helps us ground this project to user needs and purpose.
By summing up the answers to the questions above, we developed a problem statement of...
How might we boost OTA’s presence while celebrating members’ creativity to inspire applicants?
By summing up the answers to the questions above, we developed a problem statement of...
How might we boost OTA’s presence while celebrating members’ creativity to inspire applicants?
By summing up the answers to the questions above, we developed a problem statement of...
How might we boost OTA’s presence while celebrating members’ creativity to inspire applicants?
🔬 User Research
First, we sent out a user survey to gauge what students would use the website for while also getting a gist of how they envision OTA's design aesthetic. This is what we learned from 16 responses.
People want to network and build community.
People want to be involved
People want to build new skills and explore new interests.
A digestible version of an affinity mapping of the responses.
🔬 User Research
First, we sent out a user survey to gauge what students would use the website for while also getting a gist of how they envision OTA's design aesthetic. This is what we learned from 16 responses.
People want to network and build community.
People want to be involved
People want to build new skills and explore new interests.
A digestible version of an affinity mapping of the responses.
🔬 User Research
First, we sent out a user survey to gauge what students would use the website for while also getting a gist of how they envision OTA's design aesthetic. This is what we learned from 16 responses.
People want to network and build community.
People want to be involved
People want to build new skills and explore new interests.
A digestible version of an affinity mapping of the responses.
🔎 Competitive Analysis
We took inspiration from other student org websites and observed what pages they included, and which would be relevant for OTA.
"Join Us" page to get and stay involved.
"About" page to share the story and mission of OTA.
"Portfolio" page to showcase the work of our creatives.
We wanted to be intentional with what pages we included to avoid overwhelming visitors with information.
🔎 Competitive Analysis
We took inspiration from other student org websites and observed what pages they included, and which would be relevant for OTA.
"Join Us" page to get and stay involved.
"About" page to share the story and mission of OTA.
"Portfolio" page to showcase the work of our creatives.
We wanted to be intentional with what pages we included to avoid overwhelming visitors with information.
🔎 Competitive Analysis
We took inspiration from other student org websites and observed what pages they included, and which would be relevant for OTA.
"Join Us" page to get and stay involved.
"About" page to share the story and mission of OTA.
"Portfolio" page to showcase the work of our creatives.
We wanted to be intentional with what pages we included to avoid overwhelming visitors with information.
✏️ Design Pivot
Before even designing the main website that OTA is today, we also wanted to design a member dashboard where members could log in, connect with other members, and view each other's projects.
However, we quickly had to pivot and focus on the main site because we did not have the time and resources to pursue a dashboard.
To compromise, we decided to dedicate a page of the OTA site to a portfolio of student projects that would've been showcased on the dashboard site.
This is what the dashboard could've been. Maybe in the future!
✏️ Design Pivot
Before even designing the main website that OTA is today, we also wanted to design a member dashboard where members could log in, connect with other members, and view each other's projects.
However, we quickly had to pivot and focus on the main site because we did not have the time and resources to pursue a dashboard.
To compromise, we decided to dedicate a page of the OTA site to a portfolio of student projects that would've been showcased on the dashboard site.
This is what the dashboard could've been. Maybe in the future!
✏️ Design Pivot
Before even designing the main website that OTA is today, we also wanted to design a member dashboard where members could log in, connect with other members, and view each other's projects.
However, we quickly had to pivot and focus on the main site because we did not have the time and resources to pursue a dashboard.
To compromise, we decided to dedicate a page of the OTA site to a portfolio of student projects that would've been showcased on the dashboard site.
This is what the dashboard could've been. Maybe in the future!
✏️ Design Iterations
We quickly transitioned to working on the main site and iterating upon their designs.
We kept the core pages we needed from our competitive analysis. And honed in on designing an on-brand, interactive experience to reel in interested students.
With these beautiful sketches, we were optimistic about how the site would turn out!
✏️ Design Iterations
We quickly transitioned to working on the main site and iterating upon their designs.
We kept the core pages we needed from our competitive analysis. And honed in on designing an on-brand, interactive experience to reel in interested students.
With these beautiful sketches, we were optimistic about how the site would turn out!
✏️ Design Iterations
We quickly transitioned to working on the main site and iterating upon their designs.
We kept the core pages we needed from our competitive analysis. And honed in on designing an on-brand, interactive experience to reel in interested students.
With these beautiful sketches, we were optimistic about how the site would turn out!
✨ Welcome to OTA
After much designing in Figma and adding interactions in Framer, we developed the official home page.
Features draggable creative, scrappy items to unveil a secret call to action. This encourages talkability of these cool features and contributes to our value of creative freedom.
Showcases upcoming events on cute clothes pins to notify visitors how they can get involved ASAP.
Glimpses into the portfolio of our members' work to inspire interested students.
✨ Welcome to OTA
After much designing in Figma and adding interactions in Framer, we developed the official home page.
Features draggable creative, scrappy items to unveil a secret call to action. This encourages talkability of these cool features and contributes to our value of creative freedom.
Showcases upcoming events on cute clothes pins to notify visitors how they can get involved ASAP.
Glimpses into the portfolio of our members' work to inspire interested students.
✨ Welcome to OTA
After much designing in Figma and adding interactions in Framer, we developed the official home page.
Features draggable creative, scrappy items to unveil a secret call to action. This encourages talkability of these cool features and contributes to our value of creative freedom.
Showcases upcoming events on cute clothes pins to notify visitors how they can get involved ASAP.
Glimpses into the portfolio of our members' work to inspire interested students.
✨ Hear Our Story and Be Inspired To Join
Story Page (Left): Designed as a playful scrolling experience, using doodles and scrappy images to narrate how OTA began while staying true to the brand’s creative identity.
Join Page (Right): Highlights upcoming events and the application process, while showcasing past events and current members to help prospective creatives envision themselves as part of OTA.
✨ Deep Dive into the Portfolio Page
I spearheaded the Portfolio page, and I'm really happy how the interactions turned out! Let me walk you through the problems we ran into and how I solved each:
Problem: We envisioned the folders to look like a filing cabinet, but couldn't realistically replicate an opening animation.
Solution: We pivoted to stacked manila folders that shuffled based on which you wanted to view (this took a while to make interactive)
Problem: How could we gather information for the postcards from the creators?
Solution: We created a Google form for creators to fill out details and we handpicked images from our photographer.
Problem: How should the postcards function?
Solution: Initially we wanted it to function like a pop up, but for the sake of time, we made it a simple flip animation that was signified by a hover animation.
✨ Deep Dive into the Portfolio Page
I spearheaded the Portfolio page, and I'm really happy how the interactions turned out! Let me walk you through the problems we ran into and how I solved each:
Problem: We envisioned the folders to look like a filing cabinet, but couldn't realistically replicate an opening animation.
Solution: We pivoted to stacked manila folders that shuffled based on which you wanted to view (this took a while to make interactive)
Problem: How could we gather information for the postcards from the creators?
Solution: We created a Google form for creators to fill out details and we handpicked images from our photographer.
Problem: How should the postcards function?
Solution: Initially we wanted it to function like a pop up, but for the sake of time, we made it a simple flip animation that was signified by a hover animation.
✨ Deep Dive into the Portfolio Page
I spearheaded the Portfolio page, and I'm really happy how the interactions turned out! Let me walk you through the problems we ran into and how I solved each:
Problem: We envisioned the folders to look like a filing cabinet, but couldn't realistically replicate an opening animation.
Solution: We pivoted to stacked manila folders that shuffled based on which you wanted to view (this took a while to make interactive)
Problem: How could we gather information for the postcards from the creators?
Solution: We created a Google form for creators to fill out details and we handpicked images from our photographer.
Problem: How should the postcards function?
Solution: Initially we wanted it to function like a pop up, but for the sake of time, we made it a simple flip animation that was signified by a hover animation.
💭 Reflection
This project was such a fruitful experience. This was the biggest team I've worked with and learned how to fairly distribute work. Also, this is the most unique, creative site I've designed. This project helped me learn Framer and its interaction capabilities.
There is still much work to do, but I'm excited to lead it next school year as the Director of Website Design!
💭 Reflection
This project was such a fruitful experience. This was the biggest team I've worked with and learned how to fairly distribute work. Also, this is the most unique, creative site I've designed. This project helped me learn Framer and its interaction capabilities.
There is still much work to do, but I'm excited to lead it next school year as the Director of Website Design!
💭 Reflection
This project was such a fruitful experience. This was the biggest team I've worked with and learned how to fairly distribute work. Also, this is the most unique, creative site I've designed. This project helped me learn Framer and its interaction capabilities.
There is still much work to do, but I'm excited to lead it next school year as the Director of Website Design!
Any questions or want more details on this case study?
Continue exploring the gallery…
Any questions or want more details on this case study?
Continue exploring the gallery…
Any questions or want more details on this case study?
Continue exploring the gallery…
