Back to selected work
Case study · Personal project

A friendly companion for the desk-bound day.

ErgoFriend is a desktop app that protects your back and your attention — scheduling micro-breaks, leading quick stretches, and checking in on your setup. A personal project where I let the visuals lead.

ErgoFriend desktop app — Ergonomics screen showing workstation check and a stretch recommendation
Role Product & visual design
Year 2023
Platform Desktop companion app
Focus Visual · UI · composition

Stretch the body, stretch the design muscle.

Since Covid I've worked from home most of the time. At some point my right hand started hurting — the small, everyday strain you don't notice until it's there. When I went looking for a side project to refresh my design practice, this one chose itself.

Close-up of a person holding their wrist while working on a laptop — office syndrome
Office syndrome — the everyday cost of the desk-bound remote day.

The remote day is longer, faster, and harder to unplug from.

  • Longer hours at a faster pace.
  • More interruptions — and more stress.
  • A real difficulty unplugging at the end of the day.

Meet Kim.

Research needed a face. Kim is the persona I designed for — not because she's anyone specific, but because she collects the pattern the research kept surfacing.

Young woman working on her laptop from a couch, pencil held thoughtfully at her mouth
Kim, 26
Data analyst · single · lives in Ramat Gan
"I love my job! Sometimes I get so caught up in my work I forget to eat or take a break."

Frustrations

  • Burned out
  • Can't find the time to take care of herself

Goals

  • Eat regularly
  • Stay focused with refreshing breaks
  • Stay healthy and move around

A desktop companion, not a mobile app.

The problem is at the desktop, so the product had to live there. Mobile-only break apps get swiped away; the desk is where the strain happens and where the intervention has to land.

I scoped the product around a few things:

A floating status companion.

Always visible at the edge of the screen — shows current status, time to the next break, and opens the full app on click. Designed to be glanced at, not stared at.

A quick nudge every 5 minutes.

A small pop-up with one warm prompt — let go of the mouse, blink, hydrate. Small enough to be shrugged off, specific enough to actually do.

A stretch break every 25 minutes.

A larger window opens with a quick stretch to follow along with — something to get you out of the chair for a moment.

Mindful breaks on demand.

Longer, guided breaks inside the app — stretches, breathing, audio mindfulness. For when you actually need to reset.

Warm, sticker-shop, slightly silly.

The references I pinned before drawing screens — stickers, storybook illustration, playful stationery, a wink of colour. A direction away from clinical productivity and towards something you'd actually want sitting on your desk.

Mood board collage — daisies, pop-art stickers, a woman at a laptop, gnomes with sunflowers, a dragon, encouragement badges, bees, and a pink-cheeked notebook character

A handful of what the desk-top would feel like, before it had to function.

A flower, not an alarm clock.

Most productivity apps in this space look clinical — timers, red bars, stern reminders. That tone doesn't help people who already feel guilty for not taking care of themselves. It just adds another thing to snooze.

So the product needed a character before it needed features. I went exploring for a shape that would land the right vibe — not childish, but friendly.

Sketches and iterations exploring different flower mascot directions before landing on the final shape
Iterations on the way to the final shape.
ErgoFriend mascot — a friendly orange-yellow flower with two eyes
The one that stuck.

The status companion and the pop-up reminder.

These two components carry almost the whole product — a tiny character at the edge of the screen, and a small card that pops in every five minutes with one clear thing to do.

I sketched the status companion first — a floating peek of the mascot at about 50% opacity, so it's present but not invasive. It handles pause, countdown, and an overdue state.

Handwritten wireframe of the break status component floating on a browser window at 50% opacity
Early sketch — where the companion lives on a busy desktop.

Then, dozens of variations of the pop-up.

Ideation board — many variations of the pop-up reminder component with mascot, message and progress bar
Converging on something small, warm, and clear about the action.
Final pop-up reminder animating — 'Let go of your mouse and BLINK' with the flower mascot blinking and a 1-second progress bar
Pop-up reminder variant — 'Let go of your mouse and HYDRATE' with a blue cloud mascot and a 1-second progress bar

The same form, different prompts — one instruction, one countdown, the mascot already doing it.

From the companion to the full app.

Hover the flower and it opens into a menu — the three surfaces (Ergonomics, Mindfulness, Settings) each a click away. The big button pauses the app entirely; it's there for meetings and calls, where a pop-up would cut across something that matters.

Hover menu — a large pause button and three small icons for Ergonomics, Mindfulness and Settings
Hover the companion — pause on the left, the three surfaces on the right.
Flow diagram — from browser with status component, to app menu, to micro-break, stretch break, Ergonomics, Mindfulness and Settings screens
Flow — the companion is the entry point. Everything else sits one step behind it.

A shelf of ergonomic tips — not a checklist.

The Ergonomics surface is where ErgoFriend turns into a small reference. A place to browse — setup tips, posture guidance, bits of advice that can rotate and refresh over time. Each card pairs a tip with an illustration that keeps the tone inviting rather than corrective.

Ergonomics screen — a shelf of ergonomic tips, stretches and posture guidance
Ergonomics — a shelf of tips that can change over time.

Design the break so it doesn't become more screen time.

Illustration of a person sitting in a meditation pose with eyes closed

Breaks without direction often become more screen time. Audio mindfulness turns the break into a real reset — short, eyes-off guidance that pulls users out of autopilot, helps them decompress, and lets them come back sharper.

Mindfulness screen — topic of the day, length selector, breathing exercise, and focus music playlist
Mindfulness — a real break is an eyes-off break.

Stretches first — then space to breathe.

The stretch break runs for five minutes. A handful of short stretches first, each with a quick countdown — and then a quiet block of nothing. Room to stand up, walk around, or just look away from the screen. A snooze is there for when it's a bad moment.

Stretch break screen — illustration of a shoulder stretch, written instructions, and a 7-second countdown
Stretch break — one movement, one instruction, a countdown you can ignore.

Tune the breaks, glance at the week.

Two cadences to tune — how often micro-breaks and stretch breaks fire. Working hours and fixed reminders (breakfast, lunch, end-of-day) sit on the right as the structure of the day.

Plus a small compliance summary — not a guilt trip, a mirror. Snoozes, weekly rhythm, and work-intensity across the week. There if you want it, easy to ignore if you don't.

Settings screen — Ergo breaks cadence, day schedule and fixed reminders, weekly summary with compliance and work intensity
Settings — cadence on one side, a gentle read on the week on the other.

What I took away from this one.

ErgoFriend was the project where I let visual design lead. Most of my work starts with flows and structure; here I started with a character, a palette and a feeling — and let those choices pull the product behind them. It's a different muscle, and it's the one I wanted to build.