Back to projects

Loading Screen

Onboarding loading experience redesigned to improve trust, reduce player confusion, and preserve low runtime overhead.

Loading Screen Preview

Context

This work supported a roleplay server where new players waited on a loading screen before entering gameplay. The existing experience looked unfinished, did not communicate what would happen next, and created unnecessary uncertainty during first-session onboarding.

I owned UX design and implementation in a two-hour sprint, with explicit constraints around runtime performance and compatibility in FiveM embedded browsers.

Problem

New players frequently interpreted the loading phase as a stall, which increased drop-off risk and repeated support questions. The product issue was trust and clarity during a critical first impression moment.

Users

  • First-time players joining the server for the first time.
  • Returning players checking if the server was responsive.
  • Community moderators handling repetitive setup questions.

Constraints

  • Two-hour delivery window.
  • No heavy frameworks or dependencies.
  • Must remain stable in low-end environments.
  • Fixed visual style constraints from existing server branding.

Hypothesis

If the loading screen provides clear status communication, intentional visual hierarchy, and lightweight interaction cues, new users will trust the onboarding process more and fewer users will ask setup-related questions.

Design Process

  1. Mapped the first-session loading journey and identified ambiguity points.
  2. Reduced visual noise and established one primary focus area.
  3. Added lightweight status and media control affordances.
  4. Tested layout readability at multiple desktop resolutions.
  5. Reviewed runtime behavior to keep animation and render overhead low.

Tradeoffs

  • Rejected richer animated effects because they increased GPU load.
  • Chose static structure with subtle motion to preserve clarity and performance.
  • Prioritized predictable behavior over customization controls in v1.

Solution

The final solution introduced a clearer content hierarchy, stable progress communication, and simplified control patterns while preserving the visual tone expected by the community. The implementation remained dependency-free and performance-conscious.

Validation

  • Monitored player and moderator feedback in the first week post-release.
  • Compared onboarding support question volume before and after rollout.
  • Verified behavior across multiple common desktop resolutions.

Outcome Metrics

  • +16% first-session completion after loading phase.
  • -24% setup-related onboarding questions in the first week.
  • Stable frame behavior observed on low-end client environments.

Lessons Learned

  • Perceived stability is a product feature during onboarding.
  • Small copy and hierarchy decisions can materially reduce support burden.
  • Future iteration should add localization and configurable messaging blocks.