SHIPPED
0→1 PROJECT
DESIGN LEAD
✦ Transforming complex prerequisites into an intuitive visual experience.
Led end-to-end product design for a visual course-planning tool, creating scalable systems, interactive course maps, and accessible experiences for UCLA students.
ROLE
Product design lead
TOOLS
Figma
Adobe Illustrator
Procreate
TIMELINE
Apr - Jun 2026
(8 weeks)
TEAM
1 project manager
2 project leads
4 product designers
6 developers
Overview
As a UCLA student, I've spent way too much time trying to figure out what classes I should take next—a worry that every student on campus constantly encounters each quarter.
TreeReq explores what course planning could feel like if students could actually see their degree instead of reading through it.
SNEAK PEEK
A course-planning tool for UCLA students
As the product design lead, I led a team of 4 designers/marketers over the 8-week project, coordinating not just design, but workflows, documentation, and collaboration with 6 developers to keep the team aligned.
USER RESEARCH
Why are students struggling?
UCLA's Degree Audit Reporting System (DARS) has all the information a student would need—but finding it means digging through dense text and seemingly infinite drop downs.
Current UCLA DARS.
Before designing anything, we wanted to understand whether academic planning was actually frustrating—or if DARS simply looked outdated.
We surveyed around 30 students across different majors and class years, and three insights stood out:
87%
Relied on multiple tools (DARS, MyUCLA, advisors, spreadsheets, etc.) just to plan their degree.
50%
Felt existing planning tools lacked personalization and support for individual academic goals.
67%
Experienced moderate-to-high stress when planning courses and graduation timelines.
The issue wasn't a lack of information—it was that the information wasn't connected.
COMPETITIVE ANALYSIS
Looking beyond DARS
Existing tools solved pieces of the planning process, but no solution helps students clearly visualize prerequisite pathways and long-term academic progress.
This became TreeReq's biggest opportunity.
PROBLEM
How might we help UCLA students understand how courses connect through prerequisite pathways?
Existing tools present degree requirements as fragmented, text-heavy information, making it difficult to understand prerequisite pathways and long-term graduation progress.
DESIGN IDEATION
From flowcharts to skill trees
I sketched concepts for both the general interface and prerequisite tree.
My early sketches for the general interface drew inspiration from AI-centric products, combining the familiar sidebar layout with an infinite canvas for more freedom in navigability.
General interface sketch.
The prerequisite tree proved to be the most challenging design problem.
1st sketch: text-heavy; hard to scale.
2nd sketch: integrated connecting nodes.
Initial concepts were information-dense and difficult to scan, so I iterated towards a more gamified approach, inspired by skill trees in video games.
By breaking down requirements into connected nodes, this made prerequisite pathways easier to understand, which helped create a clearer sense of progress.
ITERATION 1
Rethinking the prerequisite tree
Early tree concepts relied on rigid, flowchart-like connections—but this became restrictive and couldn't scale with multiple courses.
Through iteration, I found that organic layouts with more fluid connectors made the class hierarchy easier to follow.
✘ Version 1: Rigid connectors
✔ Version 2: Fluid connectors
When moving onto high-fis, I experimented with different color systems and node styles.
Initial components & tree design.
My initial concepts used pastel colors and uniform circles, but this proved difficult for users to distinguish between course types and completion status.
ITERATION 2
Finding the right structure
So, I introduced a more cohesive green palette, and adopted information-rich components. This made the structure both clear and scalable.
The final tree relies on color-coded requirements and icons, customized nodes, and intuitive prerequisite pathways to help students quickly understand their degree progress.
Finalized components and tree design.
CHALLENGE
Designing for a system I didn't know (yet)
As a Cognitive Science major under the College of Letters & Science, I wasn't familiar with the engineering school's technical breadth requirements.
Instead of making assumptions, I worked closely with developers who had firsthand experience with the process. Together, we broke down a complicated set of requirements into a sequence that felt much easier to understand.
Sketch provided by project lead on how they imagined the tech breadth sequence.
Finalized and annotated tech breadth sequence.
USER TESTING
Did it actually work?
After several rounds of design, I wanted to answer one question: could students understand the tree without needing someone to explain it?
I conducted one-on-one usability tests with 3 UCLA students to evaluate the intuitiveness of the experience and validate core user flows. This helped reinforce the design's structure.
Tree creation
All participants successfully created a degree tree and completed the onboarding process without guidance.
Profile access
Users easily discovered multiple pathways to create a tree, access their profile, and navigate between pages.
Tree navigation
All participants successfully found courses and understood prerequisite pathways within the tree.
FINAL SOLUTION
✦ Reimagining academic planning
Students begin onboarding with their academic goals and requirements. Then, they can generate a personalized prerequisite tree tailored to their degree path.
The tree enables students to explore course prerequisites, track progress toward graduation, and access detailed course information—all within a centralized, easy-to-navigate interface.
FINAL SOLUTION
✦ Design direction
I incorporated greens and blues into TreeReq's visual identity to connect with the tree and nature imagery the project embodied.
IMPACT
The results of an 8-week project
Synthesized insights from 30+ student surveys
Created 15 reusable components & 6 responsive interfaces
Validated with 3 one-on-one usability tests
Led a dev-ready design in less than 8 weeks
REFLECTION
What I learned & what I'd do next
TreeReq taught me that simplifying an experience doesn't mean just removing complexity, but presenting complexity in a way people can actually understand.
It also gave me valuable experience in leadership and validating design decisions through user feedback.
