UX/UI Case · Nuclio Bootcamp · 2025

Five taps a day.
The rest is on Fika.

Fika is an iOS app for remote workers. You start the day with a tap, declare how you're feeling, and the system reminds you of breaks, focus modes, and shutdown — so you don't have to think about it between taps.

Exploratory concept. Some behaviors (the modal with time remaining in Focus mode, hours-tracked without real activity detection) require API extensions or sensors that are outside the MVP scope. I flag this where it matters.
9:41●●● 88%
Day in progress
Marco
M
⏸ Break in 42 min 🕕 Shutdown 6:00pm
Energy
High
4.5h / 9h
Ring · day completed · 50%
Focus mode
End day
4.5h
Tracked
1/3
Breaks
09:02
Started
Today
History
Profile
My role
UX/UI · End-to-end
Research · IA · UI · prototype · DS
Research
46 survey + 6 interviews
Exploratory survey · non-probabilistic
Design
14 screens + states
Light / dark / empty · 3 notif
System
Tokens · Energy Ring
Color · type · spacing · A11y
Model
B2B2C · Freemium
iOS 17 · Nuclio Bootcamp
Snapshot

The problem and the answer,
on one screen.

Working from home erases the natural limits of the day. Fika replaces those signals without asking you to be disciplined.

The problem

Home office
erased the day's signals.

No coffee with coworkers, no meeting that marks the end, no commute that closes the day — remote workers accumulate fatigue without noticing and never really disconnect.

  • Same physical space · the schedule dissolves
  • Office's natural breaks disappear
  • Digital presenteeism replaces physical presenteeism
The answer

It doesn't add more work.
It takes the pressure off
organizing alone.

Fika runs quietly through the day with passive signals — timely breaks, intentional focus, clear shutdown. The user declares how they start, the system holds the rhythm.

  • One tap starts the day · one ends it
  • Suggested breaks every 90 min · no user action
  • No-judgment summary · neutral data, not a ranking
02 · Research

It wasn't lack of discipline.
It was lack of signals.

46 survey responses + 6 interviews with remote workers. The strongest finding was a phrase different profiles repeated almost word for word.

Key finding
83%

Can't separate work from personal life. The office gave external boundaries that no longer exist.

User quote

"I finish the day without really knowing if I worked a lot or a little. I just know I'm tired."

Marco · 27 · consultant · interview 03
Emotional pain
45%

Doubts whether their company trusts their performance. That anxiety drives digital presenteeism — working more to compensate for lost visibility.

Social context
61%

Feel real isolation. The informal office breaks used to regulate the rhythm of the day — they're gone now.

Observed behavior
7/10

Don't take formal breaks even though they know they'd help. Knowing isn't enough — they need something to remind them.

Methods · declared scope
n=46Exploratory survey · LinkedIn + IG · non-probabilistic
n=6In-depth interviews · 30-45 min
6 appsCompetitive analysis + Nielsen heuristics
Research synthesis

The problem wasn't lack of discipline.
It was lack of signals.

What this changed I stopped designing "a productivity tool" and started designing "a replacement for the signals the office used to give for free."
03 · Persona

I designed for Marco.
The company benefits later.

A single primary persona — composite of the 6 interviews — to keep focus on the user, not the buyer.

Context
  • Works from home 4 days a week
  • Jumps from one meeting to the next with no transition
  • Lives and works in the same physical space
  • iPhone + MacBook · Apple ecosystem
Needs
  • Structure without feeling controlled
  • Breaks that don't depend on remembering to take them
  • To end the day with a real sense of closure
  • Data without judgment · just information
Frustrates him
  • Productivity apps that demand setup before anything
  • Gamification that rewards working more
  • Notifications at the worst possible moment
  • Apps that pretend to know things they can't
Triggers decision
  • D1 · Declarative energy with manual correction
  • D2 · Breaks by timer, not by detection
  • D3 · Intentional friction instead of blocking
  • D4 · Company only sees aggregate data

A typical Tuesday for Marco

How Marco's energy shifts through the day — and where Fika steps in without asking. The bar shows perceived energy, reconstructed from interviews.

Low Medium High
Time
Stage
What happens
Thought
Energy
9:00am
Start
Opens the laptop with no transition. Goes straight to email.
"Where was I yesterday?"
Medium
11:30am
Focus block
He's been at his desk 2.5h without standing up. Hasn't noticed the time.
"I'm in flow, I don't want to break it."
High
2:00pm
Afternoon
After lunch, opens Slack and gets distracted. Energy drops.
"I'm not delivering, I should keep going."
Medium
6:30pm
No shutdown
Keeps replying to messages until 7:30pm. The day dissolves without ever really ending.
"When did I finish today?"
Low
With Fika
Structure
Starts with a tap. After 90 min the break suggestion arrives. Shutdown at 6:00pm with a no-judgment summary.
"I closed the day. Tomorrow I start over."
Sustained
04 · Decisions

Four decisions,
four real trade-offs.

Each decision resolves a tension between what Marco needs, what the platform allows, and what the research validated. Each one has a declared cost.

1Decision D1 · Energy

Declarative, correctable energy — not inferred from sensors

Marco declares his energy at start (High / Medium / Low). The system just keeps it visible and lets him correct it anytime. No sensors, no AI, no biometrics.

Trade-off: the system doesn't actually know how Marco feels. But any attempt to "know" would require wearables or biometrics the app doesn't have. Acknowledging the limitation is more useful than simulating precision.
2Decision D2 · Breaks

Breaks by simple timer — not by inactivity detection

After 90 min of active day (timer from "start the day"), Fika suggests a break. It doesn't detect if Marco stood up, went to the bathroom, or scrolled Twitter — it just knows 90 min passed on the clock.

Trade-off: if Marco already rested, the suggestion still arrives. Acceptable because (a) he can dismiss it with a swipe, (b) suggesting an unnecessary break costs less than not suggesting a needed one.
3Decision D3 · Focus

Intentional friction, not app blocking

Focus mode activates Apple Focus + silences notifications, but does NOT block apps. If Marco wants out, he sees a modal with the time remaining in the block to decide consciously. The intention is to interrupt autopilot, not to take away control.

Trade-off: blocking apps isn't viable on iOS without MDM, and hard blocking goes against the product's DNA. This decision is product + platform — a technical constraint that became a deliberate design choice.
4Decision D4 · B2B2C

Company sees aggregated data, never individual

If the company sees individual data (breaks, energy, hours), the wellness app becomes a control tool. The company only sees aggregate metrics with at least 5 users — no names, no individual profiles.

Trade-off: makes the B2B upsell harder (managers who want to see "their people"). In exchange, Marco's trust is earned — without which the product doesn't work. A product decision, not just a moral stance.
05 · How it works

Four mechanisms.
One single idea: minimal friction.

Energy Ring, breaks, intentional focus, and daily summary. Each one answers a pain point from the research and declares its own technical limit.

⚡ Core component · Energy Ring

Your energy,
declared and editable.

Marco declares how he starts the day — High, Medium, or Low. The system reflects it all day and lets him correct anytime. No sensors, no biometrics.

1Three states with semantic color — green, orange, gray
2The ring is the first visual element of home — speaks without words
3Long press to correct anytime during the day
High
High energy
Deep work, complex decisions, hard meetings.
Medium
Medium energy
Operational tasks, emails, follow-ups, admin.
Low
Low energy
Breaks day, light tasks, recovery.
⏸ Break system · ActivityKit + Push

Breaks come
to you.

Every 90 minutes of active day, Fika suggests a break on the Lock Screen. The notification is actionable: "Done, I paused" or "Later". No opening the app, no extra tap.

1Lock Screen notification with inline action
2Soft sound + gentle haptic — non-interruptive
3If Marco ignores it 3 times, Fika lowers the volume — doesn't insist
9:41●●● 88%
11:30
Tuesday, January 14
f
Fika now
Time for a break ⏸
90 min in. Take 5 — I'll still be here when you come back.
f
Fika 5:30pm
Your shutdown is close
30 min until the shutdown you set. Start wrapping up.
f
Fika 6:02pm
Day closed · 9h 00min
Sustained energy today. Tomorrow is another day.
🧠 Focus mode · intentional friction

Focus that doesn't
lock you in.

Focus mode activates Apple Focus + silences notifs for 25 min. Does NOT block apps. If Marco tries to leave, he sees a modal with time remaining to decide consciously — it interrupts autopilot without removing control.

1Activates iOS Focus Filter — silences messages and notifications
2Dark background as a visual cue: "you're in another mode"
3Discreet "Interrupt" button — it exists but doesn't invite exit
FOCUS MODE
Working on
Q1 Monthly Report
14:32
time remaining
Block 25 min
Started 10:32
Interrupt focus
📈 Daily summary · no judgment

Data without ranking,
without gamification.

When the day closes, Fika shows active hours, breaks, average energy. No streaks, no "good vs bad days", no notifs saying "your performance is dropping". One actionable recommendation based on simple patterns.

1Neutral data: hours, breaks, declared energy
2Recommendation from a simple rule, not AI
3Friendly tone: "Tomorrow is another day" — no penalty for dips
9:41●●● 88%
▼ Daily summary
Good Tuesday, Marco.
8h 12mActive
3 / 3Breaks
HighAvg. energy
Today at a glance
0911131517
💡
Observed pattern After 3pm your energy tends to dip. Reserve that slot for lighter tasks if you can.
"Tomorrow is another day."
06 · Special states

What happens when
something falls outside the ideal flow.

Empty state as motivation, dark mode following the system, edge cases with predictable responses. The "weird" states are where a product stops inspiring trust if they aren't designed.

9:41●●●
📊
No data yet
Complete 3 days to see your first weekly summary.
T
W
Day 1 of 3
▼ 01 · Progressive empty
No data isn't "broken"

Day 1 of 3 visualizes progress toward the first summary. Turns a gap into motivation, without penalizing.

9:41●●●
Day in progress
Marco
M
High
energy
4.5h
Tracked
1/3
Breaks
▼ 02 · Dark mode
Follows the system

Fika respects the iOS setting. Green and orange shift slightly to maintain WCAG AA on dark backgrounds.

9:41●●●
!
Notifications off
Without permission, breaks and shutdown don't reach the Lock Screen. You can keep using the app, but you lose what's most useful.
Enable
Persistent banner · top of Today
▼ 03 · Edge case
No permissions isn't "broken"

If Marco denies notifications, Fika still works. A persistent banner explains the cost without nagging on every open.

9:41●●●
Ready when you are
You haven't started the day in 3 days. If you need a break, that's okay.
Start the day
Suggested start · 9:00am
▼ 04 · Edge case
Three days without starting

If Marco doesn't open the app for days, Fika doesn't insist or count a broken streak. The message changes: "if you need a break, that's okay."

Try the prototype

The full day, interactive.
Start it, live it, end it.

Declare your energy, watch the break countdown, enter focus mode, and see your daily summary with real session data. Every decision from the case study is demonstrable here.

07 · How I got there

From interview to pixel.
Four stages, one decision per stage.

I didn't jump from research to the pretty screen. Every stage produced decisions that survived to the final version.

Project log

Eight weeks, one key decision per stage.
8 weeks · bootcamp project
Wk 1-2 Research Output · 52 quotes in 4 clusters
Survey + interviews + affinity mapping
46 survey responses + 6 in-depth interviews. I coded 52 quotes and grouped them in 4 pain clusters. One was repeated in 5 of 6 interviews with almost identical words.
Key decision: the problem wasn't lack of discipline, it was lack of signals. That reframed the whole product — it stopped being "a productivity tool" and became "a replacement for the signals the office gave for free".
n=46 survey n=6 interviews 52 quotes 4 clusters
Wk 3 Exploration Output · 8 sketches + 1 winner
Sketches on paper before touching Figma
I tried 8 home layouts on paper: traditional dashboard, habit list, schedule, central ring, agenda + side focus, etc. I dropped them against two questions: does it make sense in 2 seconds? does it ask Marco for nothing to be useful?
Key decision: central Energy Ring. The first thing the eye looks for on open, without requiring a tap. Communicates state by color, no need to read.
8 layouts tested 2 finalists 1 winner
Wk 4-5 Lo-fi + testing Output · 14 frames + 3 adjustments
Wireframes in Figma + 3 moderated sessions
Brought the sketches into Figma with grids and system typography. Tested with 3 remote workers (not participants in the prior research). Each ran 4 tasks thinking aloud. The focus mode screen produced the most interesting friction: "I didn't really get what it does."
Validated adjustment: focus mode needs to explain what it does before activating — it isn't obvious. I added a tooltip + visible time remaining. The question came up 0 times in the next round.
14 wireframes 3 sessions 3 adjustments applied
Wk 6-8 UI + system Output · 14 frames + DS + states
Final UI with tokens, dark mode, and special states
Applied the defined design system (palette, Manrope typography, 4px scale). Added dark mode following the system, progressive empty states, edge cases for denied permissions and "three days without starting". Each state came from one question: "what happens if this doesn't happen?".
Final output: 14 screens + 4 special states + notification mockups + a base Design System of 7 core components.
14 frames 4 states 3 notifs 7 components
08 · System

Design system + accessibility,
together.

Tokens, scale, components, and A11y as one piece. The system isn't decoration — it's what keeps screens looking like each other six months from now.

Tokens · color

Semantic palette · blue + states

Brand blue as the through-line. Green / orange / red only when they mean something (High / Medium / Low, or product states).

--brand
Identity, CTAs, active states
--energy-hi
High energy · positive states
--energy-mid
Medium energy · soft alerts
--energy-low
Low energy · destructive
--ink
Body text · 0E1116, not pure black
Tokens · typography

Manrope · one family used well

A single typeface with 5 weights, modular 1.2 scale. Manrope reads well at small sizes and feels friendly without being childish.

Start your day
28-44 · 800
Display
This week
17-20 · 700
Section
Focus mode active
14 · 600
Label
Start your day to activate the system.
13 · 400
Body
CH. 08 · DESIGN SYSTEM
11 · mono
Eyebrow
Tokens · spacing

4px base · seven steps

Multiples of 4. Each step has a purpose: inline gap, card padding, block separation.

8
12
16
24
32
48
64
Components · used

Applied core

What I actually used in the mockups, not a wishlist:

1.Energy Ring — 3 states
2.Status pills · semantic color
3.Buttons · primary / secondary / destructive
4.Stat card · value + label
5.List row with chevron
6.Banner · warning + info
7.Lock Screen notif
Accessibility

Verified minimums

What was actually checked in the case. What's missing is declared, not hidden.

WCAG AA contrast in light + dark
Tap targets ≥ 44×44pt on every action
Color isn't the only cue — always paired with text + icon
Reduce Motion respected (animation → fade)
!
Dynamic Type · extended testing pending
!
VoiceOver · labels designed, not user-tested
09 · Market · Model

Uncovered space.
Model that separates roles.

Competitive analysis of 5 comparable apps — only apps that really compete on the same problem. The B2B2C model separates who pays from who uses.

Competitive analysis · 5 direct apps

Structure + energy · nobody combines them

App Structure Energy Auto breaks Focus B2B2C
Fika
Structured
Tiimo
RescueTime
Reclaim.ai
One Sec
Yes Partial No
Fika's opportunity

Structured and Tiimo give structure but ignore energy. RescueTime measures time but doesn't structure the day. One Sec interrupts distractions but doesn't organize anything. Fika combines structure + energy + focus + B2B2C — its breaks have the real limit of depending on a manual day start (◐), a deliberate decision that prioritizes user control over invisible detection.

Model · B2B2C Freemium

The company buys,
Marco uses.

The company never sees individual data. Minimum 5 users to activate the aggregate view — protects Marco and sustains trust.

Free For Marco
Start/end, Energy Ring, break alerts, focus mode. No streaks, no premium gamification.
Premium €3.99 / month
Detailed summary, full history, data export, extended rule-based recommendations.
B2B Per employee
All Premium included. Aggregate view for managers (Phase 2). Individual data never exposed.
10 · Metrics

How we'll know
Fika is working.

North star + leading metrics that predict it + lagging metrics that sustain it. Targets are aspirational — they get tuned with real data from the first month.

Measurement framework · post-launch

A behavior funnel.
Each drop-off is a hypothesis.

Instead of a flat KPI list, I view the user journey as a funnel — each step depends on the previous one. If end-of-day shutdown drops, it isn't because "Marco doesn't want to close"; it's because one of the earlier steps broke.

01
Notif permission at onboarding
Without this, nothing in the system works
≥ 70%Threshold
02
Day started (day 1)
"Start" tap on first use
≥ 80%Aspirational
03
First break accepted
"Done, I paused" tap — not a dismissal swipe
≥ 35%Realistic
04
Focus mode completed
Block reaches 0:00 without interruption
≥ 55%Realistic
05
Active end of day
Explicit "End day" tap
≥ 50%Aspirational
North Star · ≥3 sustained shutdowns per week
Captures ritual, not isolated use · consumer benchmark ~15-25%
≥ 40%North Star
Lagging metrics · 30+ days
D14 retention
≥ 30%
Active users at 2 weeks — confirms the ritual sustains.
In-app NPS
≥ +30
Survey every 30 days at the first minute of the Summary.
Thresholds are hypotheses prioritized by risk. Each one is tuned with the first month — without a real baseline, fixing exact numbers is guesswork. What matters is the funnel logic, not the numbers.
11 · About me

Who designed Fika,
and what I'm looking for now.

Fika was my final project for the UX/UI bootcamp at Nuclio Barcelona. I refined it later so I could defend it in interviews. If it caught your eye, let's talk.

Hard skills

Tools and practices

Research & strategy
1:1 interviews Exploratory survey Affinity mapping Business Model Canvas
Product
Adoption funnels Leading/lagging metrics Documented trade-offs
Design
Figma · auto-layout · variants Design tokens Apple HIG
Languages
Spanish native English C1
Availability

What I'm looking for

Seniority
Junior · Mid Product/UX Designer
Mode
Remote · hybrid in BCN/Madrid
Geography
ESP · LATAM · EU
Industries
Product · SaaS · Wellness
The hardest decision

D4 · Aggregate data only, never individual

The B2B2C model had an obvious tension: the company pays, the company wants data. But if Fika exposes individual breaks or energy, it stops being wellness and becomes surveillance. I decided the company only sees aggregated metrics, minimum 5 users. That makes upsell harder but protects Marco's trust — without it, the product doesn't work. If we talk, this is the call I'll defend hardest.

Working well
starts with ending well.

If you'd like to see the Figma file, dig into the research, or discuss any decision in the case — write me. The best part of a case is a real conversation about it.

Fika · UX/UI Case · Nuclio Bootcamp · 2025 · Nicolas Marciano