Monarch Money // Marketing Site Rebuild

Role: Web Developer & CMS Specialist (Contributing Team Member) Client: Monarch Money Project Duration: 3 weeks Project Type: Website Rebuild, CMS Migration Technologies: Sanity, React, TailwindCSS, Vercel, GROQ, Figma

Monarch Money, a personal finance management platform, sought a flexible and user-friendly content management solution to enhance their marketing site.

The project involved transitioning from Contentful to Sanity, giving the marketing team greater control over page layouts and content updates.

I contributed by developing modular page components that adhered to design specifications in Figma, ensuring a pixel-perfect experience on both desktop and mobile devices.

Empower Marketing Team: Enable Monarch Money’s marketing team to create new pages and customize layouts without developer assistance.

Improve Site Performance: Enhance load times and optimize media assets.

Pixel-Perfect Design: Build each component to match Figma designs exactly, ensuring a polished, professional appearance on all devices.

SEO Optimization: Set up Sanity with fields for metadata and Open Graph support to help improve SEO and social sharing capabilities.

Page Modules for Sanity Studio: Developed 15 modular page components within Sanity Studio, including sections like hero banners, testimonials, FAQ blocks, feature highlights, and calls-to-action. These components enabled the marketing team to create custom, branded page layouts by arranging pre-designed modules.

Reusable Components: Each page module was built to be reusable and customizable, empowering Monarch’s team to mix and match components for various campaigns and content needs.

Adherence to Figma Design Specs: Built all components according to detailed Figma designs, achieving pixel-perfect accuracy on both desktop and mobile. This attention to detail ensured that the visual quality of Monarch’s marketing site matched the high standards of their brand.

Collaborative Content Editing: Leveraged Sanity’s real-time collaboration to facilitate simultaneous editing, allowing team members to work on content updates without conflicts.

Performance and SEO Enhancements: Ensured that each module incorporated optimized images and structured metadata fields, supporting better page performance and SEO across devices.

Although I didn't lead the project, I played a significant role by focusing on the development of page modules. I worked closely with other team members to:

Design and Develop Modular Components: Created 15 unique, modular page components within Sanity Studio, offering Monarch’s marketing team flexibility in creating customized layouts without needing coding expertise.

Ensure Consistency and Usability: Built each component to be intuitive for non-technical team members to use, with clear documentation and instructions for arranging the modules within Sanity.

Ensured Pixel-Perfect Precision: Meticulously matched Figma design specs, ensuring each module displayed exactly as intended on both desktop and mobile devices.

Optimize for Performance: Integrated responsive design and image optimization for each module, improving load times and user experience across mobile and desktop.

Enhanced Editing Flexibility: The marketing team gained more control over page creation, using the 15 modular components to craft dynamic layouts without needing a developer.

Improved Site Speed: Modular design and image optimizations contributed to faster load times and better performance across devices.

Pixel-Perfect, Responsive Design: The new site displayed flawlessly across devices, maintaining a polished and professional appearance that met design standards.

Simplified Content Workflow: Real-time collaboration in Sanity improved the workflow for content updates, reducing bottlenecks and streamlining publishing.

This project gave me the opportunity to create flexible, user-friendly content modules that empowered Monarch Money’s marketing team to take charge of their content and layouts. The migration to Sanity, combined with reusable page modules, resulted in a more efficient content workflow and a better-performing site for Monarch’s audience.