TransferTrack
Navigate college transfers effortlessly
Every DeAnza College student wants to transfer to a top UC. However, the path there is confusing and convoluted. TransferTrack makes a simple and user-friendly education plan using articulation agreements.
Timeline
All design work was completed in under 24 hours
Team
1x UX Designer, 3x Developers
Background
In order to transfer from one college to another, students must meet a series of major requirements, depending on each college. Essentially, each school has different requirements, even for the same major. Assist.org, is every transfer student's best friend. It provides you with a PDF articulation agreement between your community college and a UC or CSU, which shows recommended classes for each major. DegreeWorks is used at some colleges to show graduation status.
The Problem
Transfer students struggle with complex, inefficient tools like Assist.org and DegreeWorks, which lack easy comparison features for multiple universities, making course planning overwhelming.
Current degree planning tools
The Solution
The Process
User Research
To learn more about the challenges faced by transfer students, I conducted a quick survey of 85 students on campus. This survey might not be entirely accurate due to sampling bias, since the students weren't randomly chosen. Nonetheless, it was clear that there was a demand for this application.
Low-Fidelity Paper Prototyping
My first step was to consult the developers on the feasibility of the project within our tight time frame. Paper prototypes provided us with a tangible starting point to gauge the project's technical viability and gave us clarity in moving forward.
Wireframing
With the green light from my developers, I proceeded to design low-fidelity wireframes. This foundational step ensured developers could start their work promptly, with a clear vision and a solid roadmap to follow.
Branding
Our color scheme, featuring UC's blue and yellow, conveyed the platform's educational context. We added a touch of purple for creativity, catering to our younger user base. The UI was meticulously crafted to be sleek, modern, and minimalistic, ensuring a smooth user experience.
My Takeaways
Figma components are powerful
I learned advanced Figma features like hover states, dropdowns, and interactive elements to closely resemble the final product. Using style libraries and well-structured components with variants made the design process more efficient and scalable.
Always check with developers for technical viability
Collaboration with developers was key. I worked closely with them to ensure the designs were technically feasible within the hackathon’s time constraints, allowing us to move quickly while maintaining quality.
Make useful things
After we presented, one of the judges told us that he was a transfer student years ago, and he wished a website like this existed back then. Fulfilling user needs was incredibly satisfying.