MortarStone

MortarStone equips churches and nonprofits with actionable insights through giving analytics and coaching. They partnered with me to redesign their website and better communicate their evolving offerings. I led the transition from WordPress to Webflow, creating a clean, user-friendly site aligned with their mission.

My Role

Web Designer & Webflow Developer

Duration

April 2025 - July 2025

Technologies Used

Figma / Webflow

Goals

MortarStone's existing website no longer reflected their evolving brand. The visuals felt outdated, the messaging lacked clarity, and the overall experience didn’t match the momentum the company was experiencing. My goal was to redesign the site with a clean, modern look, refine the messaging to clearly communicate their value, and build a web presence that reflected where they are—and where they’re headed.

View Final Work

Styles

The visual direction was shaped by MortarStone's desire to present themselves trustworthy, professional, and optimistic about the future. Through moodboarding and mockups, we arrived at a clean, approachable aesthetic that aligns with their values and growth.

Planning & Layouts

To establish a clear structure, I began by presenting three wireframe options, each outlining the site’s key sections—from the hero and features to step-by-step “how it works” section. Each layout was designed to guide visitors through a clear narrative, introducing who MortarStone is, what they offer, and how they can help.

Content hierarchy was a priority: the hero captured attention with impactful headlines, imagery, and core messaging, while supporting details were placed further down the page to encourage exploration.

Color Palette

The color palette builds on MortarStone's established brand blue, used as the primary anchor throughout the site. I introduced lighter shades of this blue to create subtle background layers and maintain a clean, spacious feel. A bright neon green is used sparingly as an accent, adding small moments of energy and emphasis without overpowering the overall design.

PRIMARY

#3E91E0

BACKGROUND 1

#FFFFFF

BACKGROUND 2

#F0F7FD

BACKGROUND 3

#E6F4FF

#c7ff6d

#416491

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Heading

Visit MortarStone