Celebrate student work while solving real UX issues from past years.

Every year, the CalArts Graphic Design program crates a new website to showcase student work from the year. As the lead designer, I led concept development, information architecture, and UX design while working closely with developers, designers, and photographers to create a fully functioning website.

Recognition
CSS Design Awards · Website of the Day
Awwwards · Honorable Mention
Communication Arts · 2025 Interactive Annual

Role Lead Designer

Team Design by Yujin Park, Clarence Sim, Ella Rosenblatt, Dariia Zamrii, with the help of the whole team / Coding & Photography by Freeze Shi, Ingrid Yu-ju Tai, Helen Xie / Instructor: Roman Jaster

Published May 2024

Problem

Defining the Problem

What is the scope of this project?
The size of our program spanned the BFA and MFA programs. We wanted to present up to 3 projects from each student. This would total approximately 175-195 works that would need to be presented effectively on the website. Additionally, we needed to include student portraits, bio information, and documentation of student life throughout the year.

Auditing Previous Websites
I audited previous years’ sites to identify what worked and what didn’t in terms of function, structure, and visuals.

✅ Straightforward navigation
⛔️ Poor optimization for mobile devices
⛔️ Buggy interaction
⛔️ Lack of clarity & flexibility for different types of work
⛔️ Project presentation feels disconnected to the narrative nature of student work

With these in mind, we asked:

How can we create a website containing diverse student work from 65 students and 175 projects, with a clear content structure and a mobile-optimized experience?

Research

Who are we designing for?

1️⃣ Prospective Students
Curious about what kind of work they’ll get to make, and whether they’ll “fit in”

2️⃣ Current CalArts Students
Looking for examples from previous year levels’ work

3️⃣ Alumni
Browsing the latest work and potentially looking to hire

4️⃣ Parents
Interested in seeing what the program produces, but not the main audience

Our Approach

Making and Breaking the Grid

A bare-bones modular grid structure was strategically chosen to highlight the designers, work, and life pages under the same visual formula. The blue grid acts as a partition between the content, and a unifier for the different sections (designers, work, life) featured across the site. The title “Thinking by making by breaking” was conceived as a hybrid of old graphic design quotes “Thinking by making” and “Making and breaking the grid.” It captures the spirit of CalArts graphic design while serving as justification for the gridded visual branding of the site.

Our Approach

Building Information Architecture from the Ground Up

For clarity in content hierarchy and user flow, we began with a simple diagram outlining the site’s four main pages. But as we moved into design, it quickly became clear that each page couldn’t be designed in isolation. Every interaction influenced another, and designing even a single page required a holistic understanding of the entire structure.

With over 50 students contributing work and a tight timeline, we needed to lock in the architecture early to standardize submissions. After exploring different ways to display designer and project information, we landed on a solution that integrated both into a unified Designer Detail page, allowing users to explore each student's work and profile in one cohesive view.

Process

Main Page Designs

A teaser for the projects We narrowed down the most important function of the main page to be an introduction to the work, or a teaser. On the main page, the grid is representative of the 35-week, 243-day academic year that the work was produced in. By having random project images populate the grid, it gives the user a sneak peek to the work, evoking curiosity.

The Shifting Title As one of the hero moments of the concept, we wanted to try out a varying text title that switches between Thinking, Making, and Breaking. This animation highlights the relationship between the three verbs in the design processes of students, and their constant motion. For the layout, we went with Option 3 because it was able to have all the elements live within the blue grid, which gave us more consistency throughout the website.

Process

Main Page Interaction

Interactions that Reinforce the Concept I came up with multiple ideas for the main page interaction, and narrowed it down by asking which idea is the most user-friendly while being true to the concept. In this option, the user is able to “paint” the calendar with student work with their mouse. This moment highlights the “DIY” nature of the program and provides a glimpse into the featured student work, inviting the user to explore other parts of the site.

Process

Work Gallery

How do we show off the vastly different types of work? The work gallery is one of the most crucial components of the website—it must present the work, of vastly different mediums, styles, and formats, within a single page. The goal was to create a functional gallery that would be able to display images and information of the work, and give each piece a proper opportunity to shine. We found that giving the work space to breathe created the most harmonious layout.

Process

Designers Gallery

A Modular Layout Replicating the grid on the main page, we wanted the designers gallery to feel cohesive to the concept of the cohesive grid. We used staggered, overlapping tiles to create visual interest while maintaining organization.

Testing for edge cases This was one of the highlight moments of the website—each dsigners was brought to life with an interactive, stop-motion-animated 360-degree portrait. For the spinning portraits, I worked with developers to plan out edge cases (props, sitting vs standing, aspect ratios) and designed photography guidelines to ensure smooth implementation.

Process

Work Details

A key IA challenge How can we show student work and also introduce the designer behind it? I designed a clean split structure that allows users to see the project in context without losing the human element.

Process

Iterating & Testing for Mobile

Mobile optimization was one of the highest-priority goals for this project. We prototyped several interaction models, including hover states, work gallery layouts, and animation speeds. I worked hand-in-hand with developers to refine animations and loading behaviors for clarity and performance.

Final Designs

Final Designs of the Website

Promotion video

Life page

Credits page

Outcome

Ready, Set, Live Site!

5,200+ unique visitors during launch month
2.4 average pages per session
3m 12s average session duration

Recognized by Awwwards, CSS Design Awards, and Communication Arts
Built a scalable site that serves both storytelling and function
Established a clearer content pipeline for future years

“One of the best websites I’ve seen in years! What an incredible forum to showcase the best work of CalArts students. I sent this site to a ton of designer friends!” —Sarah DiLeo

“Enjoyed the fresh, noncorporate look of the entire site and the way the students visualized the 35-week program similar to data visualization. And I love the style of the gallery of designers—it’s very memorable, looks great and will spark the audience’s curiosity.” —Nell Lundy

Users interacting with the live site at the 2024 CalArts GD End-of-Year-Show

Reflection

I learned how to…

Lead a design team
I naturally stepped into the role by coming up with the concept, and continued to guide the design team through the project. One of the biggest challenges was balancing different perspectives within the team. I worked hard to maintain an open space for sharing creative ideas while ensuring the team was on the same page in terms of usability and feasibility.

Be nimble with challenges
Working through mid-project challenges, like refining hover interactions, testing for edge cases, and coordinating with developers, definitely helped me learn to iterate quickly while wearing my UX designer hat.

Review KPIs through analytics
While we saw encouraging numbers—like over 5,000 unique visitors during launch—I wish we had set up more structured analytics. Metrics like bounce rates on the home page, click-throughs on featured projects, or heatmaps could have helped us understand what resonated most with users and directly informed future design decisions for the program.