Topics

Will I stick with it if I use Claude Code? A UI designer's story of developing a "personalized app" after failing to stick with a comprehensive health app.

  • column

Hello! I'm Hasshi, a UI designer at Liberogic Inc.

Suddenly, do any of you have this kind of secret worry? You installed it with great enthusiasm, thinking, "Okay, I'm going to start today!"I can't stick with habit-forming apps at all.That's my problem.

I'm an expert at starting things, but I've never been able to stick with them.

There are many excellent and beautiful apps out there.

At first, I diligently keep a record every day. But if I get busy with work or have a drinking party and my "consecutive record" is broken for any reason, my motivation instantly drops to zero...

Those reminder notifications that I used to care about so much have now become mere noise, and the apps themselves are becoming fossilized at the edge of my smartphone screen.

That feeling of defeat, that "oh well, whatever" moment that hits you at that instant—I'm sure I'm not the only one who's experienced it.

Is there no one who can offer a helping hand to someone whose life is such that they give up on everything after three days? (No, there isn't.)

What troubled me even more was the "decentralization of apps."

Switching between different apps for each item—habit tracker, medication calendar, household budget book, etc.—only added to the hassle. On top of that, I had numerous paid subscriptions, which led to poor management and forgetting to cancel them. This was completely counterproductive.

That's when the designer's whimsical ideas exploded."In that case, why not just create your own app, one that only includes the features you need?"

This is how the development of my "My Own Habit-Forming Cockpit," a system tailored to my lifestyle, began, in collaboration with AI (Claude Code)!

The AI ​​should be able to tell us the optimal solution.

1. [Feature Introduction] A system that embraces your "laziness"—a carefully designed feature that systematizes "slacking off."

Now, let's take a look at the features we've actually implemented.

I aimed to create the ultimate dashboard, tailored specifically to my lifestyle, while incorporating the best features of existing apps.

To consolidate all the necessary apps into one, I started by creating a habit-tracking app.

I've also included both a light mode and a dark mode so that I can use them differently in the morning and at night.

🌱 Initial footage

The initial screen displays a form for entering the habits you want to continue. You proceed by manually entering the information.

If you scroll down, you'll find a link that says "Answer the questions and create habits." Click on that, and after answering the questions and answers, it will suggest habits that are right for you.

The initial screen introduces a habit formation assessment.

Additionally, for users who are unsure what habits they want to develop, we've created a habit navigation feature on the initial screen that allows them to select habits that suit them simply by answering a few questions.

🌱 Habit Tracker: Graduate from the All-or-Nothing World

First of all, in order to make something a habit, it's good to have something you can continue doing little by little, even if it's just small steps.

I created a habit-tracking app with a "5-point rating" function. The apps I used before tended to be either "successful" or "failed." But with this app, the calendar is colored not only for "perfectly successful" days, but also for "just a little bit of effort" Level 1 days.

For example, with exercise, you can record your progress according to your effort each day, from "Lv1: Step on the scale" and "Lv2: Do squats when you go to the toilet" to "Lv5: Swim 1km in the pool and do 40 minutes of hit boxing."

The days you skip will be blank, but thanks to the "slacking tax" system which I'll explain later, you can recover on other days even if you don't keep it up, so skipping days isn't a problem.

I can just start again the next day. Thanks to that ease, I'm at least able to step on the scale every day!

The calendar features a green gradient that gradually fills the space with color, creating a visually enjoyable "layering of colors." When viewed over a month, it's easy to see how much progress you've made, which boosts motivation.

Visualization using the calendar function

When you look at the calendar UI, the color changes when you actually achieve a habit. The intensity and color of the color change according to your level, so you can see how well you've been executing the habit, which helps you stay motivated.

It also includes a habit archiving function and a new habit creation function.

And since I think it's a good idea to start on other habits once you've established a habit by a certain deadline, I've also provided a habit archiving function and a new habit creation function! You can add a new habit by clicking the "Habit Achieved" button.

🏛️ The "Slacking Tax": Turning Guilt into Savings

This is another feature linked to the habit tracker we just looked at!

The system imposes a "tax" (default 300 yen) on days you slack off.

Everyone has times when they just can't keep going, right?

So, penalties are necessary to keep myself in check, but I get tired of them if they're just fines.

Do you know why overweight people are overweight? It's because they take the easy way out, they're lazy, and they rely on food to fill their dopamine levels—a simple happiness hormone. So, even if we make the penalties stronger, it won't make any difference for us who are bad at forming habits.

I did consider donating the money I'd missed, but I was confident that if I pushed myself that hard, I'd never open the app (laughs).

Where do you pay the slacking tax?I chose "Deposit into my index investment account."

In other words,It's a fine, but it's not a fine. It's a fine for myself.is.

I even transformed the guilt I felt for slacking off into an investment in my future self.

What we focused on even more was a "tax reduction system" based on the monthly achievement rate.

  • "If the achievement rate is 90% or higher, 50% tax exemption."
  • "If the price is 80% or higher, you get a 25% tax exemption."

We have incorporated a mechanism that makes this possible.

The screen displays "Just 1% more for a 25% reduction!", and seeing this gives me a strange sense of motivation, making me think, "I'll do my best today, even if it's only Level 2."

The biggest enemy of habit formation is the feeling of wanting to give up on everything the moment you skip a day and break your streak.

However, thanks to this tax reduction system, you can think, "I skipped a day, but I still have a chance to take advantage of the tax reduction!" and stay motivated.

It's a gentle design that won't let you give up after just one failure, and it thoroughly caters to your lazy self.

✨ Skincare Tracker & 💊 Medication Management: Eliminate the hassle of switching between apps.

✨ I wanted a skincare check tool.

Habits, medication, household finances... managing all of these in separate apps was the ultimate hassle for someone as lazy as me. To eliminate this "switching between apps," I've completely integrated daily care and health management into this one app.

Since we could directly reuse the features of a habit-forming app, implementation was easy.

🧴 A skincare tracker that accepts days when you can't do your best.

Taking care of your skin is an important habit. We've prepared a five-step process that asks you "How far have you gotten?" when you open the screen.

On days when you come home completely exhausted, "Lv1: Just wash your face (water only or wash your face with a facial cleanser)" is fine. If you have a little more energy, you can do "Lv2: Minimum care (wash your face + toner)", "Lv3: Basic care (+ lotion)", and on special days, you can even add a serum for "Lv4: Thorough care"... You can record your routine according to your energy level that day.

Furthermore, the names and care details (descriptions) for each level can be customized to your liking through the "Step Settings." The top of the screen also visualizes things like "Average Level This Month" and "Number of Consecutive Days at Level 3 or Higher," so you can maintain motivation within reasonable limits, for example, by thinking, "I've been tired lately and only been at Level 1, so I'll try to reach Level 3 today."

💊 "Medication Management" that thoroughly assists the lazy.

And personally, the thing I find most challenging is managing my medication.

This app allows you to not only enter the name of the medication, but also specify the timing of taking it (morning, noon, night), whether to take it before, after, or as needed, the number of tablets to take at each time, and even complex frequencies such as daily, every other day, or specific days of the week.

If you have any uncompleted medication, a prominent red alert will appear at the top of the screen saying, "⚠️ You have missed taking your medication. Please check," which will motivate you to take it.

At the bottom of the screen, you'll be confronted with realistic figures such as "This month's medication adherence rate" and "Number of times you've missed taking your medication" (although in the test screen under development, it reveals a lazy adherence rate of only 5%...lol).

But don't worry.

Even if you forget to take it on a particular day, the "it's okay to add it later" design remains, allowing you to record it retrospectively using the calendar. This means you can continue at your own pace without falling into perfectionism.

As I get older, I tend to take more medication, so this feature is incredibly useful, and it's a huge help that I can share information about medications I've taken in the past when I go to the doctor (I'm someone who always forgets my medication record book).

🍺 Managing drinking parties:A fantastic feature that will dramatically increase your motivation for health and saving money.

And personally, the feature that has changed my life the most is this "drinking party management" function.

It's not just about keeping a record of what you drink; it also incorporates features to manage a monthly limit on the number of drinking sessions (for example, "up to 4 times a month") and a budget, while also turning small daily sacrifices into visual rewards.

🍵 One tap and you'll get a "savings plan for moderation in drinking"

In daily life

"I'll skip drinking at home today."

On days when I manage to resist the urge, all I have to do is tap the "I didn't drink tonight" toggle on the home screen.

Just by doing that, a green mark will appear on your calendar, and 500 yen will be added to your "drink-saving savings."

As those small daily sacrifices add up to a significant amount of money, as the end of the month approaches, you get a strange sense of accomplishment and dopamine rush, thinking, "I've already cut back on drinking by 3,000 yen (over 6 days) this month!"

You can invest or save this extra money.

If you can feel that you've gained something else by cutting back on alcohol, such as using the money saved from a wish list to buy things you want, you'll likely be more likely to stick to abstinence or reduced drinking.

🛡️ "Hangover Prevention Mode" to keep yourself in check during drinking parties

One of this app's hidden features is the "Hangover Prevention Mode." Once the drinking party starts, simply turn on this mode. A countdown to your pre-set "Target Return Time" will then be prominently displayed in the center of the screen. Of course, if you're having too much fun and want to stay a little longer, you can flexibly extend the time with the "Change Return Time" or "🎉 Plenty of time for a second party!" buttons—a design that's kind to even the laziest person.

Furthermore, the screen features counters for "🍺Alcohol," "🥤Soft Drinks," and "💧Water." It monitors your pace in real time, such as "one soft drink for every two alcoholic drinks," and the gauge turns green to indicate "OK." This dramatically reduces hangovers the next day and the regret of thinking, "Why did I drink so much...?"

📊 We've also added many other features that are convenient for drinking parties.

After a drinking party, you can record the name of the restaurant (like "Torikizoku Shibuya"), the actual amount paid, and notes about the people you went with. We've also added a feature that automatically fills in information when you enter a Google Maps URL. The AI ​​told me that since this is only done a few times a month, there would be no cost for API integration, so I implemented it.

I also added a memo function because I sometimes forget to settle the bill after drinking parties.

It's great because it eliminates the question of whether or not you paid.

Then, in the monthly report at the end of the month, your "alcohol-saving savings" (based on the number of days you avoided drinking) and the difference between your drinking budget and the amount you spent (the money you saved at drinking parties) are added together and proudly displayed as your "total savings." For example, you can see at a glance that "I saved a total of 9,000 yen this month!", which makes you excited to think, "Maybe I'll buy that gadget I've always wanted with this money." It's a favorite feature that gives you both health and money.

2. After Development: Claude was the best "translator" for designers.

And so, this app, which incorporates all my laziness and selfishness, has finally taken shape. The fact that I, a complete novice in development, was able to get this far is entirely thanks to my partner, Claude.

Engineers might get angry and ask, "Are you serious?", but this time we went with an extremely simple, single-file structure: "cramming all HTML, CSS, and JavaScript into a single index.html file." But for us (Claude and I), this was absolutely the right decision.

When files are split into multiple parts, it's a hassle just to tell the developer "which file and which part needs fixing," but with a single file, you can just send the entire code in the chat, and Claude will instantly understand everything.

Claude translates my abstract idea of ​​"this is how I want it to behave" into beautiful code. There were times when the entire app would crash due to a mistake in closing tags or the order in which JavaScript was loaded, and we'd end up chasing error logs together in the middle of the night, but even that was fun, like something out of a buddy movie (laughs).

When I chatted with the AI, it guided me through the account registration process for things like GitHub and Cloudflare, and even provided direct links to the official websites, so I was able to set up the accounts in no time.

3. The Next High Wall: Designers Enter the Abyss of Security

With Claude's help, I was able to get the perfect toy (app) that is "my ideal" in terms of both appearance and movement.

...However, a new problem arises here.

As I actually started using this cockpit every day, I suddenly came back to my senses. "Wait, this app has my real health status, daily medication data, recent household budget, and a history of when I've slacked off,It's full of exposed privacy."Zo," he said.

Currently, I've set a simple PIN code to lock the screen as a temporary measure, but to be honest, I'm a complete novice when it comes to security. With the current setup, which is based solely on my own knowledge and that of AI, I can't shake off a lingering sense of unease about entrusting important data to it.

As a designer, I create "comfortable experiences," and that's precisely why I'm concerned with the underlying principle of "absolutely no leaks or breaches."A sense of security is also an important part.That should be the case.

"I definitely want to be able to open my phone safely and smartly using my smartphone's Face ID or the latest Passkeys!"

That's what I thought, but security is a highly specialized field that's not easy to master.

This is beyond my ability to handle...

I'd like to discuss this with the engineers and proceed cautiously.

Eventually, I'd like to introduce a household budget management tool that automatically records transactions simply by uploading credit card usage history, but I'm putting that on hold for now due to security concerns.

summary

The tools are ready. Now, let's create "peace of mind"!

Ideas that I had only kept in my head because I lacked the necessary development knowledge have come to life thanks to my amazing partner, AI, and have become tools that actually change my life. I've stopped blaming myself for not being perfect, and by paying a small "slacking tax," I can start over as many times as I want. Thanks to this user-friendly system, even I, who used to be a pro at giving up after three days, can now enjoyably incorporate it into my daily routine.

However, the more convenient something becomes, the greater the responsibility to protect it comes with.

Although not mentioned in this article, we are gradually adding features such as notification and household budget management functions.

However, household budget management and similar features must be handled carefully from a security standpoint, so we are still working on them in the development environment.

So, please look forward to the next update!

Written by

UI design is updated every day! I'm also thinking about how to incorporate accessibility into LP design. I've been away from markup lately and have been thinking, "Should I improve my JS as well?" I love Kitamura Takumi!

Hasshi

Web Designer / Joined in 2018 / Kokoro is still a budding designer

View this staff member's article

We pride ourselves on our reliable team structure and speedy response capabilities.

At Liberogic, our experienced staff actively drive projects forward, which is why we are highly regarded by our clients.
We ensure that project managers and directors are properly assigned to ensure the smooth progress of the entire project. We prevent unnecessary cost increases from full commitments and allocate resources to the right people in the right places, and are well-known for the speed with which we can grasp the work content, create and submit estimates.

Please note that we do not actively engage in SES-style on-site work.

We support almost all major project management and chat tools, including Slack, Teams, Redmine, Backlog, Asana, Jira, Notion, Google Workspace, Zoom, and Webex.

Please contact us with any web-related concerns you may have.

Case Study