Skeleton Screen Optimization

Solution Snapshot

Redesigned the loading experience for ACC Accreditation Services’ performance-tracking tools by introducing a system-aligned skeleton screen and partnering with engineering to resolve backend bottlenecks, dramatically improving both perceived and actual load time for healthcare users.

Impact Summary

Reduced perceived load times, improved actual performance through backend optimization, restored user trust, and delivered a scalable loading-state framework used across multiple service lines.

Role

Product Analyst

Organization

ACC Accreditation Services

Timeline

6 weeks (design) + engineering implementation cycle

Tools

Adobe XD

Background

ACC Accreditation Services provides digital performance-tracking tools used by hospitals and cardiovascular service lines to monitor clinical outcomes and manage accreditation workflows. These tools are accessed frequently by internal reviewers and external healthcare clients, making reliability and responsiveness critical.

However, many tools were taking 25–40 seconds to load, regardless of service line. With no loading indicator, users regularly assumed:

  • The system was frozen
  • The tool had crashed
  • A technical error had occurred

This disrupted workflow, generated unnecessary support tickets, and eroded trust among clinical users who rely on the tools for time-sensitive tasks.

Problem Statement

The platform needed a loading experience that:

  • Gave immediate visual feedback
  • Reassured users that progress was happening
  • Reduced confusion and perceived slowness
  • Complemented engineering’s backend optimization

The challenge required improving perceived performance through UI design while engineering addressed actual performance.

Goals & Success Criteria

Goals

  • Provide clear visual feedback during long load times
  • Reduce user confusion and perceived system failure
  • Support backend performance improvements with a complementary UI
  • Improve user satisfaction and trust for internal and external users

Success Criteria

  • Skeleton screen accurately matches tool layout
  • Fewer reports of “tool not loading”
  • Faster repeat load times due to caching
  • Improved usability feedback from hospitals

Research & Discovery

Baseline Load-Time Testing

I conducted structured testing across internal staff, external hospitals, multiple browsers, and different network conditions, consistently observing 25–40 second cold load times.

Conducted baseline load-time testing across internal and external users, including affected hospitals.

Skeleton screen load study
Baseline load-time study demonstrating that Accreditation tools routinely required 25–40 seconds to load, confirming user frustration and the absence of feedback during data retrieval.

Behavioral Observations

Users demonstrated predictable patterns during long loads:

  • Refreshing the page prematurely
  • Navigating away
  • Filing support tickets
  • Assuming system failure

Stakeholder Collaboration

Worked with product, engineering, and support teams to understand technical constraints and historical user pain points across service lines.

Key Insights

  1. Long load times without feedback feel like failure, not delay
  2. Skeleton screens reduce uncertainty and improve perceived speed
  3. Backend performance problems amplified UI issues
  4. Communication to hospitals was necessary to manage expectations

Solution Approach

Skeleton Screen Design

I created a skeleton loading UI that:

  • Mirrored the real tool layout
  • Presented immediate visual feedback
  • Provided predictable structure during load
  • Reduced cognitive friction during 25–40 second delays

Loading Behavior Documentation

Defined how the UI should behave during data retrieval:

  • Skeleton appears instantly
  • Skeleton persists during data-fetching
  • Transitions into real content without layout shift

Cross-Functional Collaboration

Partnered with engineering to align UX behavior with backend performance work:

  • Load-state triggers
  • Caching behavior
  • API response timing
  • Transition handling

User Communication Strategy

Worked with internal communications to set clear expectations:

  • Initial load would remain long
  • Repeat loads much faster due to caching
  • Skeleton screen introduced for better clarity

Backend Performance Fix (Engineering)

Engineering discovered the root issue:

Each tool executed redundant database queries on every load.

The fix included:

  • Implementing query memory
  • Applying caching
  • Reducing repeated queries
  • Improving retrieval efficiency

Final Design

Skeleton screen display
Final skeleton screen aligned with actual tool layout, providing immediate feedback during long load times.
Tool homepage after loading
Tool homepage after caching improvements and skeleton loading integration.

Results & Impact

Performance Outcomes

  • Significant reduction in repeat load times due to caching
  • Backend query optimization improved responsiveness

UX Outcomes

  • Skeleton screen removed user uncertainty during load
  • Reduced perceived wait time
  • Improved workflow continuity

Business Outcomes

  • Fewer support tickets
  • Restored client trust
  • Improved usability feedback from hospitals

Future Opportunities

  • Expand skeleton screens across all modules
  • Add micro-animations for clarity
  • Introduce role-based versions
  • A/B test alternative load indicators

Skills Demonstrated

  • UX + product strategy under technical constraints
  • Component-driven interface design
  • Performance testing and behavioral observation
  • Cross-functional collaboration
  • Systems thinking and UI clarity
  • Improving perceived and actual performance