Website and Platform Page Revamp for Elayne
The project involved expanding their existing brand identity to support the introduction of a new product platform. The refreshed color palette and design system were applied across all website pages, with the product platform page created in Figma and implemented on Webflow. This included detailed product mockups, enhanced mobile navigation, and improved user flow with custom JavaScript where needed.
Identity Expansion & Visual Transition
Palette expansion & Seamless Gradients
Elayne’s original color palette, centered around olive greens and soft yellows, was crafted to evoke warmth, stability, and trust—values that are core to the brand's mission of supporting families through estate planning and bereavement care. These tones create a reassuring and grounded atmosphere, reflecting the brand's commitment to emotional care and security.
As Elayne expanded to introduce its product platform, the palette was widened to include a range of water greens transitioning into soft blues. This transition reflects clarity, calm, and trust, aligning with the platform’s focus on automation, estate settlements, and grief management. The smooth gradient between these colors ensures that the palette remains cohesive and homogenous, while enhancing the sense of reliability and credibility, supporting both the emotional and practical aspects of the user experience.
Visualizing Elayne’s Core Features Through Mockups
Creating User-Friendly Visuals to Simplify Complex Processes
I worked alongside Elayne's amazing team on designing Figma mockups to showcase the platform’s key functionalities. These mockups were crafted to make the platform’s services—estate planning, bereavement care, and automated settlements—clear and approachable for users. By breaking down complex tasks visually, the mockups offer a user-friendly guide to the platform’s benefits, focusing on enhancing user engagement and ensuring ease of use.
Mobile-First Redesign: Tailoring for Optimal Navigation
Interactive Development in Webflow for Mobile Experience
For Elayne’s website, the Employers and Platform pages were redesigned specifically for mobile, tailoring the navigation to ensure a smooth and intuitive user experience on smaller screens. Instead of simply adapting the desktop design, these sections were optimized for mobile functionality and ease of use.
The mobile sections were implemented in Webflow, incorporating interactive elements like touch-based navigation, collapsible images, and information sections, creating a dynamic and responsive experience for mobile users.
Interactive Web Enhancements and Dynamic Animations for Elayne
Custom JavaScript and Webflow Solutions for a Seamless User Experience
On Elayne’s website, several enhancements were made to improve functionality and user experience through custom JavaScript and Webflow interactions. This included refining existing scripts and animations, or creating new ones as needed. Key improvements involved optimizing the calculator, creating smooth background animations, and implementing interactive bubble effects.
Mobile-specific designs were also developed to enhance navigation, ensuring a seamless experience across all devices, contributing to a more engaging and visually appealing site.
