/* Brick case study — bespoke long-form layout, recreated from the live brick/page screenshot. No hero image; left-rail title + meta, then content sections, persona cards, requirements list, objectives grid, design decisions, design-system block, screens grid, stats, usability bar chart, key findings, outcome callout, before/after iteration, reflection. */ function BrickCase({ go }) { const next = PROJECTS[1]; // desertification const [peekIdx, setPeekIdx] = React.useState(null); const [peekPhase, setPeekPhase] = React.useState("closed"); const openPeek = (i) => { setPeekIdx(i); setPeekPhase("entering"); requestAnimationFrame(() => requestAnimationFrame(() => setPeekPhase("open"))); }; const closePeek = () => { setPeekPhase((p) => p === "closed" ? p : "exiting"); setTimeout(() => {setPeekIdx(null);setPeekPhase("closed");}, 260); }; const personas = [ ["Anna", "Anna", "25 · Berlin, Germany · Yoga teacher", "Easily frustrated, sensitive to feelings. Values authentic connection. Wants tools that don't shame her for slipping up."], ["James", "James", "15 · Enschede, NL · Student", "Kind, family-oriented. Spends time on football and games. Wants to focus for university applications but needs social motivation."]]; const requirements = [ ["REQ_01", "Customizable competition", "5/6 wanted leaderboards. 1/6 reported stress. Competition must be opt-in, not default."], ["REQ_02", "Stress-free motivation", "Users want progress without pressure. Gamified rewards yes; punishment no."], ["REQ_03", "Social with privacy control", "Friend visibility motivates, but users need granular control over what's shared."], ["REQ_04", "Clear visual feedback", "Weekly summaries and visual progress were universally requested across all 6 interviews."], ["REQ_05", "Gentle, not forceful", "Past tools failed because enforcement felt punitive. Soft nudges over hard blocks."]]; const objectives = [ "Evaluate the usability of Brick's core flows through structured think-aloud testing", "Identify points of confusion, friction, or failed task completion", "Surface user motivations and mental models around screen-time management", "Assess how well the gamification mechanics communicate their purpose"]; const decisions = [ ["01", "Forced compliance", "Self-determined autonomy", "Soft notifications + user-controlled blocking with friend daily-photo nudges (BeReal-style peer accountability).", "Self-determination theory shows autonomy is critical for sustained motivation. Forceful blocking damages long-term use — confirmed by all 6 participants."], ["02", "Mandatory leaderboards", "Opt-in competition", "Leaderboards and challenges are optional with an anonymous-mode toggle. Default view encourages but doesn't enforce comparison.", "5/6 users responded positively; 1/6 (Taiwanese, female) reported stress. Forcing competition would alienate stress-sensitive users."], ["03", "External rewards", "Identity-based rewards", "Dual-track: avatar cosmetics (identity expression) + real-world coupons (tangible benefit). Avatar growth visible in social spaces.", "Rewards don't erode intrinsic motivation when they're tied to identity or progress. Customization reinforces self-efficacy."], ["04", "Rich visuals", "Minimalist surface", "White-and-red minimalism with isometric 3D brick avatars as the only ornament. Stats prominent; chrome invisible.", "A visually noisy app that fights distraction would be self-contradictory. Minimalism reduces cognitive load — the irony is the point."]]; const screens = [ ["assets/brick/page_01.png", "01", "Splash", "First-run brand entry."], ["assets/brick/page_02.png", "02", "Onboarding", "Sign in — no commitments upfront."], ["assets/brick/page_03.png", "03", "Lobby", "Friends as bricks in a shared social space."], ["assets/brick/page_04.png", "04", "Profile", "Streak, rank, achievements — and the relocated App Block."], ["assets/brick/page_05.png", "05", "Shop", "Avatar cosmetics + real-world coupons."], ["assets/brick/page_06.png", "06", "Blocked state", "The cool-down moment — 'take a brick'."], ["assets/brick/page_07.png", "07", "Settings", "Notifications, themes, privacy."], ["assets/brick/page_08.png", "08", "App Block selection", "Choose categories of distracting apps to lock."]]; const categories = [ ["Suggested Improvement", 19.1], ["Visual Praise", 19.1], ["Easy Navigation", 14.9], ["Unclear Feature", 10.6], ["Navigation Issue", 9.2], ["Too Many Steps", 6.7], ["Unclear Labels", 5.7], ["Feature Negation", 4.3], ["Visual Clutter", 3.5]]; const findings = [ ["01", "Icon ambiguity", "The Achievement and App-Block icons looked like inverses of each other and were misread mid-task. The Settings cog blended into the all-red palette — P1: “Settings being the same color as everything else made it hard to find. Settings could be standard black to stand out.”"], ["02", "Orientation", "Multiple participants reached the right mental model only after several minutes of exploration. P1: “Without a tutorial, it would be quite difficult for people to understand.” Three of six explicitly asked for an introduction overlay."], ["03", "Visual weight", "Screen Time, Apps Blocked, and Streak — the three metrics that drive the entire reward loop — were too small to anchor the homepage hierarchy. P1: “The numbers under Screen Time, Apps Blocked, and Streak could be larger — they seem important.”"]]; return (
{/* HERO: title + meta on left rail, empty right */}
01 · UX Research & Design

Brick

A 10-week usability study and redesign of a gamified screen-time app — surfacing the hidden primary action and yielding 14 prioritised recommendations.

UX Research · UI Design · Usability Testing
{[ ["Role", "UX Researcher & Design Lead"], ["Contributions", "I led research design and moderation, and owned the qualitative coding, analysis, and recommendation synthesis."], ["Timeline", "10 weeks · 2025"], ["Team", "4"], ["Tools", "Figma · Axure RP"]]. map(([k, v]) =>
{k} {v}
)}
{/* METRICS STRIP — outcome-led counts (scramble on scroll) */}
{[ ["10", "Weeks, end-to-end"], ["6", "Participants from 6 countries"], ["141", "Coded research segments"], ["14", "Prioritised recommendations"]]. map(([n, d]) =>
{d}
)}
{/* SECTION NAV — dropdown jump */} {/* THE PROBLEM */}
The Problem

Young people know they're on their phones too much. But existing tools punish them for it — and they stop using them within a week.

Brick is a gamified screen-time management app built for users aged 13–25. Instead of restricting access, it uses rewards and streaks to make self-regulation feel worth it. The design hypothesis was promising. But did the interface actually support the behavior it was trying to build?

“I've tried screen-time apps before. The blocking is too easy to turn off. It defeats the whole point.”

— Participant 6, Finnish, 21

In pre-design interviews, all 6 participants reported having tried screen-time tools and abandoned them — often because enforcement felt either coercive or trivially defeated.

The design challenge: build something both effective and respectful of user autonomy.

{/* RESEARCH QUESTION — giant callout */}
Research Question

“How usable is the gamified screentime app for users aged 13–25, and what redesign changes would most improve their experience?”

{/* RESEARCH */}
Research

6 users. 6 countries. 5 requirements.

Method

Semi-structured interviews with 6 participants aged 21–24 from Taiwan, Mexico, Bulgaria, Korea, Malaysia, and Finland. Each session covered screen-time habits, past attempts to reduce use, and reactions to proposed features.

Why this composition

Cross-cultural recruitment surfaced design-relevant tensions that a single-market study would miss — most notably, the Taiwanese participant's stress response to competition, which became a load-bearing constraint for the gamification system.

User personas

Two extremes from the 6-person sample — chosen to bracket the design space. Anna anchors the stress-sensitive end; James anchors the externally-motivated end. The remaining 4 participants fell between them.

{personas.map(([initial, name, meta, body]) =>
{initial}
{meta}

{body}

)}

Five requirements drawn from the pre-design interviews

{requirements.map(([k, title, body]) =>
{k}

{title}

{body}

)}
{/* RESEARCH OBJECTIVES — removed; covered by Research Question + Method */} {/* PRE-DESIGN RATIONALE */}
Pre-design Rationale

4 trade-offs grounded in behavior-change theory.

The original design decisions baked into Brick's first build — each surfaced from the pre-design interviews, then stress-tested in the usability research that follows.

{decisions.map(([num, a, b, chosen, why]) =>

{num} {a} vs {b}

Chosen

{chosen}

Why

{why}

)}
{/* DESIGN SYSTEM — removed; not load-bearing for the research argument */} {/* PROTOTYPE — SCREENS GRID */}
Prototype

Eight screens — trade-offs and requirements made visible.

{screens.map(([src, num, name, body], i) =>
{e.currentTarget.setPointerCapture(e.pointerId);openPeek(i);}} onPointerUp={closePeek} onPointerCancel={closePeek} aria-label={`Hold to enlarge ${name}`}> {name}
{name} {body}
)}
Live Prototype

Try the interactive Axure prototype

Full flow: app blocking, social interactions, and leaderboard.

{/* USABILITY TESTING */}
Usability Testing

What 6 users told us — and what we missed.

{/* STATS STRIP — framing for the testing section */}
Participants
Tasks
Coded segments
κ = 0.89Inter-rater reliability

A think-aloud usability study with 6 participants completing 7 core tasks, followed by semi-structured interviews. Sessions were recorded, transcribed, segmented, and double-coded — inter-rater reliability reached Cohen's κ = 0.89, near-perfect agreement.

What users said, by category

{categories.map(([label, pct]) =>
{label}
{pct.toFixed(1)}%
)}

“It says ‘Leaderboard.’ I can't see exactly where the blocking page is. I'll look through these tabs… Hmm, I still can't find it.”

— Participant 1, attempting Task 1: Block 5 apps

Most participants struggled with the first task. The app-blocking button — central to the app's core value proposition — was buried inside Profile, behind a dismissable notification. The most important feature was the hardest to find.

{/* KEY FINDINGS */}
Key Findings
{findings.map(([num, h, p]) =>
{num}

{h}

{p}

)}
{/* OUTCOME — giant statement + theme breakdown */}
Outcome

14 prioritised redesign recommendations — Navigation, Hierarchy, Mechanics.

Navigation & discoverability 04 / 14

Elevate App Block to the homepage. Collapse the profile notification banner by default. Add a one-time spotlight tutorial. Differentiate the Achievement and App-Block icons.

Visual hierarchy 05 / 14

Enlarge headline stat numerals. Raise Settings-icon contrast. Broaden the palette beyond red/white. Strengthen the heart-favourite affordance. Surface coupon progress on Profile.

Behavioural mechanics 05 / 14

30-second cool-down before any unblock action. Contextual daily-photo reminders. Add a weekly-summary view. Optional anonymous leaderboard mode. Reorder onboarding to defer commitment.

{/* ITERATION — before / after */}
Iteration

Fixing the discoverability bug.

Before

App Block buried in Profile

Users had to tap Profile → dismiss a notification banner → scroll → tap App Block. Average task time was high, and 3 of 6 participants needed prompting.

After

App Block elevated to Homepage

App Block becomes a primary action on the dashboard. The dismissable notification collapses by default. The core value of the product is now one tap away.

Before

No friction on unblocking

One tap dismissed an active block. Participant 6: “The blocking is too easy to turn off. It defeats the whole point.” The feature existed; the deterrent didn’t.

After

A 30-second cool-down before unblock

Directly suggested by Participant 2: “You should add some features that you need to wait for a bit — if you can unblock easily, it’s not stopping me.” A visible countdown gates every unblock action: small enough not to feel punitive, large enough to interrupt impulse.

Before

First-time users dropped at Lobby

The isometric social space had no introduction. New users tapped around for a while before realising friends-as-bricks was the core social loop.

After

One-time tutorial overlay

A dismissable spotlight tour on first launch points at the App Block, the streak counter, and the friend lobby — then never reappears. No mandatory onboarding wall.

{/* REFLECTION */}
Reflection

What worked

  • Real-life setting (own devices) increased ecological validity.
  • Concurrent think-aloud + post-task interviews captured behavior and self-explanation.
  • Cross-cultural recruitment surfaced differences a homogeneous sample would miss.
  • Pre-defined codebook + inductive additions + κ added rigor uncommon in early-stage UX work.

What I'd change

  • Run an earlier pilot — the App Block discoverability issue should have been caught before main sessions.
  • Reorder tasks: low-stakes before high-stakes.
  • Write vivid scenarios ("imagine you just finished studying").
  • Looser moderator stance — gentle prompting would have unlocked more insight.

Limitations

  • Sample size (n = 6). Patterns are qualitative; quantifying them requires a follow-up survey (n ≥ 50) before claiming generality.
  • Age gap. The product targets 13–25, but participants were 21–24 — a convenience sample drawn from the university environment. The 13–17 cohort, the demographic with the lowest self-regulation, was not represented.
  • Single re-test cycle. The redesigned flows were not re-tested with new users within the 10-week window. Recommendations are evidence-based but not empirically re-validated.

If I had another sprint...

I’d run the highest-impact redesign — App Block on the homepage — through a focused A/B test with 8–10 new users from the 13–17 cohort, measuring task time-to-first-block as the primary metric.

The cool-down delay would follow as a behavioural-change study with a 2-week diary phase to measure actual unblock frequency, not just intent.

{/* TAKEAWAY */}
Takeaway

You can be right about what users want and still hide it from them.

Brick's premise — reward autonomy instead of enforcing restriction — held up in every interview. But testing exposed the gap between that hypothesis and the interface: the single most important feature, app-blocking, was the hardest one to find.

Discoverability isn't a finishing touch — it decides whether the core value of a product is ever experienced at all.

The redesign didn't change Brick's strategy. It changed whether anyone could reach it — and that distinction is where most of the design work actually lived.

{peekIdx !== null && }
); } Object.assign(window, { BrickCase });