Vitable Health

GOALS

Primary Objective: Create a modern, interactive website that effectively communicates Vitable Health's innovative telemedicine and primary healthcare subscription services.

Specific Goals:

• Design an engaging interface that showcases telemedicine capabilities
• Emphasize the innovative nature of Vitable's health insurance solution
• Create interactive tools for employer cost calculations and service area visualization
• Establish a strong visual identity aligned with healthcare branding
• Build a scalable CMS-driven platform for easy content management

DELIVERABLES

Design Assets:

• Complete UI design for desktop and mobile versions
• Brand-aligned colour palette using pastel pinks and greens
• Typography system with clean serif fonts
• Mood board and "do/don't" design guidelines
• Custom doctor character integration with stock photography

Interactive Features:

• 3D rotating objects with smooth animations
• Interactive physics-based simulations (falling health problem "bricks")
• Dynamic US service area map with state-by-state availability
• Two custom calculators (employer savings & ACA penalty)
• Horizontal scrolling effects with dynamic background transitions

Technical Implementation:

• Fully responsive Webflow development
• CMS integration for blog, cases, reviews, team, and policies
• WebGL and Three.js 3D model integration
• Optimized loading performance (1-2 second page loads)
• Cross-browser compatibility

PROCESS

Phase 1: Design Direction & Planning

• Analyzed provided prototypes, brand book, and app screenshots
• Collaborated on stylistic direction using reference websites
• Created mood board for colours, fonts, shapes, and animations
• Established design guidelines with "do/don't" framework

Phase 2: UI Design Development

• Integrated doctor character renderings into real stock photography
• Applied medical-themed design elements and typography
• Designed interactive problem-to-solution transformation concepts
• Created comprehensive Figma design system for desktop and mobile

Phase 3: 3D Modelling & Animation

• Modelled and optimized 3D objects using Blender
• Developed physics-based interactive elements
• Created smooth rotation animations and horizontal scroll effects
• Designed dynamic background colour transitions

Phase 4: Webflow Development

• Built responsive page layouts and structure
• Programmed custom calculators with business logic
• Integrated dynamic US map with CMS connectivity
• Implemented WebGL technology for 3D model integration
• Optimized performance using Web Worker technology

Phase 5: CMS Integration & Testing

• Connected all content areas to Webflow CMS
• Implemented blog, case studies, and team management systems
• Conducted cross-device and browser testing
• Performance optimization and final quality assurance

OUTCOME

User Experience Achievements:

• Engaging interactive elements that communicate telemedicine innovation
• Intuitive problem-to-solution storytelling through dynamic animations
• User-friendly calculators providing immediate value to prospects
• Clear service area visualization with dynamic US map
• Seamless mobile experience across all devices

Technical Performance:

• 1-2 second page load times despite complex animations and 3D elements
• Smooth 3D object integration without performance impact
• Fully responsive design optimized for modern devices and browsers
• Scalable CMS system enabling easy content management
• Advanced WebGL implementation with Three.js library

Business Impact:

• Modern web presence that differentiates Vitable from traditional healthcare providers
• Interactive tools that demonstrate value proposition to employers
• Scalable platform supporting business growth and expansion
• Professional healthcare branding that builds trust and credibility
• Efficient content management system reducing operational overhead

Technology Stack:

• Design: Figma, Adobe After Effects
• 3D Modelling: Blender
• Development: Webflow, Custom CSS/HTML/JS
• 3D Integration: WebGL, Three.js library
• Performance: Web Worker technology