Overview
UCSD Design Co’s 10 week summer design program
UP-Grade is UCSD Design Co’s 10 week summer design program where students apply to various roles to tackle real-world product challenges pitched by industry professionals. Students team up, set their own goals and timelines, and ultimately deliver a final case study for a showcase event.
Building a website to guide and attract potential applicants of diverse skillsets
To connect with students of all skills (not just design!), we reflected our program’s diverse roles through UP-Grade 2025’s visual identity– an interactive and playful experience that speaks to creative students on campus while staying true to its role as an informative hub.
Problem
We realized our website didn’t reflect the program we’ve become
In the past, UP-Grade primarily catered to new student designers, but as the program grows, we’ve shifted to create space for a variety of skillsets to reflect real-world projects.
Even though Design Co works as a cross-functional team, many students still see UP-Grade as a UI/UX design-only program, which makes it difficult to attract those interested in software engineering, product management, and other non-design roles.
Creating space for all skill sets build opportunities for collaboration beyond design
Expanding UP-Grade 2025’s website to focus beyond just design roles fosters collaboration and reflects the real-world dynamics of the design industry. Since Design Co’s core mission is to bridge the gap between students and the industry, we want to better prepare our community for cross-functional work environments by making it clear that we are creating space for a variety of skill sets.
research
What we discovered about why UP-Grade felt design only
To understand why students often thought UP-Grade was just for designers, we looked into past program websites. We analyzed how roles were portrayed in the site’s visuals and traced how students navigated step by step to find role information. This uncovered three major issues to focus on with UP-Grade 2025.
We identified three key design goals from our research
By turning the issues into design goals, we gave ourselves a clear direction forward and ensured our solutions were directly tied to real challenges students faced.
Solution
An interactive site that puts roles front and center
From the moment students land on the site, they encounter an engaging, interactive experience where each role has its own color and character. This visual identity brings roles to life, making them easy to recognize and encouraging students to explore opportunities in the program.
Spotlight every role from the start with the hero
The hero carousel and dropdown puts all roles at the landing page’s focus, letting students pause to explore each one as it rotates or jump straight to the role that interests them most.
Discover roles that match your skills and interests with a personality quiz
Unsure of where your skills can apply? A quick personality quiz guides students through the variety of roles they can take on, highlighting they can contribute to cross-functional teams.
Clear paths to explore roles, program info, and apply
Simple, intuitive navigation and a clear apply button make program and role information easy to find, while CTA cards and banners prompt students to explore key resources like FAQs and logistics, keeping all information easily discoverable.
Design Process
Ideation & Exploration: We tried many ideas to make roles memorable, gradually narrowing it down
We rapidly wireframed various solutions and interactions to spotlight roles and weave them throughout the rest of the website. Eventually, we began merging on the main idea of roles (as themes) being cycled on the homepage and including a personality quiz for a fun way to explore roles.
Why we decided on the role switching dropdown, carousel, and personality quiz
After testing multiple ideas, we realized a dynamic hero carousel gave every role equal visibility and having the quiz as a secondary feature could fill the gaps for students unsure of where to apply their skills.
Crafting unique personalities for every role
In tandem with the development of the interactive parts of the website, we started creating personalities for each role. To give each role its own individuality, we paired it with a color and a relevant object character to tie into the pegboard theme.
Turning visual identity to a modular design system
To ensure scalability and consistency across pages and different screen sizes, we gradually created a set of reusable components and styles while moving from lo-fi to hi-fi. This also allowed us to account for edge cases and test the limits of our designs early.
Dev Handoff
Collaborating with our developers to make a functional website
Once our designs were finalized, we annotated components and breakpoints for a smooth handoff to our developers.
Takeaways
Whimsical details should be designed with intention in mind
After launch, we invited students to share their first impressions of the site. Some felt confused about the purpose the pegboard served, while others thought the personality quiz was a fun touch that made the site feel more engaging. Hearing this reminded me that playful, whimsical features need just as much intention and clarity as functional ones.
Next time, we need more time to check the implementation
With such a tight timeline, we didn’t leave enough time for visual quality checks during development. This led to small differences from the original design that later needed fixing that we didn’t have enough time for. I learned how crucial a smooth handoff and clear communication are for ensuring nothing slips through the cracks, as well as allocating enough time to carefully check our implementation!
