Insurance Company Website React Build

I initiated this project to help the company eliminate our dependency on SquareSpace, reduce costs, and bring more control in-house using our existing AWS infrastructure.

Project Overview

After realizing we were not benefiting from SquareSpace’s features, I proposed a static site rebuild using AWS S3. This proactive move eliminated ongoing subscription costs and significantly aligned our public web presence with the company's internal tech stack.

As the lead on this initiative, I partnered with an architect to implement a robust CI/CD pipeline, enabling simple, efficient Git-based deployments. I also took on the task of rebuilding the contact form, integrating it with an internal API endpoint to ensure reliable and secure submissions. This comprehensive effort not only modernized our web infrastructure but also laid the groundwork for future in-house development, including the critical "Quick Pay" feature.

Challenges

The core challenge involved a dual migration: first, transferring existing marketing site content to a new static architecture without compromising brand credibility or accessibility standards. Second, integrating the "Quick Pay" feature required creating a highly simplified login and payment flow, demanding secure, real-time data synchronization with internal APIs within a session-based environment.

A key architectural and UX challenge was balancing the inherent performance benefits of a static site with the dynamic, API-powered functionalities of the "Quick Pay" system. This required careful planning to ensure both aspects operated efficiently and securely.

Process

My process for this project was comprehensive, starting with in-depth UX research and stakeholder engagement. I conducted interviews to thoroughly understand business requirements and user needs for both the marketing site and the Quick Pay feature. This informed the creation of detailed user flows, wireframes, and high-fidelity prototypes using Figma. I conducted informal user testing sessions with these prototypes to validate design assumptions and refine user journeys, particularly for the Quick Pay flow.

For development, I led the front-end implementation using React. I focused on building a modular and responsive interface, utilizing SCSS for custom styling and Bootstrap for a robust, mobile-first framework. The marketing site content was managed as static files, deployed efficiently via an AWS CI/CD pipeline that I helped implement. The Quick Pay feature involved integrating with internal APIs for secure data exchange, ensuring a seamless user experience.

Tech Decisions

I chose React for the front-end to create a highly interactive and component-driven user interface, essential for both the dynamic Quick Pay feature and the modularity of the static marketing site. SCSS provided advanced styling capabilities and better organization for the CSS, while Bootstrap accelerated responsive layout development.

For the static site hosting, AWS S3 was selected due to its cost-effectiveness, high availability, and seamless integration with existing company infrastructure. The implementation of an AWS CI/CD pipeline (e.g., AWS CodePipeline/CodeBuild) enabled automated, Git-based deployments, ensuring rapid and reliable content updates. The contact form and Quick Pay feature leveraged secure internal API endpoints, with session handling via local storage for maintaining secure login states across the Quick Pay flow.

Key Takeaways

This project profoundly demonstrated the strategic value of in-house digital ownership and optimized infrastructure. By migrating from a third-party platform to a custom AWS solution, we achieved significant cost savings and gained complete control over the site's performance, security, and future scalability.

It reinforced the critical importance of cross-functional collaboration, particularly in bridging design, front-end development, and back-end API integration. This initiative showcased my ability to lead complex technical projects from conceptualization through deployment, delivering tangible business value and an enhanced user experience.

Quick Details

Year 2025
Industry Insurance
Role Lead UX Engineer
Category Web Design & Development
Platform AWS - Static Website
Duration --

Technologies Used

Figma React Bootstrap SCSS

Color Palette

Each color was selected to support accessibility, visual hierarchy, and a clean, modern interface.

#51772A

#4d585a

#fad867

#f7f6f6

#FFFFFF

Insurance Company Website React Build

Design & Development Process

Research & Discovery

Understanding the problem space, user needs, and business requirements.

Design & Prototyping

Creating wireframes, visual designs, and interactive prototypes.

Development & Implementation

Building the solution with clean, maintainable code and attention to detail.

Testing & Refinement

Ensuring quality, accessibility, and optimal performance.

Project Details

Designed and developed the public-facing website for Oregon Mutual, an insurance company specializing in the commercial lines space. I led the frontend build using React, Bootstrap, and SCSS to create a modern, responsive experience with clean layout structure and accessible UI components. The site was fully custom-coded, giving the company a scalable and performant foundation for their online presence.

Gallery