Case study — character-driven UI
State First, Data Second
- 60/40 layout
- Progression tiers
- Feedback states
- Spend simulator
- Playtested ×5
Jose Alvarez · UI/UX Designer
I design interfaces
that show you
what state you're in.
Progression systems, character states and the design systems behind them. Two case studies below, both running on the same four-state framework.
Case study — progression & feedback
Fail State as Loop
- Streak recovery
- XP economy
- League ranking
- Widget family
- UI style guide
The framework behind both projects
Emotional State Architecture
- Trigger
- State Machine
- Feedback
- Progression
- Presentation
Case Studies
Two systems built on the same idea: a progression loop only works if the person using it can read, at any moment, what state they're in and what the system is asking of them. Characters, XP economies, streaks and fail states — designed as systems, not decorations.
The framework behind both
Emotional State Architecture
ESA is my own framework: a four-state machine where every state has a trigger, a psychological mechanism and an action it invites. It drives the characters, the reward tiers and the fail states in both case studies.
Trigger — day start, no activity
Pure potential. The day begins without pressure. An expectant posture: the character waits, it doesn't judge.
Anthropomorphism · Epley, Waytz & Cacioppo
How I build
Character systems, data made readable, and why presentation is part of the work.
See how I buildCharacter
Systems
State machines, behavior, feedback loops, progression.
Data
Made Readable
Information hierarchy, visual language, clarity over noise.
Presentation
as Action
The interface is the product doing the talking.