Hi! I'm Hasshi, a UI designer at Liberogic.
Here's a question: do you have a secret struggle like this? You install a habit-tracking app determined to finally make it work, only to find it doesn't stick.
I'm great at starting things, but I've never actually maintained one.
There are plenty of well-designed, beautiful apps out there.
At first, I'd log entries diligently every single day. But then work gets busy, I go out for drinks, and one missed day breaks the streak. Suddenly my motivation crashes to zero.
Those reminder notifications that once felt important become nothing but noise, quietly fossilizing in the corner of my phone screen.
That crushing moment of defeat—'ah, forget it'—that washes over you. I can't be the only one who's felt it.
Is there no one out there to rescue me from a lifetime of three-day commitments? (There isn't.)
What made it even worse was app fragmentation.
Habit tracker, medication calendar, budget app—bouncing between separate apps for each category only made things feel more tedious. And many of them required paid subscriptions, so my management became sloppy and I'd forget to cancel. It was putting the cart before the horse.
That's when the designer's whimsical idea exploded. "Why not just build my own app with only the features I need, designed for myself?"
And so began my journey developing the "My Personal Habit-Formation Cockpit"—a system tailored to my life, created in tandem with AI (Claude Code)!
AI should be able to tell me the optimal solution for now.
1. 【Feature Overview】A dedicated feature that wraps my "laziness" in a system—systematizing "procrastination"
Now, let me introduce the features I actually implemented.
I took the best elements from existing apps while aiming for the ultimate "dashboard" specialized for my lifestyle.
To consolidate all necessary apps into one, I started by creating a habit-formation app.
Since I wanted to switch between morning and night modes, I included both light and dark modes.
🌱 Initial Screen
The initial screen displays an input field for habits you want to build, allowing you to proceed by entering them yourself.
When you scroll down, you'll find a link that says "Answer questions and build a habit." Click on it, and after answering the Q&A, the system will suggest habits tailored to you.
The initial screen features a habit-formation diagnostic tool.
We've also created a habit navigator that helps users who aren't sure what habits to build right from the start—simply answer a few questions and it will suggest habits tailored to you.
🌱 Habit Tracker: Break Free from All-or-Nothing Thinking
The key is to find something you can stick with consistently, even if it's through small incremental steps, to help make a habit.
Created a habit-tracking app with a "five-level rating" feature. Previous apps I used tended to offer only two options: "done" or "not done." This app, however, marks days on the calendar not only when you do something perfectly, but also when you give it even a little effort—the Lv1 days. That way, you see progress in more shades than just success or failure.
For example, with exercise, you can log activities matched to your effort level for the day—from "Level 1: Step on the scale" and "Level 2: Do squats when you go to the restroom," all the way up to "Level 5: Swim 1 km in the pool or 40 minutes of hit boxing."
If you skip a day, it will appear as blank, but thanks to the tax system on skipped days that I'll explain later, you can make up for it on other days even if your streak breaks, so having the occasional skip day won't be a burden.
I can always start over the next day. Thanks to that easygoing approach, at least I manage to get on the scale every single day!
The calendar gradually fills with green gradations, creating a "layering of colors" that you can visually enjoy. When you view the month as a whole, you can easily see how much you've accumulated, which boosts motivation.
Make your habits visible with our calendar feature
When you look at the calendar UI, the color changes when you actually achieve your habit. The color intensity and shade vary based on your level, letting you see exactly how consistently you've been executing your habits. This visual feedback helps keep you motivated.
Archive habits and create new ones with dedicated features
We believe that once you've established a habit for a certain period, it's great to move on to the next one. That's why we've included both an archive feature for habits you've completed and a create-new-habit feature. Click the "Habit Achieved" button to add a new habit.
🏛️ Slacker Tax: Turn guilt into savings
This is another feature linked to the habit tracker we just showed you!
On days you skip, you charge yourself a "tax" (default 300 yen).
We all have times when we just can't keep going, right?
That's why we need a penalty to keep ourselves accountable. But a simple fine just makes you want to quit.
Know why some people struggle with their weight? They take the easy way out, give in to laziness, fill the void with food to trigger dopamine, and end up chasing artificial happiness. That's why just increasing the penalty won't help those of us who find habit-building difficult.
I did consider donating the amount I skipped as a way to make it meaningful, but I was confident that if I imposed such strict discipline on myself, I would absolutely stop opening the app (laughs).
I decided to set the destination for my slacker tax as depositing it into my index fund investment account.
In other words, it's a penalty, but not a penalty. A penalty for my future self.
Even the guilt from slacking off transforms into asset investment for my future self.
I also put extra thought into a "tax reduction system" based on the monthly completion rate.
- "50% tax exemption if completion rate is 90% or higher"
- "25% tax exemption if it's 80% or higher"
I've incorporated a system with these rules.
The screen shows "Just 1% away from a 25% reduction!" so when I see that, some mysterious motivation kicks in and I think, "I can manage Level 2 today, so let's push forward."
The biggest enemy of habit formation is the moment when you skip a day and your streak breaks—that's when you feel like throwing everything away.
But thanks to this tax reduction system, you can pause and think, "I skipped a day, but there's still a chance to get the tax benefit!"
A thoughtful design that doesn't let a single failure discourage you—one that stands firmly by your side through your laziest moments.
✨ Skincare Tracker & 💊 Medication Manager: Zero app-switching frustration
✨ The skincare check tool we always wanted
Managing habits, medications, and household budgets across separate apps is the ultimate hassle for someone prone to procrastination. To eliminate this app-switching fatigue, we've fully integrated daily care and health management into this one cockpit.
Since we could reuse the functionality from habit-tracking apps, the implementation was straightforward.
🧴 A "Skincare Tracker" that forgives days when you can't do your best
Skincare is a legitimate habit. When you open the screen, it asks "How far did you get?"—with five tiers of steps to choose from.
On an exhausting day, "Lv1: Cleansing only (rinse or wash with cleanser)" is enough. If you have a little energy left, you can move up to "Lv2: Basic care (cleanse + toner)" or "Lv3: Standard care (+ moisturizer)," and on special days, "Lv4: Thorough care (+ serum)"—you record whichever level matches your energy that day.
What's more, you can customize the name and content (descriptions) of each level from "Step Settings." The top of the screen displays metrics like "This month's average Lv" and "Days on Lv3 or higher," so you can maintain motivation sustainably—thinking, "I've been tired and stuck on Lv1 lately, so let me aim for Lv3 today."
💊 Medication Management — Comprehensive Support for the Forgetful
And personally, the one thing I struggle with most is managing my medications.
This app goes beyond just entering a drug name. You can register details very granularly and flexibly: the timing of doses (morning, noon, evening), instructions (before meals, after meals, or anytime), the number of tablets for each timing, and even complex frequencies like daily, every other day, or specific days of the week.
When there are unfinished medications, a prominent red alert appears at the top of the screen saying "⚠️ You have unfilled medications. Please check." — giving you a gentle nudge.
At the bottom of the screen, you also face real numbers like "This month's medication adherence rate" and "Number of missed doses" (in the test screen during development, I'm embarrassingly showing a 5% adherence rate... haha).
But don't worry.
Even if you miss a day, the "no judgment" design lets you go back and record it later from the calendar, so you won't fall into perfectionism and can keep going at your own pace.
As you get older, you end up taking more medications, so this feature is incredibly handy. Being able to share past medication information with your doctor is also a lifesaver (since I'm the type to always forget my medication record).
🍺 Drinking Tracker: A game-changing feature that boosts motivation for health and savings
And what truly transformed my life the most was this "drinking tracker" feature.
It's not just about logging your drinks. This app manages your monthly meetup limit (for example, "up to 4 times a month") and budget while turning everyday small sacrifices into visual rewards.
🍵 One tap to save—"Reduced Drinking Savings"
In your daily life
"I'll skip my evening drink at home today"
—on days when you hold back, just tap the "I didn't have an evening drink today" toggle on your home screen.
That's it. A green checkmark appears on your calendar, and 500 yen gets added to your "Reduced Drinking Savings."
As everyday small sacrifices add up as amounts, as you approach the end of the month you get a strange sense of achievement and dopamine: "Wow, I've already cut back 3,000 yen worth (6 days) this month!"
Use that extra money for investments or savings.
For example, taking the extra money from your wishlist fund—by realizing you've earned tangible benefits from reducing your drinking, you're more likely to stick with cutting back or quitting.
🛡️ "Bad Drunk Prevention Mode"—keep yourself in check during social drinks
The hidden gem of this app is the "drunk prevention mode." Turn it on when the drinking session starts. Then a countdown to your preset "target departure time" displays prominently in the center of the screen. Of course, if you think "today's too fun to leave yet!" you can flexibly extend your time with the "change departure time" or "🎉 Second round is no problem!" buttons—a thoughtful design that's kind to lazy people like me.
The screen also has drink counters for "🍺 Alcohol," "🥤 Soft drinks," and "💧 Water." It judges your pace in real time—like "one soft drink for every two alcoholic drinks"—and shows you a gauge that turns green and says "OK." This dramatically reduces next-day hangovers and that regretful feeling of "why did I drink so much..."
📊 I've also added lots of other convenient features for drinking sessions
After the drinking session ends, you can record the restaurant name (like "Torikizoku Shibuya"), the actual amount paid, notes about who you went with, and more. I also added a feature that automatically fills in information when you paste a Google Maps URL. Since it's only a few times a month, Claude told me it wouldn't cost anything even with an API integration, so I implemented it.
I also added a feature to track payment settlements from drinking sessions, since it's easy to forget.
No more confusion about who paid what—it's really helpful.
At the end of the month, the "monthly report" shows your "savings from reduced drinking" (days you skipped evening drinks) plus any money saved under your drinking budget (money left over from outings), combined as "total savings" displayed proudly. For example, you can see at a glance "I saved 9,000 yen this month!"—so you can get excited thinking "maybe I'll buy that gadget I wanted." It's my favorite feature because you get both health and money benefits.
2. After development: Claude was the perfect "translator" for a designer
So I managed to turn all my laziness and selfishness into an app, and I owe it entirely to Claude, my development partner, for getting me this far despite having no prior development experience.
Engineers might yell "are you serious?" at me, but this time I went with an ultra-brute-force single-file setup—putting all HTML, CSS, and JavaScript into one index.html file. But for us (me and Claude), it was the perfect solution.
When files are split across multiple documents, just explaining which file and where to fix becomes a hassle. But with everything in one file, I can dump the entire code into the chat and Claude instantly grasps the whole picture.
Claude translates my abstract image of "I want this behavior" into beautiful code. There were times when a misplaced closing tag or JavaScript load order caused the entire app to crash, and we'd chase error logs together late into the night—but even those moments felt like a buddy movie and were genuinely fun (laughs).
For integrations with GitHub or Cloudflare, when I chat with Claude it teaches me how to set up accounts and provides direct links to official sites, so before I know it everything is connected seamlessly.
3. The next high hurdle: designers and the abyss of security
With Claude's help, I ended up with the ultimate toy—an app packed with both the look and feel of my ideal vision.
……but then a new problem emerged.
As I used this cockpit every day, I suddenly came to my senses. "Wait, this app contains my real health data, my daily medication records, my recent household budget, and a history of times I've skipped—raw privacy laid bare all over it," I realized.
Right now I've applied a simple PIN lock to the screen as some basic peace of mind, but honestly I'm a complete novice when it comes to security. With only my knowledge and AI working together to build it, I can't shake a lingering unease about entrusting important data to it.
As a designer creating a "comfortable experience," the sense of security that nothing will leak or be breached should equally be an important part of that experience.
"Actually, I want to use Face ID on my phone and the latest Passkeys so I can unlock it myself—safely and smartly in one smooth motion!"
I thought about doing it, but security is a deep, specialized field that's not easy to navigate.
This is beyond my capabilities...
I want to talk this through with an engineer and proceed carefully.
Eventually I'd like to add a household budget management tool too, where users can just upload their credit card history and it automatically records transactions. But I'm worried about security, so for now it's on hold.
Summary
The tools are ready. Next, I want to build "peace of mind"!
An idea that I'd only been thinking about because I lacked development knowledge has, thanks to AI as my perfect partner, come to life and become a tool that actually changes my daily life. I've stopped blaming myself for being imperfect, and by paying a small "laziness tax," I can restart as many times as I need. Thanks to this gentle system, I—once a master of giving up after three days—now enjoy building habits every single day.
But the more convenient something becomes, the greater the responsibility to protect it.
Though it's not mentioned in this article, I'm gradually adding features like notifications and budget management.
Budget management and similar features require careful security considerations, so I'm still developing them in the test environment.
So, please look forward to the next update!
UI design is constantly evolving! I'm working through how to integrate accessibility into LP design. I've been stepping away from markup lately and wondering if I should level up my JavaScript skills too. I'm a fan of Takumi Kitamura!
Hashy
Web Designer / Joined 2018 / Still a beginner at heart