Profile / Stats / Information hierarchy

Player Profile & Stats UI

UI-01

A visual interface study for presenting player identity, progression, performance statistics, and supporting context in one portrait layout.

Focus: Composition, hierarchy, player-card UI
Format: Static design study
Status: Concept

The design at a glance

Identity first, details on demand.

The composition gives the player image and name the strongest visual weight, then moves through progression, performance stats, physical details, biography, and a play action.

This case study is a retrospective analysis of the supplied design. It does not claim formal usability testing or measured outcomes.

01 / Problem

Fit several kinds of information into one view.

A player profile can become hard to scan when identity, progress, statistics, biography, and actions compete for attention.

02 / Design intent

Create a recognizable player card.

Use a large character image and clear name treatment to establish identity, then place numerical information in predictable groups.

03 / Key decisions

Separate summary from detail.

XP appears near the top as a compact progression summary.
Performance stats form a consistent right-aligned list.
Biography and physical details share a lower information panel.
Back and play symbols sit away from descriptive content.

04 / Interaction & usability

Support fast scanning.

The layout distinguishes navigation, content, and action zones. A production version would need clear focus, pressed, loading, and disabled states, plus stronger labels for icon-only actions.

05 / Tools & skills

What this demonstrates

UI composition, player-card design, visual hierarchy, typography, image treatment, information grouping, and interaction affordances.

06 / What I’d improve next

Increase clarity and accessibility.

Use a more readable typeface for long biography text.
Increase text contrast in the stats column.
Clarify the play action with a label or contextual state.
Test spacing and type at smaller phone sizes.

Thinking beyond a single screen

I would extend this into states for loading, unavailable stats, comparison, video playback, and keyboard or controller navigation while preserving the same information hierarchy.