
Electronic Course Catalog - eLumen Implementation Project
A brand new custom electronic course catalog dynamically updated with curricular data.
- Category: Frontend Web Development, UX and UI Design, Information Architecture
- Client: Mission College, WVM District
- Role: Frontend Web Developer/Designer, Content Designer, UI/UX Designer, Project Design Lead
- Skills Used: UI Design, UX Design, HTML/CSS, JavaScript, Handlebars JS, Bootstrap Framework
- Role: I Led the design and frontend web development of custom templates for an EdTech project with Mission College and eLumen, utilizing HTML, CSS, Bootstrap, and HandleBars JS to modernize the college’s course catalog system. Previously reliant on a static PDF format that quickly became outdated, the new system offers a dynamic, user-friendly interface with improved UI/UX design, enabling real-time updates and intuitive navigation.
Context
I led the design and frontend web development of custom templates for an EdTech project in conjunction with Mission College and eLumen, utilizing HTML, CSS, Bootstrap, and HandleBars JS to modernize our college’s course catalog system. Previously, we relied on a static, non-dynamic PDF format, which often resulted in outdated information. By implementing eLumen, I transformed the system into a dynamic, user-friendly interface with an enhanced UI/UX design, enabling real-time updates and more intuitive navigation.
My focus on UI/UX design helped optimize the information architecture, making the system more accessible and efficient for faculty and students. The new solution improved the accuracy of curricular data, added powerful search functionality, and streamlined the process of tracking student learning outcomes and managing curriculum data. Ultimately, I created a highly responsive and engaging digital catalog that reduced reliance on IT intervention while delivering a seamless user experience across the platform.
Context of Project and Need
Before launching this catalog transformation project, our college's website had accumulated over 5,000 I pages, many of which were outdated PDFs, duplicated pages, and massive archives of old PDFs. Years of neglected digital governance created a maze of broken links, disorganized headers, and redundant content, impeding both accessibility and the user experience. As part of a comprehensive website overhaul, I led an initiative to streamline this content-eliminating obsolete files, rectifying governance issues, and focusing on a structure that would support dynamic, accessible information flow.
In line with these goals, I turned my attention to the course catalog-a major piece of the institution's web presence. This catalog, previously updated through static PDFs, required significant annual efforts from graphic designers, the marketing director, and instructional technologists. By transitioning to a structured content approach, I was able to design templates in HTML, CSS, Bootstrap, and HandleBars JS, dynamically managing curriculum data with the elumen platform. This transformation allowed us to completely eliminate PDF catalogs, replacing them with accessible, user-centered templates that are easily updated and directly serve users' needs.

Go Mission! App
An optimized user experience for Go Mission! Wireframing, Adobe Creative Cloud, usability testing, UI design, UX writing, and user flows.
Learn More
Plantwell App
A redesigned user experience & UI interface for the Plantwell app with wireframing, usability testing, UI design, UX writing, and user flows.
Learn More
Mission College UX/UI
Functional and user-friendly website upgraded sitemap, navigation, user flows, upgraded UI design/layout, upgraded site responsiveness.
Learn More