Read this as
The 60-second version.
← all work
Case study · Research · UI/UX · Design system

Catch the burnout before the crash

EmberSense is a student burnout early-detection app for UPLB. I ran the research, mapped every finding to a feature, and built a prototype with two personalities — Gentle and Structured. Then real students tested it, and told me exactly what to fix.

Role
Lead UI/UX Designer
Timeline
Feb to May 2026
Team
Led a team of four
10 +
students interviewed
4
behavioral personas
15
features traced to findings
88
SUS after iteration
In one line

Burnout isn’t a switch, it’s a slide, so I built a tool that notices the slide before the student does, in whichever voice that student can actually hear.

Interviews revealed burnout as a progression students only recognize in hindsight. An affinity diagram sorted that into three arcs and four behavioral personas, some need a gentle nudge, some need hard structure. So EmberSense ships as one app with two personalities. Alpha testers loved the concept but flagged real friction: hidden scheduling, wordy insights, a confusing check-in, an inconsistent mode switch. Every screenshot pair below is a fix I made from a quote they gave me.

01

Nobody notices burnout while it's happening

I interviewed UPLB students about stress. The pattern was unanimous: they could describe burnout in perfect detail, but only in the past tense.

Every student I interviewed could describe burnout vividly, but almost none could tell me when it started. That gap is the whole problem. Burnout isn’t a bad day; it’s a slow erosion that the person experiencing it is the last to notice. Andrea described “two phases”, she keeps functioning normally until phase two arrives and the floor drops out. Dani’s crashes “come out of nowhere.” They don’t, the signals were there for weeks; nothing was watching for them.

The cruelest part is what I started calling the discipline mask. UPLB students keep performing while they burn internally. One participant put it flatly: “I don’t care about motivation. I just know I have to submit.” Grades hold steady. Deadlines get met. So every metric a school actually tracks says the student is fine, right up until they aren’t.

Why grades miss it · the hidden decline
Week 1CrashVisible performanceInternal capacity
The two lines diverge for weeks. Schools watch the green one; EmberSense is built to watch the mulberry one.

If the signal you can measure only appears after the damage is done, you’re not detecting burnout. You’re confirming it.

How it progresses · the three-component model
1 · Earliest signal
Emotional exhaustion

Andrea’s “two phases”, overwhelm when deadlines and org duties collide. r = .85 with burnout.

2 · As it deepens
Cynicism

“Cynical about studies”, emotionally numb, stops replying to messages.

3 · Late-stage
Reduced efficacy

Missed deadlines, but only in phase two. Discipline hides this until last.

The evidence · signal correlation with burnout
Emotional Exhaustion (MBI-SS)
.85
Sleep · Daytime Dysfunction
.65
Sleep · Subjective Quality
.61
Perceived Stress (PSS)
.60
Sleep Duration < 7h
.55
Social Jetlag ≥ 2h
.50
Coping Self-Efficacy Decline
.45
Academic Procrastination
.38
Strong ≥ .60Moderate ≥ .40Weaker

Emotional exhaustion and perceived stress lead, but sleep signals cluster right behind them, and sleep is passively measurable. That became the spine of the detection model.

Students could describe burnout in perfect detail. Just never while it was happening.
02

Three arcs, and four people who live them differently

Every interview note went on a wall. Clustered, they told one story in three acts.

I ran contextual inquiries and semi-structured interviews with 12 UPLB students, deliberately skewed toward the people most at risk: first-years still finding their footing, graduate students, working students, and student-athletes and performers. My teammates helped run interviews; I owned the synthesis from there.

I coded every transcript onto an affinity diagram, and the same shape kept surfacing from completely different lives: stress that recovers after a break is normal; stress that doesn’t is the tell. Bianca traced her better semester entirely to actually resting over Christmas. Others described breaks that changed nothing. That single distinction, recovery vs. non-recovery, became the backbone of the whole detection model.

Act 1 · The load
Stress is more than academics

Coursework + orgs + invisible study time stack. Org duty is a stress multiplier equal to academics.

Act 2 · The descent
The body speaks first

Skipped meals, palpitations, weekend over-sleep, then avoidance and numbness, subtle, easy to miss.

Act 3 · The recovery arc
Fixes that stop working

Doomscrolling, naps, sweets, temporary relief that desensitizes. They want insight, not another chore.

The gap wasn’t willpower. It was self-awareness and timing, students miss the tipping point until their coping fails. So the design problem became: surface the slide early, without adding load.

I refused to cluster by year level or program, that tells you nothing about how someone copes. I clustered by behavior: stress response, coping strategy, self-awareness, and openness to digital tools. Two students in the same course can need opposite things. These four archetypes are what the product actually has to serve, and, crucially, they don’t all want to be spoken to the same way.

Four personas · clustered by behavior, not demographics
D
Dani
High-functioning overloader

“I’d like to finish everything without feeling constantly burnt out.”

Pattern: pushes through until a physical crash.
Needs: early detection, energy-vs-load visibility.
Served by Structured
M
Marco
Overcommitted achiever

“I keep every promise to the org, it’s my own tasks that slip.”

Pattern: overwhelm → avoidance → last-minute cram.
Needs: prioritization, gentle start-nudges.
Served by Structured
L
Lia
Socially anchored multitasker

“Sometimes I just need to scroll a bit to clear my head before I deal with everything again.”

Pattern: doomscroll + vent when org & acad overlap.
Needs: warm nudges, no judgment.
Served by Gentle

Two personas want structure, two want gentleness. That split is the reason EmberSense has two modes, and why it opens gentle by default, in Nico’s world.

Nico’s fear, “I don’t want another app that makes me feel like I’m failing”, and Dani’s need for structure sit at opposite ends of one axis. A single tone would either overwhelm Nico or underwhelm Dani. That tension is what forced the central design decision later on.

03

I codified the two voices into a design system

With the two-voice split settled, I turned it into a small system others could build on, without averaging away the thing that made it feel human.

The whole system turns on one mode prop. Almost every component takes it and flips exactly two things, the accent colour and the corner language, so a screen can never quietly forget which voice it’s in. Amber carries warmth; blue carries data; coral flags risk; green marks recovery. Every suggestion the app surfaces is paired with one of fifteen small illustration motifs by a keyword matcher, so advice arrives as a picture, not another line of text.

Palette · a warm, candle-lit dark
#1A1612
canvas
#201C18
card
#272219
sheet
#2F2920
control
#3A3228
strongest
#F5A623
amber · Gentle
#F5C842
amber light
#5B9FD4
blue · Structured
#D9603A
coral · high risk
#6BAF72
green · recovery
#F0EAE0
text
AcademicOrgPersonalTask category dots
Type · two families, one warm serif and one quiet sans
DisplayAveria Serif Libre
Hey Nico,
how are you
holding up?
“Your ember is glowing.” — the warmth in every greeting.
Body & UIDM Sans
Aa Bb Cc
Micro-label · wide tracking

Regular for reading, medium for emphasis, semibold for headings. The sans stays quiet so the serif can carry the feeling.

RegularMediumSemibold
Illustration library · 15 insight motifs
Rest
Missed
Clash
Flux
Spike
Stacked
Baseline
Pause
Wind down
Protect
Spread
Lift
Small step
Reach out
Check in

Every suggestion the app surfaces is paired with a motif by a small keyword matcher, so “wind down before midnight” or “reach out to someone” arrives with a picture, not just another line of text. Amber carries warmth, blue carries data, coral flags risk.

04

A detection model with a sense of timing

Before designing screens, I mapped how signals should flow, and when in a semester they matter most.

System architecture · five layers
01Data collectionWeekly self-report · passive sensing · academic calendar
02Signal processingPersonal baseline · trend & anomaly · risk score
03Insight generationWeekly summary · trend alerts · actionable recs
04Tiered interventionLow → tips · Moderate → check-ins · High → referral
05Feedback & learning“Was this helpful?” · recalibrate thresholds per user
Temporal detection windows · the 16-week semester
W1–4
Early warning
Establish baseline
W5–8
Mid-term
Flag sustained stress
W9–12
Pre-break
Cumulative load peak
W13–14
Recovery check
Critical: flag non-recovery
After the break · the make-or-break tell
BreakTerm stressWeeks laterStress recoversBurnout keeps climbing

The tell isn’t a bad week, it’s a week that doesn’t recover after a break. That’s what separates normal stress from burnout, and it’s what the model watches for.

Every feature had to earn its place from a finding

No feature shipped on a hunch. Each one traces back to a quote and forward to a persona — and the app chooses its voice silently.

Where each feature lives · every one traces to a finding
Feature · finding it answersGentleStructured
Ember orbDaniA living risk signal you can’t intellectualize away, for masked, sudden crashes.
Mood MeterNico · LiaRecognition, not recall, tap a colour instead of naming a feeling from scratch.
Stress-style quizAll 4Three onboarding taps silently set tone & density, never shown or labelled.
Passive sensingDaniSleep, screen-time, calendar density feed risk without any data entry.
Risk: Low / Building / HighBianca“Building” is a trajectory, not a verdict, plus a plain-language why.
My Week plannerMarcoRedistributes load across heavy/light days; org tasks flagged, never auto-applied.
Nudge blocksNicoAuto-scheduled rest on your two lightest days, the app holds the boundary.
Observation cardsAndreaCross-variable patterns in plain language, insight, not a data dump.
No-penalty dismissalNico · LiaAny prompt dismisses with no streak break, no guilt message, anywhere.
Granular privacyPauPer-source opt-out with plain explanations; delete-all always one tap away.
PrimaryPresent, softenedHidden
The build, walked as a journey · from onboarding to insight
1
Onboarding & the silent fork3 quiet questions
2
Home & the emberEmber orb
3
The weekly check-inCheck-in
4
Right now & My WeekReset + plan
5
Insights & SettingsInsights + modes
The central bet · one app, two voices, chosen silently
3 quiet questionsduring onboardingGENTLEWarm copy · calming visuals · light on data · low pressureSTRUCTUREDDirect copy · charts first · data-driven · action-oriented

The personas didn’t just want different features, they wanted to be spoken to differently. So instead of averaging them into something safe and bland, I built one app with two voices, and had it choose silently, from three quiet questions during onboarding, never framed as a personality test. Either voice can be changed later in Settings.

The ember orb

The single ambient signal both modes share. Rather than show a burnout score, the app carries a glowing ember whose warmth and steadiness track your recovery state. It reframes an early-warning system as something you tend, not a grade you’re failing, which is exactly what the discipline-mask problem demanded.

Gentle
Gentle mode home
“Your ember is glowing.” Warm, reassuring, numbers kept quiet.
Structured
Structured mode home
“Take a breath, your ember needs tending.” Direct, charted, actionable.

Same risk state, same underlying data. Gentle reassures; Structured briefs. This is the bet alpha testing put to the test.

05

The prototype, live and in your hands

This is the real, current build — not a picture of it. Check in, add a task, open Insights. Then flip GentleStructured in Settings and watch the whole app change its voice.

EmberSense · the real interactive app
Play the live app
real app · loads on tap to keep the page light
Settings → App experience → Structured. Same data, different personality.
06

Then I put it in front of real students

Alpha testers loved the concept and the colours, and were refreshingly blunt about the friction. Every fix below started as something one of them said — toggle each screen.

The fixes
What a tester said

"There are badge pills on the homepage I don't understand what for, i.e. building, structure."

Before · alpha
Before · Home & risk pillBefore · Check-in colorsBefore · Words after colourBefore · Schedule visibilityBefore · Actionable insightsBefore · Less wordy (Gentle)Before · Add-task reachBefore · Mode & dark mode
After · revised
After · Home & risk pillAfter · Check-in colorsAfter · Words after colourAfter · Schedule visibilityAfter · Actionable insightsAfter · Less wordy (Gentle)After · Add-task reachAfter · Mode & dark mode
What I changed

Replaced the ambiguous “BUILDING” pill and dense paragraph with a single clear risk word, a one-line reason, and a greeting that names the user, the ember does the rest.

Before screens are the raw alpha build; after screens are the revised, device-framed version.

07

The score, and why they picked their side

On the standard System Usability Scale, the revised build landed in the “excellent” band. The favorable side wins every single row.

~87
Estimated SUS · Grade A (vs. 68 avg)
100%
Agreed it was easy to use
100%
Would learn it very quickly
0%
Felt they'd need technical help
Item by item · every statement lands on its favorable side
1
disagree
2
3
4
5
agree
+ I’d like to use this frequently
0%
8%
8%
33%
50%
Unnecessarily complex
58%
25%
8%
8%
0%
+ Easy to use
0%
0%
0%
25%
75%
Would need tech support
83%
17%
0%
0%
0%
+ Functions well integrated
0%
0%
17%
25%
58%
Too much inconsistency
50%
33%
17%
0%
0%
+ Most would learn it quickly
0%
0%
0%
33%
67%
Very cumbersome
67%
17%
17%
0%
0%
+ Felt very confident using it
0%
0%
8%
25%
67%
+ positive items (agreement is good) · negative items (disagreement is good). Deeper cells = more responses. The favorable side wins every row. SUS ≈ 87 (Grade A), estimated from the nine captured items.

“I flip-flop, but I have ADHD, structure works best for me. Straightforward and clearer about what’s happening.”

→ chose Structured

“It felt like talking to a friend. I have a lot of internal pressure, this didn’t add more just to look at my tasks.”

→ chose Gentle
Research points you at the right idea. Real users are the only thing that makes it usable.

What I'd carry forward

The dual-mode bet paid off, and the friction testers found was almost entirely about legibility and reach: surface the action, cut the words, make the interaction honest.

Testers self-sorted by temperament exactly as the personas predicted. If I continued, I’d validate the passive-sensing risk model against a full semester of real data, and pressure-test whether the tone can recalibrate itself without ever telling the user it’s doing so.

EmberSense · Human-Computer Interaction research & design · UPLB · Hervé Roldan

New message

Goes straight to my inbox — no list, no spam.