UI/UX Case Study

LockedIn — Focus,
Together.

Transforming solitary productivity into a social, gamified experience built on accountability, streaks, and shared momentum.

RoleLead Product Designer
Timeline4-Week Sprint
PlatformMobile App
ToolsFigma · Maze · Notion
ONBOARDING
Pick your field
DesignEngineeringBusiness
Lock in now →
WAR ROOM
24:38
🧑🏾
Daniel W.
Active
LEADERBOARD
Weekly Rankings
🥇
🧑🏻
Olu_is here
500K ⚡
🥈
👩🏽
Kemi
400K ⚡
🥉
🧑🏿
Chidi
300K ⚡
07
😎
You
120K ⚡

Solitary focus is a broken experience.

Remote professionals and students are drowning in productivity tools that don't actually help them stay focused. Pomodoro timers sit ignored. Task lists grow stale. The core issue isn't method — it's that working alone removes social accountability that makes us show up.

LockedIn was designed from the ground up to solve this: transform focus from a solitary struggle into a shared, gamified experience where accountability, community, and rewards keep you locked in — session after session.

Role
Lead Product Designer
Timeline
4-Week Sprint
Team
6 — PM, 2 Devs, Backend, Data
Platform
Mobile + Web (Landing Page)
Tools
Figma · Notion · Maze · Jira

Why productivity tools keep failing people.

25 interviews with remote workers and students surfaced a consistent pattern — tools exist, but drive to use them doesn't.

92%
reported procrastination despite having productivity tools
78%
felt isolated in their work, missing office accountability
65%
tried Pomodoro but abandoned it due to lack of engagement
😶‍🌫️

Isolation Kills Momentum

Working alone removes social pressure that keeps people showing up. No one to notice when you stop.

🎮

No Feedback Loop

Existing tools don't reward effort. Completing a session feels same as abandoning it — nothing changes.

😔

Productivity Guilt

Users beat themselves up when they fail to focus, creating a shame spiral that makes them avoid tools entirely.

🧩

One-Size-Fits-All

Generic sessions ignore context. A student cramming for exams needs a different environment than a developer in deep work.

"How might we transform solitary productivity into a social, engaging experience that leverages accountability and gamification to sustain focus?"
Design tone:
75% serious / 25% playful

Four weeks. Zero shortcuts.

A tight sprint with clear phase gates — each week building on the last, pressure-testing assumptions with real users before advancing.

Phase 01
Week 1

Discovery & Definition

25 user interviews, competitive analysis of 12 apps, journey mapping for 3 personas, and a full-day design sprint with stakeholders.

Phase 02
Week 2

Ideation & Prototyping

50+ sketched concepts, low-fidelity wireframes across core flows, and a first-round usability test. The "War Room" metaphor emerged here.

Phase 03
Week 3

Visual Design & Testing

Full design system, mascot creation (Locke & Keyra), high-fidelity screens, and A/B testing gamification elements with 15 users.

Phase 04
Week 4

Handoff & Iteration

Component documentation, developer handoff with interactive specs, design QA, and post-launch analytics setup.

Every screen is a behavioural decision.

Each flow was designed with a specific psychological principle in mind — not just aesthetics, but how interface shapes user behaviour.

What's your
work field?
We'll match you with right accountability partners.
DesignEngineeringBusinessStudentsCreativesFinance
Continue →
01 — Onboarding

Industry-First Personalisation

Capturing industry upfront enables smarter partner matching from very first session. Progressive disclosure keeps flow lightweight.

Welcome back 👋
Olu_is here
+ Create Session
🔒 Join
Product Sprint ⚡️
Creatives10 mins · 1hr · 20 lockers
Deep Work Block 🧠
Engineering25 mins · 2hr · 8 lockers
02 — Home Page

Social Proof at a Glance

Live session counts and active locker numbers create real-time FOMO. The primary CTA is always one tap away — no friction to starting.

Focus Session · Product Sprint
24:38
🧑🏾
Daniel
👩🏽
Kemi
🧑🏿
Chidi
Go on Break
03 — The War Room

Presence Without Pressure

Partner presence indicators are subtle but reassuring — you know you're not alone without being distracted. The timer dominates. Everything else supports.

LeaderboardWEEKLY
Daily
Weekly
All-time
🥇
🧑🏻
Olu_is here
500K ⚡
🥈
👩🏽
Kemi
400K ⚡
🥉
🧑🏿
Chidi
300K ⚡
07
😎
You
120K ⚡
04 — Leaderboard

Competition Meets Context

Daily, weekly, and all-time tabs let users find their competitive frame. Your own rank is always visible — goal gradient effect keeps users pushing.

Sessions
SOLO
PARTNER
GROUP
DURATION
25 min45 min1 hr
Start Session 🔒
05 — Sessions

Smart Defaults, Zero Friction

25 minutes is pre-selected. Users can go deeper if they want, but default gets them started in seconds. Smart defaults reduce decision fatigue.

Explore
Design Sprint 🎨
142 active
Join
Dev Focus 💻
98 active
Join
06 — Explore

Community at Scale

Live session discovery with industry filters lets users find their tribe. Real-time counts make community feel alive and worth joining.

Psychology, not gimmicks.

Every gamification decision maps to a specific psychological principle. The goal was motivation that sustains — not cheap dopamine hits that burn out.

01

Variable Rewards

Unpredictable badge unlocks keep users returning. Knowing a reward might come is more motivating than knowing it will.

02

Loss Aversion

Streak protection mechanics make users feel what they'd lose — not just what they'd gain. Losing a 7-day streak hurts more than gaining it felt good.

03

Social Proof

Live session counts and real-time leaderboards make community visible. Seeing 1,000 active lockers creates pull — not push.

04

Endowed Progress

Progress bars that start partially filled make users feel closer to the goal. They're more likely to complete what feels already begun.

05

Goal Gradient

Points toward visible milestones accelerate effort as users approach them. The closer to reward, the harder people push.

06

Focus Mode Toggle

Too many notifications undermined focus. A clean Focus Mode that hides gamification during sessions was the key fix from testing.

Built to scale.

An atomic design system spanning tokens, components, organisms, and templates — ensuring consistency across all 9 pages of the app.

Color Palette

Primary Blue
#2E5BFF — Trust & Professionalism
Electric Green
#00E676 — Gamification Highlights
Deep Black
#0E0E0E — Focus Backgrounds
Off White
#F7F7F5 — Light Surfaces
Muted Text
#696363 — Body Copy

Typography System

Space Grotesk
Headlines — Tech-forward, Serious
Manrope — approachable, highly readable for body copy across all screen sizes.
Body — Approachable, Readable
IBM Plex Mono — 24:38
Timer/Stats — Precision & Urgency
Design Token Example
--color-primary: #2E5BFF; --color-success: #00E676; --spacing-unit: 4px; --border-radius-sm: 4px;
🦊

Locke & Keyra — The Mascot System

Two characters were designed to embody the product's dual nature. Locke (human guide) represents the 75% — expertise, structure, guidance. Keyra (fox companion) represents the 25% — energy, celebration, delight. Together they appear at key emotional moments: onboarding, session completion, streak milestones — creating genuine connection without undermining focus.

Four rounds. Real findings.

Testing wasn't a checkbox — it was a continuous feedback loop. Each round surfaced specific issues that drove concrete design changes.

Critical Issue 01
Partner matching was invisible

40% of users couldn't find partner matching option during session setup. It was buried as a secondary control. Fix: Elevated "Find Partner" to a co-primary button alongside "Start Solo" — equal visual weight, clear choice architecture.

Critical Issue 02
Gamification was undermining focus

Early prototypes fired too many point notifications during sessions. Users reported feeling distracted by the very system designed to motivate them. Fix: Introduced "Focus Mode" — gamification elements collapse during active sessions and resurface at completion.

Critical Issue 03
Break end notifications were easy to miss

Users lost track of when breaks ended and couldn't re-enter their flow state cleanly. Fix: Progressive audio cue + visual countdown leading into break end, replacing single-moment notification.

Testing Rounds
Paper → Prototype → HiFi → A/B

Round 1 (n=8) validated concepts on paper. Round 2 (n=12) tested interactive flows. Round 3 (n=10) evaluated high-fidelity designs. Round 4 (n=50) ran A/B tests specifically on gamification elements to find the right balance.

Numbers that validate design.

Post-testing metrics showed that gamification system worked — when restrained. Engagement numbers exceeded industry benchmarks across the board.

8.2
sessions/week per user vs. 5 target
91%
session completion rate (industry avg: 65%)
42%
week-4 retention — exceptional for productivity apps
73%
tried partner sessions within first week
82
SUS score (System Usability Scale)
+45
Net Promoter Score from usability testing
5K+
waitlist signups before public launch
37%
increase in session completion intent from gamification
"

Locke and Keyra make me feel like I have a study buddy even when working alone.

University student, 24
"

The industry matching is genius. Working with other developers keeps me accountable.

Software engineer, 29
"

Finally, a productivity app that doesn't make me feel guilty when I struggle.

Marketing consultant, 32

What this project taught me.

Key Learning

Accountability is emotional, not functional. The moment I stopped designing for task completion and started designing for how it feels to be seen and supported — the whole product sharpened. Gamification requires restraint. Too much undermines the very productivity you're trying to unlock.

What Worked

Parallel prototyping accelerated decision-making dramatically. The 75/25 design ratio gave the whole team a shared language. And the mascot system turned out to be the most-remembered design element in user testing — proof that emotional design isn't decoration.

What Was Hard

Keeping MVP scope tight while exciting ideas kept surfacing. Working within technical constraints. And getting the team aligned on a single vision when everyone had strong product opinions — that's where design sprint paid off.

Future Vision

AI-powered focus coaching based on session history. Enterprise team management for remote companies. Integration with tools like Notion and Linear. And a deeper wellness layer — focus and wellbeing as one unified system.

"The most effective productivity tools don't just manage tasks — they understand people."
LockedIn Design Philosophy
← All ProjectsNext Case Study: Onamini →

Let's Create Something Great Together!

Have a project in mind or just want to say hello? Reach out and let's bring your ideas to life.

Get In Touch ↗LinkedIn Profile ↗