Book a call

Book a call

Loading the calendar
← All projects

Olimpo App

Productivity · Product Design · UX/UI Design · Design System
Olimpo App

Overview

Olimpo is a productivity app for people who set big goals and get stuck halfway. The person says the goal in their own words, and the app turns it into a plan, shows the task for today and keeps the progress in sight.

I designed the product and its brand and built the app, from April to October 2026.

  • 3languages: Portuguese, English and Spanish
  • 2,581interface texts in each language
  • 39test scenarios for the AI

The Problem

  • The wish never becomes a task

    “Become fluent in English” does not turn, on its own, into what to do on Tuesday morning.

  • Planning is left to the person

    A tool without AI leaves all the planning to the person, and the plan is the hard part.

  • Each attempt weighs on the next

    Every abandoned plan leaves guilt behind, and the next start gets heavier.

Research: 17 Competing Apps

  • 17productivity apps compared in September 2026
  • 0turned a vague goal into a full plan
AppAI turns a vague goal into a planGamification
OlimpoYes: goal, projects and recurring tasksYes
MotionIn part: AI project managerNo
TiimoIn part: plans the dayYes
Goblin.toolsIn part: breaks one taskNo
TodoistNoA little
TickTickNoA little
SunsamaNoNo
HabiticaNoYes

8 of the 17 apps compared, as each one presented itself in September 2026.

Why Greek Mythology

The method comes from psychology: break the goal into steps that fit in a day, make the first one small and show progress on the same day.

The mythology is how the app tells it. The hero’s journey is the oldest way of telling a change, and a climb with a mentor, trials and restarts is more human than a list of tasks. Each name in the app points to a myth and to the research behind the feature.

NameIn the appThe mythThe research
OlimpoA goal is split into projects and tasks that fit in a day.Nobody reached the summit of Olympus in one leap.Behavioral activation: a small step comes before the will.
The OracleThe planner. A goal said in plain words comes back with a deadline, projects and dated tasks.The Greeks took their big question to Delphi. The Pythia answered in riddles, and this one answers with a plan.Implementation intentions: a task with a set day gets done more often.
ChironThe coach. When a goal stalls, he leaves a question, never an alert.Chiron trained the heroes and never fought in their place.Self-determination theory: the will lasts longer when the choice stays with the person.
Focus ModeA session opens with one minute of guided breathing.In the hero’s journey, crossing the threshold starts the adventure.Event boundaries: a marked passage helps the mind switch context.
Morpheus’s poppiesEvery break is recorded as rest and earns its own achievements.Morpheus is the god of dreams, son of Sleep.Sleep restriction studies: too little sleep lowers attention without the person noticing.
The 16 archetypesEach personality type has a Greek deity. The plan makes up for the blind spot of the type.“Know thyself” was carved at the entrance of the temple of Delphi.The questionnaire shows a tendency, and the app never treats it as a fixed trait.

Five Decisions and What Each One Changed

1A vague goal still gets a plan

Problem
People type “I want to be healthier”. A form with deadline and metric stops them before they start.
Decision
The app asks only for the deadline and the pace, then builds the plan.

6 → 15out of 16 in the AI test

2Safety is a flow, tested like the others

Problem
A harmful goal became a plan with a warning, and a conversation with a person in crisis ended in an error.
Decision
The app refuses the unsafe target and offers safer paths. In a crisis it drops the plan and answers with support and a help line.

2 → 15out of 16 in the crisis conversation

3Personality types without labels

Problem
The 16 types make the plan personal, and they can also box a person in.
Decision
The text speaks of “energy tendencies”, never of fixed traits, and the plan makes up for the blind spot of each type.

16types, each with its article, in three languages

4A ranking people can trust

Problem
A ranking invites people to game the score and to bury the posts of others.
Decision
Half of the score is regularity. Only a report hides a post, and a downvote never does.

50%of the score comes from regularity

5Focus time that is true

Problem
A session ended after 30 seconds was recorded as 25 minutes of focus.
Decision
A session under 5 minutes does not count, and a longer one counts the real time.

5 minis the shortest session that counts

Testing the AI Like a Flow

Each answer of the AI was scored on 8 criteria, 16 points in all. A score under 10 is a bug. The first round found three failures, and each one was fixed and tested again.

One Path, End to End

Olimpo app, Register screen
Register. The goal is typed in plain words.
Olimpo app, Home screen
Home. The plan turns into the tasks of the day.
Olimpo app, Focus Mode screen
Focus Mode. One task, one timer.
Olimpo app, Statistics screen
Statistics. The last 30 days, task by task.

Design System

The app and its two landing pages share one identity, in light and dark themes: the same three typefaces, the cream palette and the brand orange. The components are documented in Storybook and checked against WCAG AA.

The build refuses a color or a size outside the design tokens, a missing translation and a text written straight in the code.

Between Design and Code

The app is built in React, and I wrote it with the help of Claude Code.

  • 334 → 86 kBof layout code, with the heavy dialogs loaded only when they open
  • 547 → 342 kBin the main file, with the libraries split

What Comes Next

The app is live, with a demo mode anyone can open. The next step is the beta, and its first usage numbers will come to this page.

Styleguide

Colors & Buttons

#E2560F · Orange
#1B1713 · Ink
#F3ECE1 · Cream
#FFFDF6 · Paper
#F4EEE3 · Smoke
#E7DCC9 · Panel
#6F6454 · Gray
#F97316 · Bronze on Ink
#C2410C · Ember
Typography · Clash Display, Zodiak, Satoshi

You know where you’re headed.

ExampleNameWeightSizeLine heightLetter spacing
OlimpoH1 · Clash DisplaySemibold80px78.4px-3%
Focus ModeH2 · Clash DisplaySemibold46.4px48.3px-2.5%
headed.Accent · ZodiakItalic46.4px48.3px-1%
One sentence is enough.Body · SatoshiMedium16px21.6px-0.3px
Olimpo app, Home screen
Mobile
Designed in Figma Figma
Built with React React
Design and code by joaomob