MortarStone

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

My Role

Web Designer & Webflow Developer

Duration

April 2025 - July 2025

Project Type

Website Redesign

Goal

The existing website no longer reflected MortarStone's growth and evolving brand. The visuals felt dated, the messaging was unclear, and the overall experience didn’t capture the company’s momentum. My objective was to create a modern, cohesive web presence that communicates their value clearly and positions them for continued growth.

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

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

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

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.

DeMc Coaching
Up arrow