Homepage
Designed and implemented the refreshed homepage experience.
UI Engineering Case Study · 2026
JerseySTEM
Redesigning and engineering a scalable digital experience for STEM education.
Visit Site →A design-to-production website refresh shaped by evolving requirements, a mobile-heavy audience, and the need for reusable page systems.
Project Summary
Design direction that could survive change.
I joined JerseySTEM through Catchafire as a volunteer during an active website refresh. The existing website was outdated, lacked a cohesive visual direction, and needed to be modernized under an aggressive timeline.
Using my background in UI engineering, Figma, responsive design, and WordPress, I proposed multiple homepage concepts. The second direction was selected by the team. I learned Elementor while actively developing the project, extended it with frontend code when necessary, and took increasing ownership of page development and reusable structures as the work progressed.
The Challenge
An outdated website. An evolving project. A tight deadline.
JerseySTEM needed more than a visual refresh. The website contained outdated content, inconsistent presentation, unclear page organization, and sections whose purpose was still being evaluated. Meanwhile, requirements, content, and responsibilities continued to evolve against an aggressive launch timeline.
How do you create a modern and consistent digital experience while the content, requirements, and project itself are still changing?
- Outdated website
- Aggressive timeline
- Changing requirements
- 100+ Jira tickets
- Existing WordPress infrastructure
- Content dependencies
- Team transitions
- Mobile-heavy audience
Establishing a New Direction
Designing Before Developing
Rather than immediately rebuilding the existing site inside WordPress, I used Figma to explore what a refreshed JerseySTEM experience could become. The concepts focused on hierarchy, calls to action, readability, modern imagery, and a consistent visual system. Stakeholders selected the second direction as the production foundation.
View design progression
Full Figma Direction
Seeing the Experience as One Connected System
The complete Figma direction brought the refreshed hierarchy, content rhythm, calls to action, imagery, and reusable visual patterns into one continuous homepage experience before production development began.
From Figma to Production
Turning the Design Into a Working System
Elementor was new to me when I joined. I applied my existing frontend and responsive-design knowledge while learning the tool during active development. Where the visual editor could not reproduce the intended experience on its own, I extended the implementation with custom CSS, HTML, and JavaScript.
- Figma
- WordPress / Elementor
- HTML / CSS / JavaScript
- Responsive Production Experience
Building for Reuse
One System. Nine Programs.
Rather than treating every STEM curriculum area as an independent page, I developed a reusable program-detail structure. Each program could retain distinct content while sharing typography, spacing, navigation, responsive behavior, and visual hierarchy.
AIBiologyRoboticsEngineeringTechnologyScienceMathematicsCurriculum 8Curriculum 9
Responsive Design
Designing for the Audience
Stakeholders indicated that approximately 60% of traffic came from mobile devices, so responsive behavior was a core requirement—not a final pass. Layouts, typography, navigation, cards, imagery, and interactive elements were tested and adjusted across viewports.
View responsive screenshots
Accessibility & Usability
Clarity Before Decoration
Accessibility and readability influenced typography, sizing, spacing, hierarchy, and responsive behavior. The goal was not simply to make JerseySTEM look newer; it was to make programs, impact, leadership, and opportunities easier to understand and navigate.
- Readable typography
- Clear hierarchy
- Mobile legibility
- Consistent calls to action
- Responsive layouts
- Predictable navigation
Project Scope
Expanding Across the Website
About
Developed the About experience and supporting content structure.
Leadership
Created patterns for leadership, academic, and technical team members.
Partners
Developed partner presentation with logo and external-link support.
Programs
Created reusable architecture supporting nine curriculum areas.
Get Involved
Built layouts for volunteer, instructor, mentorship, sponsorship, and outreach opportunities.
Donate
Translated sponsorship and donation information into a web experience; payment routing remained with other JerseySTEM teams.
Contact & Privacy
Developed responsive contact and privacy-policy experiences.
Responsive System
Adjusted and tested layouts across desktop, tablet, and mobile.
Real-World Constraints
The Design Wasn't the Only Thing Changing
Challenge
New Technology
Elementor was new to me when the project began.
Response
I transferred existing frontend and WordPress knowledge into the environment and learned Elementor while delivering production work.
Challenge
Changing Requirements
Content and page requirements continued evolving.
Response
I created reusable structures so content could change without redesigning the overall interface.
Challenge
Large Backlog
The project included more than 100 Jira tickets, including redundant or outdated items.
Response
Work shifted toward broader page and system priorities rather than isolated tickets.
Challenge
Team Transition
Team availability and responsibilities changed during development.
Response
I took increasing ownership while collaborating with stakeholders on content, approvals, and dependencies.
Growing Ownership
From Volunteer Contributor to Leading Page Development
My involvement expanded as the project progressed. After proposing the new visual direction and beginning implementation, I became increasingly responsible for major pages and reusable structures. As availability changed, I led page development while other contributors moved into advisory and supporting roles.
- Volunteer UI Engineer
- Design Contributor
- Primary Page Developer
- Leading Page Development
Outcomes
What the New System Enabled
- New visual direction selected by stakeholders
- Reusable architecture for nine program areas
- Responsive layouts across desktop, tablet, and mobile
- Consistent UI patterns across major website sections
- Elementor extended with frontend technologies where necessary
- Fragmented page experiences consolidated into a consistent system
- Architecture designed to evolve alongside JerseySTEM content
Reflection
What I Took Away
JerseySTEM pushed me beyond simply translating a design into code. The project required system-level thinking: reusable patterns, evolving requirements, development overhead, and the needs of people maintaining the website afterward.
It reinforced the connection between my UX foundation and UI Engineering work. Hierarchy, accessibility, and user behavior informed the design; frontend engineering turned those decisions into a working responsive experience.
Continue Exploring