University of Rochester
A range of work supporting the university mission—design systems, workflow appplications, academics search, and more.
- Role
- UX
- UI Design
- Frontend Development
- CMS Implementation
- Tech
- HTML, CSS, JS
- Cascade CMS: XML, XSLT
- Figma
- Mural
- JIRA
- Frameworks
- Svelte
- Vue
- Laravel
Details
The University of Rochester is a large institution involved in higher education, medicine, and research.
I work on the Web Communications team that services the School of Arts and Sciences and the Hajim School of Engineering, maintaining the sites for more than 40 departments and institutes. Over the years, multiple cohorts of students have used the department sites throughout their academic career at Rochester, with 7,000 students attending in 2023–2024.
All of our projects have maintained their cohesiveness through an internal design system called Yellowjacket.
Department Template
Implemented in Cascade CMS, the department template is our main tool in maintaining a consistent experience across all of the departments our team maintains.
It is designed to meet the needs of departments and student offices by offering layouts for homepages, degree pages, directories, faculty members, news and events. We leverage RSS feeds from the University's newscenter on our department news pages and combine those feeds with department specific items from Cascade. For events we rely heavily on the University's Localist instance and use Vue to create our own custom widgets (like a mini-calendar on the side that highlights days that have events).
I worked with the new accessibility team to make sure our directory and people pages worked great for screen readers. We also collaborated on making sure the new video headers are WCAG 2.1-compliant.
- Department Samples
- Hajim School of Engineering
- Institute of Optics
- Department of Biology
Handbook Template
This template allows departments to document their policies in an accessible way. Prior to this option, departments would internally create a PDF with this information, leading to inconsistent experiences for students, stressed out staff, and our team having to fix inaccessible content after the fact.
The handbook template makes complex policies be easy to find and helps thousands of enrolled students by providing the content in an accessible way. Departments are able to focus on the policies, rather than getting lost creating another design.
Additionally, I was able to write some XSLT that creates a PDF out of the site content in the content management system, as seen in the Undergraduate Bulletin.
- Handbook Samples
- Graduate Handbook
- Undergraduate Bulletin
Academics Search
Built with Algolia and Vue, this tool allows us to provide a consistent search experience to prospective students globally.
Originally built to work in our department template, it was refactored so that a version could be used on the admissions site, which runs on WordPress. We also create school-specific and graduate-level variants. Now exploring options for performance optimizations and new features.
Academic Honesty
Our portfolio also includes custom webapps, like one for faculty to report incidents of suspected academic dishonesty.
After trying a variety of setups, our team went with Laravel. In my role I led the team through some exercises to make sure we all understood the core functionality of the app. I sketched some screen ideas and created a simple version in Figma before writing some code. I was responsible for setting up the .blade
templates and creating the frontend styles and scripts.
We were able to succesfully digitize a paper-only workflow. Faculty have commented on how smooth the experience is using the platform.
AS&E Priorities
The entity of "AS&E" no longer exists, but this was one of my favorite projects. I was able to coordinate with a designer-friend to take the site's design up a notch. We were able to add CSS animations and transitions to make the site more engaging.
- Site Mirror
- Wayback Machine