I worked closely with a cross-functional team of designers, developers, product managers, and content strategists to launch a completely redesigned version of the Navy Federal Credit Union website. The site supports more than eight million members, so every decision around structure, performance, and usability needed to scale.
My role focused on translating design systems and product requirements into clean, maintainable front-end code. Much of the work centered around building modular components that could be reused across the site, allowing teams to move quickly while keeping the experience consistent.
The project relied heavily on component-based architecture and Agile development practices. We worked in two-week sprints, collaborating across teams to refine features, review code, and continuously improve the experience as new functionality was introduced.
Technical Approach / Challenges
Because the site was built on a legacy stack of plain HTML, CSS, and JavaScript, (not a CMS!) the team needed a practical way to introduce modularity without adding heavy tooling. I worked with the team to design a lightweight component system that used HTML includes combined with page-aware JavaScript logic. This allowed us to maintain a single source of truth for shared UI components while still allowing individual pages to customize their content where needed.
This approach helped bring consistency and structure to a large codebase that otherwise relied on static templates. By centralizing components in a single directory and referencing them across pages, we were able to reduce duplication and make updates significantly easier to manage.
At the same time, the project was expected to eventually migrate to Adobe Experience Manager (AEM), so we were mindful of how the code would translate into a component-based CMS environment. Writing clean, semantic, and DRY code was a priority to ensure the system would remain maintainable and easier to migrate when that transition happened.
The project was developed using GitHub and Jira for collaboration and project management, with HTML, CSS, JavaScript, and Bootstrap forming the core of the front-end stack.
Tech Stack / Project Approach
- HTML, CSS, JavaScript (vanilla), jQuery, and some React
- GitHub for version control, pull requests, and code reviews
- Jira for task management and sprint planning
- Agile workflow with daily standups and two-week sprints
Key Results / Takeaways
- Achieved a 30% increase in user retention after launching the redesigned experience.
- Demonstrated that with the right approach, modular components can be built even without a CMS.
- Clean, DRY coding practices helped make the eventual migration to Adobe Experience Manager (AEM) much smoother.
- Clear communication with designers and fellow developers was key to identifying challenges early and shaping practical solutions.