Homepage Redesign
Modernizing Messaging:
Optimizing Design, User Flow, & Content Delivery for Future is Now Coalition (FiNC)
Project Overview:
As Senior Web Designer, I led strategy for and handled the full redesign of the homepage from an outdated design with bloated copy into a modern, interactive, user-friendly landing page.
Discovery & Research:
Conducted stakeholder interviews, performed competitive analysis of similar organization websites, and assessed existing user feedback.
Strategy & Definition:
Developed a content strategy focused on user experience, outlined key website requirements based on user needs and business goals, and mapped existing user flows to identify pain points.
Design & Development:
Designed and developed a new user flow and fully responsive WordPress landing page using Elementor, enhanced new brand identity, edited web copy, for SEO optimization and produced engaging visual and motion content.
Results & Takeaways:
The redesigned user flows and targeted content strategy led to increased engagement from a wider audience segment and supported organizational growth.
Homepage
Challenge: Improving user experience and web design flow while still outlining a massive mission.
I was told that one of the org’s major challenges, historically, had been to dole out its mission and messaging in easily digestible ways that don’t visually or mentally overload users. Another was engaging with more modern, tech-savvy users while not alienating less tech-savvy demographics.
Solution: Design and develop an interactive and highly user-friendly landing page with modern elements that optimize content delivery and keep users engaged longer.
Before
Full Page
(Continued)
After
Hover (desktop) or tap (mobile) each image to reveal explanation points for each section. Hover/tap each number to reveal explanations.
Full Page
Hero Video: Created in collaboration with AI
Top Bar: Transparency increasing on scroll.
Easy Access: Join & Donate buttons in the top bar
Compelling Messaging: Based on user and SEO research.
Interactive Elements: Section is Sticky to Top, with scrollable images, text, and color-changing background.
Motion Design: Coninuous-loop Lottie animations to provide visual intrigue.
Interactive Element: Scroll-triggered text reveal in a sticky-to-top container.
Optimized & Interactive Content Delivery: Flip-cards present concepts in a user-friendly, easy-to-understand layout.
(Continued)
Stacking Cards: Scroll-triggered stacking cards to enable higher quantities of more complex comtent to be delivered without overwhelming the user.
Interactive Timeline: Scroll-triggered timeline in a sticky-to-top section for high user delight.
(Continued)
Social Proof: Videos & appearances showing more conceptual content and adding to social credibility.
Actionable Content: Providing a free actionable resource and inviting to join the movement.
Support Options: Offering opportunity to donate in addition to the above invitation to join.
Strategy:
Design UI/UX and web flow that allows users to take in large amounts of complex information in an easily understandable and non-overwhelming way. Use modern, interactive elements to optimize content delivery and user experience.
Brand Continuity:
Adhered to established Brand Style Guide, incorporated previously unused brand assets, and solidified the org’s nonpartisan positioning through heavy use of gradient coloring.
Outcome:
Immediate improvement in click through rate, increased engagement and time on page, and reduced bounce rate.
Sections in Action
Above the Fold
Hero Video +
Gradient Text + Engagement Buttons
Intro
Scroll-triggered Text
The Problem
Motion Animations +
Hover Interactions
The Solution
Hover Animations & Scroll-Triggered Motion
Timeline
Interactive/Scroll-triggered
Closing
Social Proof, Actionable Content, & CTAs
Mobile Responsive
