Design Engineering at PocketHealth.com
Boosting sign-up conversions from 650K to 1.1M through mobile-first design, outcome-driven optimization, and patient-centered UX engineering.
View Live Platform
Project overview
- Lighthouse Score
- 55% → 92%
- Performance improvement
- Role
- Design Engineer
- Growth team at Series B
- Focus
- Mobile-First
- 61% mobile users
- Impact
- 69% Growth
- 650K → 1.1M conversions
- Patient-Centered Design
- Mobile-First Approach
- Outcome-Driven
Executive Summary
Key Metrics & Expected Outcomes:
- 650K → 1.1M sign-up conversions
- +17% monthly conversion rate improvement
- 55% → 92% SEO score improvement
- +30% Google Lighthouse performance
- 300+ pages with analytics tracking
- 100+ responsive landing page templates
Problem Statement
PocketHealth faced significant growth challenges with conversion optimization, technical performance, and data-driven decision making that were limiting their ability to scale user acquisition effectively.
Key Challenges
Conversion Bottlenecks
Sign-up conversion rates were plateauing at 650K with declining month-over-month growth
Technical Debt
Legacy landing pages with poor performance, slow load times, and SEO issues
Lack of Data-Driven Insights
Limited A/B testing infrastructure and analytics tracking across 300+ pages
User Personas & Pain Points
Patients (Primary Focus)
Individuals seeking easy access to their medical imaging and health records
Pain Points
- Complex mobile navigation
- Confusing sign-up process
- Poor mobile experience
- Lack of clear value proposition
Goals
- Simple mobile registration
- Easy record access
- Trust and security
- Mobile-friendly interface
Healthcare Providers
Medical practices and clinics wanting to onboard PocketHealth for their patients
Pain Points
- Complex onboarding process
- Integration challenges
- Staff training requirements
Goals
- Streamlined onboarding
- Easy patient enrollment
- Reliable platform integration
Technical Debt Impact
- • Slow page load times
- • Poor mobile experience
- • Unoptimized JavaScript
- • 500+ broken links
- • Poor metadata
- • 184 language issues
- • Limited tracking
- • No A/B testing
- • Poor data insights
Tech Stack & Tools
A comprehensive toolkit for growth engineering, combining analytics, testing, and design tools to enable data-driven optimization and rapid experimentation.
Analytics Tools
- Google Analytics: Conversion funnel analysis and user journey tracking
- Amplitude: Advanced user behavior analytics and cohort analysis
- Hotjar: Heatmaps, session recordings, and user feedback
- Google Tag Manager: Event tracking and analytics implementation
Testing Platforms
- Google Optimize: A/B testing, multivariate testing, and redirect tests
- Figma: Design prototyping and user testing
- Ahrefs: SEO testing and optimization
- Google Lighthouse: Performance testing and optimization
Design Tools
- Figma: End-to-end design process and collaboration
- Notion: Kanban project management and documentation
- Miro: Collaborative whiteboarding and user journey mapping
- Material Design: Google's design system for consistent UI patterns
Design Process
A systematic approach to design engineering combining patient-centered research, mobile-first optimization, and outcome-driven experimentation to improve healthcare accessibility and user experience.
Research & Insights
User research, analytics analysis, and competitive benchmarking
Key Activities
- Hotjar heatmap analysis of 300+ pages
- User interview sessions with healthcare professionals
- Conversion funnel analysis using Google Analytics
- Competitive analysis of healthcare platforms
Outcomes
- Identified 3 key conversion bottlenecks
- Mapped user journey pain points
- Established baseline metrics
A/B Testing Strategy
Systematic experimentation framework using Google Optimize
Key Activities
- Multivariate test design for landing pages
- Redirect tests for user flow optimization
- Statistical significance planning
- Test prioritization matrix creation
Outcomes
- 17% monthly conversion rate improvement
- 6-14% increase across test variants
- Data-driven decision framework
Iterative Design
Rapid prototyping and testing cycles in Figma
Key Activities
- Wireframe to high-fidelity prototype pipeline
- Mobile-first responsive design system
- Cross-functional feedback integration
- Design handoff optimization
Outcomes
- Reduced design iterations from 4-5 to 1-2
- Timeline reduction from weeks to days
- 100+ reusable component library
Implementation
Performance optimization and analytics integration
Key Activities
- JavaScript deferring for performance
- Google Tag Manager implementation
- Amplitude analytics setup
- SEO optimization using Ahrefs
Outcomes
- 30% Google Lighthouse score improvement
- 55% page speed increase
- 92% SEO score achievement
User Flows & Optimization
Systematic optimization of user journeys through data-driven design decisions, A/B testing, and mobile-first approaches to maximize conversion rates.
Landing Page Optimization
Patient-focused conversion optimization with mobile-first approach
Value Proposition
Clear patient-centered messaging and benefits
Key Improvements:
Simplified healthcare language
Trust indicators
Patient testimonials
Mobile Layout
Optimized for 61% mobile user base
Key Improvements:
Touch-friendly CTAs
Readable typography
Fast loading
Social Proof
Healthcare provider endorsements and patient reviews
Key Improvements:
Provider logos
Patient success stories
Security badges
Call-to-Action
Clear next steps for patient registration
Key Improvements:
Prominent CTA buttons
Progress indicators
Benefit reinforcement
Landing Page Templates
100+ responsive templates for high-traffic campaigns
Template System
Modular component-based landing page architecture
Key Improvements:
Reusable components
Dynamic content
A/B test variants
Content Strategy
Data-driven content optimization for different audiences
Key Improvements:
Persona-specific messaging
Dynamic CTAs
Localized content
Performance
Optimized for speed and SEO across all templates
Key Improvements:
Lazy loading
Critical CSS
Image optimization
Analytics
Comprehensive tracking for all template variations
Key Improvements:
Event tracking
Conversion funnels
Heatmap integration
Mobile Experience Design
Mobile-first design optimization for 61% mobile user base
Bottom Navigation
Experimented with bottom navigation for better mobile UX
Key Improvements:
Thumb-zone optimization
Quick access to key features
Reduced cognitive load
Touch Optimization
Optimized for mobile touch interactions
Key Improvements:
44px minimum touch targets
Gesture-friendly design
Haptic feedback
Performance
Fast loading for mobile networks and devices
Key Improvements:
Compressed assets
Lazy loading
Progressive enhancement
Mobile Testing
Comprehensive testing across mobile devices
Key Improvements:
Real device testing
Network simulation
Mobile accessibility
Before vs After Comparison
Sign-up Conversion
Before Optimization
- 7-field registration form
- No social proof elements
- Generic messaging
- Poor mobile experience
- No progress indicators
After Optimization
- 3-field simplified form
- Trust badges and testimonials
- Persona-specific messaging
- Mobile-first design
- Clear progress indicators
Page Performance
Before Optimization
- 5.2s average load time
- Large unoptimized images
- Blocking JavaScript
- No caching strategy
- Poor mobile performance
After Optimization
- 2.1s average load time
- WebP image format
- Deferred JavaScript loading
- Aggressive caching
- Mobile-optimized assets
SEO Performance
Before Optimization
- 500+ broken links
- 184 language issues
- Missing meta descriptions
- Poor internal linking
- No structured data
After Optimization
- All broken links fixed
- Multilingual optimization
- Complete meta data
- Strategic internal linking
- Rich snippets implemented
A/B Testing
Before Testing
- No systematic testing
- Assumption-based decisions
- Limited data collection
- No variant tracking
- Manual optimization
After Testing
- Continuous A/B testing
- Data-driven decisions
- Comprehensive analytics
- Automated variant tracking
- Systematic optimization
Flow Optimization Results
UX Laws & Heuristic Evaluation
Applied fundamental UX laws and conducted systematic heuristic evaluation to improve PocketHealth's usability and patient experience.
UX Laws Applied
Jakob's Law
Users spend most of their time on other sites, so they prefer your site to work the same way
Application
Implemented familiar healthcare portal patterns and standard navigation conventions
Miller's Law
The average person can only keep 7±2 items in their working memory
Application
Simplified navigation to 5 main sections and chunked information
Hick's Law
The time it takes to make a decision increases with the number of alternatives
Application
Streamlined patient onboarding with progressive disclosure
Fitts's Law
The time to acquire a target is a function of the distance to and size of the target
Application
Optimized mobile touch targets to 44px minimum
Heuristic Evaluation Results
Visibility of System Status
Before
No loading indicators
After
Clear loading states and progress indicators
Match Between System and Real World
Before
Technical medical jargon
After
Patient-friendly language
User Control and Freedom
Before
Limited navigation options
After
Clear breadcrumbs and escape routes
UX Principles & Outcome-Driven Design
Applied fundamental UX laws and outcome-driven design principles to create patient-centered experiences.
Fundamental UX Laws Applied
Jakob's Law
Users spend most of their time on other sites, so they prefer your site to work the same way as all the other sites they already know.
Application
Implemented familiar healthcare portal patterns and standard navigation conventions to reduce learning curve.
Miller's Law
The average person can only keep 7±2 items in their working memory at one time.
Application
Simplified navigation to 5 main sections and chunked information into digestible pieces to reduce cognitive load.
Hick's Law
The time it takes to make a decision increases with the number and complexity of choices.
Application
Streamlined patient onboarding with progressive disclosure and clear primary actions to speed decision-making.
Fitts's Law
The time to acquire a target is a function of the distance to and size of the target.
Application
Optimized mobile touch targets to 44px minimum and positioned CTAs in thumb-friendly zones for better usability.
Outcome-Driven Design Approach
My approach at PocketHealth aligned with outcome-driven design principles, focusing on measurable patient outcomes rather than just interface aesthetics.
- Patient sign-up conversion rates
- Mobile engagement metrics
- Task completion times
- User satisfaction scores
- A/B test results and statistical significance
- User behavior analytics and heatmaps
- Patient feedback and usability testing
- Business impact and ROI metrics
Results & Impact
Measurable outcomes from systematic growth engineering, demonstrating the impact of data-driven optimization and user-centered design on business metrics.
Key Achievements
Conversion Growth
Sign-up conversions increased by 69% through systematic optimization
Performance Optimization
Google Lighthouse score improvement through technical optimization
SEO Excellence
SEO health score improvement using Ahrefs optimization
Analytics Implementation
Pages with comprehensive analytics tracking and event monitoring
Project Timeline
Research & Analysis
Testing & Optimization
Scale & Results