Hallo! Ik ben Hasshy, UI-designer bij Liberogic Inc.
Misschien herken je dit stille frustratie-moment wel: "Oké, vanaf vandaag ga ik het echt doen!" Je installeert vol goede moed een gewoontetracker, maar die app blijft nergens bij hangen.
Met beginnen ben ik een pro, maar volhouden lukt me nooit.
Er zijn ontzettend veel slimme en mooie apps.
In het begin houd ik elke dag netjes bij wat ik doe. Maar als het werk druk is of er een borrel tussen zit, en mijn "reeks" op een dag onderbroken wordt, is mijn motivatie in één keer weg...
De herinneringsmeldingen waar ik in het begin zo op lette, veranderen na verloop van tijd in achtergrondruis, en de apps op het uiterste randje van mijn telefoonscherm verstenen langzaam.
Dat moment waarop het gevoel van "Ach, laat maar" opeens toeslaat. Ik weet zeker dat ik niet de enige ben die dat kent.
Is er dan niemand die een helpende hand uitsteekt voor iemand die het altijd na drie dagen opgeeft? (Niemand, helaas...
Wat me nog meer dwarszat, was de versnippering over meerdere apps.
Heen en weer schakelen tussen aparte apps voor een gewoontetracker, een medicijnkalender, een huishoudboekje en noem maar op, maakte het beheren nog vervelender. Bovendien waren er zoveel betaalde abonnementen dat het beheer slordig werd en ik soms vergat ze op te zeggen. Zo werd het middel erger dan de kwaal.
Toen borrelde het eigenzinnige idee van een ontwerper op. "Waarom bouw ik niet gewoon zelf een app die alleen de functies bevat die ik nodig heb, speciaal voor mezelf?"
Zo begon de ontwikkeling van mijn "Oreo Habit Cockpit", een gewoontecockpit op maat van mijn dagelijks leven, gebouwd in tandem met AI (Claude Code)!
De optimale oplossing zou de AI me vast wel vertellen.
1. [Functiebeschrijving] Een op maat gemaakte functie die mijn luiheid in een systeem vangt, door "uitstelgedrag" te systematiseren
Laten we nu eens kijken naar de functies die ik daadwerkelijk heb geïmplementeerd.
Ik streefde ernaar de beste eigenschappen van bestaande apps te combineren en er een ultiem "dashboard" van te maken, speciaal afgestemd op mijn leven.
Om alle benodigde apps in één te bundelen, begon ik eerst met het bouwen van een app voor het opbouwen van gewoontes.
Omdat ik de app ochtends en 's avonds anders wil gebruiken, heb ik zowel een lichte als een donkere modus voorzien.
🌱 Startscherm
Het startscherm toont het invoerscherm voor gewoontes die je wilt volhouden. Je vult zelf in wat je wilt bijhouden.
Als je omlaag scrolt, zie je onderaan een link om een gewoonte aan te maken. Als je daarop klikt, beantwoord je een aantal vragen en stelt de app een gewoonte voor die bij je past.
Op het startscherm hebben we een gewoontediagnose toegevoegd
Daarnaast hebben we op het startscherm een gewoontenavigator gemaakt voor gebruikers die nog niet weten welke gewoonte ze willen aanleren. Zij beantwoorden enkele vragen en kiezen vervolgens een gewoonte die bij hen past.
🌱 Gewoontetracker: voorbij het alles-of-niets-denken
Om een gewoonte op te bouwen, helpt het om kleine stappen te zetten en iets te hebben dat je consequent kunt volhouden, ook als het maar een klein beetje is.
We hebben een gewoontetracker gebouwd met een beoordeling op vijf niveaus. Apps die wij eerder gebruikten, kenden vaak alleen de keuze tussen "gelukt" en "niet gelukt". In deze app wordt een dag ook gekleurd in de kalender wanneer je "een beetje" hebt gedaan (niveau 1), en niet alleen wanneer je het perfect hebt gedaan.
Bij sport kun je bijvoorbeeld registreren wat je die dag hebt gedaan, van "Niveau 1: gaan op de weegschaal staan" en "Niveau 2: squats doen terwijl je naar het toilet loopt", tot "Niveau 5: 1 km zwemmen in het zwembad en 40 minuten hitboxen".
Dagen waarop je niets hebt gedaan, blijven leeg. Maar met het belastingsysteem voor gemiste dagen, dat we later toelichten, kun je je gemiste dagen op andere momenten inhalen. Zo is een gemiste dag niet meteen een probleem en blijf je gemotiveerd.
De volgende dag kun je gewoon weer beginnen. Dankzij die lichte drempel lukt het me elke dag in ieder geval om op de weegschaal te gaan staan!
Met een kalender die geleidelijk groen kleurt in een verloop, zie je visueel hoeveel je al hebt volgehouden. Zo is het in één oogopslag duidelijk hoeveel je in een maand hebt opgebouwd, wat je motivatie een extra duw geeft.
Zichtbaar voortgang met de kalenderfunctie
In de kalenderweergave verandert de kleur van een dag zodra je een gewoonte op die dag hebt volbracht. Afhankelijk van je niveau verandert de kleur en intensiteit, zodat je ziet hoe consequent je je gewoontes hebt uitgevoerd. Dat helpt om gemotiveerd te blijven.
Gewoontearchief en nieuwe gewoontes toevoegen
Zodra een gewoonte na een bepaalde periode echt vaste vorm heeft gekregen, is het een goed moment om aan een nieuwe te beginnen. Daarom heb ik een gewoontearchief en een functie om nieuwe gewoontes toe te voegen gemaakt! Met de knop "Gewoonte voltooid" voeg je direct een nieuwe gewoonte toe.
🏛️ Verzuimbelasting: schuldgevoel omzetten in spaargeld
Dit is een extra functie die direct gekoppeld is aan de gewoontetracker hierboven!
Op dagen dat je een gewoonte overslaat, legt het systeem jezelf een "belasting" op (standaard €3,00).
Iedereen heeft wel eens momenten waarop het gewoon niet lukt om vol te houden.
Een straf om jezelf in het ggareel te houden is wel nodig, maar een simpele boete wordt al snel vervelend.
Waarom worden mensen dik? Omdat ze de makkelijke, luie weg kiezen en via eten dopamine zoeken, een simpel gelukshormoon. Als gevolg daarvan maakt het voor mensen als wij, die moeite hebben met gewoontes vormen, toch niet uit hoe zwaar de straf is.
Ik overwoog ook dat het misschien beter zou zijn om het bedrag van de nalatigheid aan een goed doel te schenken, maar ik was er zeker van dat ik de app dan helemaal niet meer zou openen, zo streng zou ik mezelf dan straffen (lol).
De ontvanger van de 'luiheidsbelasting' is een eigen indexbeleggingsrekening.
Kortom: het is een boete, maar geen echte boete. Een boete voor jezelf.
Zelfs het schuldgevoel over het overslaan wordt zo omgezet in belegging voor je toekomstige zelf.
Waar ik extra veel aandacht aan heb besteed, is het 'belastingkortingssysteem' op basis van je maandelijkse voltooiingspercentage.
- "Bij een voltooiingspercentage van 90% of hoger: 50% belastingvrij"
- "Bij 80% of hoger: 25% belastingvrij"
worden toegepast.
Het scherm toont "Nog 1% te gaan, dan krijg je 25% korting!", en als je dat ziet, ontstaat er een vreemde motivatie: "Vandaag mag het ook op Lv2, maar ik zet door."
De grootste vijand van een gewoonte is het moment waarop je één dag overslaat, je reeks breekt en alles wilt opgeven.
Dankzij deze belastingregeling kun je echter stoppen met opgeven: "Ik heb een dag overgeslagen, maar ik heb nog steeds een kans op belastingvoordeel!"
Een vriendelijk ontwerp dat volledig aansluit bij de luie kant van jezelf en je niet laat opgeven na één misstap.
✨ Huidverzorgingstracker & 💊 Medicijnbeheer: geen app-gewissel meer
✨ De huidverzorgingscheck die we altijd al wilden
Gewoonten, medicijnen, huishoudboekje... Voor iemand die het liefst zo min mogelijk moeite doet, is het beheren ervan in aparte apps het toppunt van gedoe. Om dit "heen-en-weer-gewissel tussen apps" te elimineren, hebben we de dagelijkse huidverzorging en gezondheidsbeheer volledig geïntegreerd in dit cockpit.
Omdat we de functies van de gewoontenapp direct konden hergebruiken, was de implementatie eenvoudig.
🧴 Een "huidverzorgingstracker" die ook accepteert dat je het op sommige dagen niet redt
Huidverzorging is ook een gewoonte. Wanneer je het scherm opent, vraagt het "Hoe ver ben je gekomen?" en vind je een stappenplan van vijf niveaus.
Op dagen dat je uitgeput thuiskomt, is "Lv1: alleen wassen (met water of een reinigingsmiddel)" prima. Heb je nog wat energie over, dan kun je "Lv2: minimale verzorging (wassen + toner)" of "Lv3: basisverzorging (+ emulsie)" kiezen, en op speciale dagen "Lv4: uitgebreide verzorging", inclusief serum. Zo kun je elke dag registreren op basis van hoe je je op dat moment voelt.
Bovendien kun je de namen van elk niveau en de bijbehorende verzorgingsstappen (beschrijvingen) aanpassen via "Stapinstellingen". Bovenaan het scherm zie je onder andere je "gemiddelde Lv deze maand" en het aantal dagen achter elkaar op Lv3 of hoger. Zo blijf je gemotiveerd zonder jezelf onder druk te zetten: "Ik was de laatste tijd moe en deed alleen Lv1, dus vandaag ga ik voor Lv3."
💊 Medicijnbeheer dat je helpt om het bij te houden
Persoonlijk vind ik medicijnen het lastigst om consequent bij te houden.
In deze app kun je niet alleen de naam van een medicijn invoeren, maar ook gedetailleerd en flexibel registreren wanneer je het inneemt: "ochtend, middag of avond", instructies zoals "voor, na of naar believen het eten", het aantal tabletten per moment, en zelfs complexe schema's zoals "dagelijks, om de dag of op vaste weekdagen".
Als er nog medicijnen open staan, verschijnt bovenaan het scherm een opvallende rode waarschuwing: "⚠️ Je hebt medicijnen die je nog niet hebt ingenomen. Controleer dit alstublieft." Zo word je er zelf even aan herinnerd.
Onderaan het scherm zie je ook concrete cijfers, zoals het "innamepercentage deze maand" en het "aantal gemiste doses" (in het testscherm tijdens de ontwikkeling stond het innamepercentage op 5%, een eerlijk beeld van mijn eigen slordigheid haha).
Maak je je geen zorgen.
Ben je een dag vergeten in te nemen, dan kun je dat achteraf nog vastleggen via de kalender. Met dit "achteraf registreren"-ontwerp kun je volhouden zonder perfectionistisch te worden, in je eigen tempo.
Naarmate je ouder wordt, gebruik je vaak meer medicijnen, dus deze functie is erg handig. Bovendien kan ik de informatie over eerder gebruikte medicijnen delen met de arts wanneer ik op consult ga, wat erg prettig is (ik ben namelijk iemand die zijn medicijnpaspoort snel vergeet).
🍺 Drinkentracker: een geweldige functie die je motivatie voor gezondheid en besparen enorm een boost geeft
En wat mijn eigen leven het meest heeft veranderd, is deze functie voor het bijhouden van drinkmomenten.
Het gaat niet alleen om het bijhouden van wat je hebt gedronken. Ik heb ook een aantal slimme elementen toegevoegd om je maandelijkse limiet voor drinkmomenten (bijvoorbeeld "maximaal 4 keer per maand") en je budget te beheren, en om de dagelijkse "kleine inspanningen" om te zien in visuele beloningen.
🍵 Eén tik, klinkende munten: spaarpot voor niet-drinken
In het dagelijks leven
"Vandaag ga ik thuis niet drinken"
Als je die dag je zelfbeheersing weet te bewaren, tik je op het startscherm gewoon op de schakelaar "Vandaag niet gedronken".
Alleen al daarmee verschijnt er een groen markeringsteken in je agenda en wordt er € 5,00 aan je spaarpot voor niet-drinken toegevoegd, met een klinkend geluid.
Elke kleine beheersing telt zo op tot een bedrag. Naarmate de maand ten einde loopt, krijg je dan het vreemde gevoel van prestatie en de dopamine-kick van "Deze maand heb ik al € 30,00 bespaard door niet te drinken (6 dagen)!"
Dit extra geld kun je vervolgens investeren of op de spaarrekening zetten.
Als je ervaart dat je door het matigen van je drinken andere voordelen krijgt, zoals het kunnen betalen van dingen die je graag wilt hebben uit het geld dat je bespaart, dan blijf je waarschijnlijk langer stoppen met drinken of minder drinken.
🛡️ "Anti-Dronken-Modus" om jezelf in de hand te houden tijdens een feestje
Het troeftroef van deze app is de "Anti-Dronken-Modus". Zodra het feestje begint, zet je deze modus aan. Vervolgens verschijnt er in het midden van het scherm een aftellen naar je vooraf ingestelde "doeltijd om thuis te zijn". Mocht je denken "Vandaag is het zo gezellig, ik blijf nog even!", dan kun je via de knop "Thuiskomsttijd aanpassen" of "🎉 Nog een tweede ronde!" flexibel extra tijd toevoegen. Een ontwerp dat rekening houdt met de luie kant van jezelf.
Bovendien staan er op het scherm tellers voor het aantal glazen: "🍺 Alcohol", "🥤 Fris" en "💧 Water". De app beoordeelt je tempo in realtime, bijvoorbeeld "per 2 glazen alcohol 1 glas fris", en de meter geeft "OK" in groen aan. Zo kun je de kater van de volgende ochtend en het "Waarom heb ik toch zoveel gedronken..."-gevoel flink verminderen.
📊 Nog veel meer handige functies voor feestjes
Na afloop van een feestje kun je de naam van de zaak, zoals "Torikizoku Shibuya", het werkelijke bedrag dat is betaald en notities over de mensen met wie je was, invoeren. Daarnaast hebben we een functie toegevoegd waarmee de informatie automatisch wordt ingevuld zodra je een Google Maps-URL invoert. Omdat dit slechts enkele keren per maand gebeurt, heeft een AI ons verteld dat de API-koppeling geen extra kosten met zich meebrengt, dus hebben we het geïmplementeerd.
Omdat je tijdens een feestje soms vergeet af te rekenen, hebben we ook een functie toegevoegd die dient als notitie voor het verrekenen van kosten.
Er hoeft niet meer gediscussieerd te worden over wie wat heeft betaald, en dat is erg prettig.
Aan het einde van de maand wordt in het "Maandrapport" het "Totaal bespaard" zichtbaar gemaakt, waarin het "Spaargeld voor minder drinken" (het aantal dagen dat je geen avondborrel hebt gedronken) en het verschil tussen je feestbudget en het werkelijke bedrag (het geld dat je hebt bespaard op feestjes) worden opgeteld. Zo zie je bijvoorbeeld in één oogopslag "Deze maand heb je in totaal 9.000 yen bespaard!", en dat maakt het enthousiast om te denken: "Met dit geld koop ik misschien die gadget waar ik al zo lang naar verlang." Een favoriete functie waarmee je zowel gezondheid als geld in de hand houdt.
2. Na het ontwikkelen: Claude was de beste "vertaalmachine" voor ontwerpers
Zo is de app tot stand gekomen, met al mijn luiheid en eigenzinnigheid erin verwerkt. Dat ik als beginner met programmeren zover ben gekomen, is vooral te danken aan mijn maatje Claude.
Engineers zouden waarschijnlijk vragen of ik wel goed bij mijn hoofd ben, maar ik heb dit keer voor een puur brute aanpak gekozen: alle HTML, CSS en JavaScript in één enkel bestand, index.html. Voor mij en Claude is dat juist de perfecte keuze.
Als bestanden over meerdere documenten verspreid zijn, kost het al snel moeite om duidelijk aan te geven welke bestanden en regels aangepast moeten worden. Met één bestand plak ik de volledige code gewoon in de chat, en Claude begrijpt direct het geheel.
Claude vertaalt mijn vage ideeën over hoe iets zich moet gedragen naar mooie code. Soms crashte de hele app door een verkeerd gesloten tag of een fout in de volgorde waarin JavaScript werd geladen, en dan speurden we midden in de nacht samen door de foutlogs. Dat was ook een trouwe, maar wel vermoeiende ervaring. Toch was het leuk, een beetje als een buddyfilm (lacht).
Ook de koppeling met GitHub en Cloudflare ging ontzettend snel. Claude legde in de chat uit hoe je een account aanmaakt en plaatste direct de link naar de officiële website, waardoor ik de integratie in een mum van tijd voor elkaar had.
3. De volgende hoge muur: ontwerp en de diepten van beveiliging
Met hulp van Claude heb ik nu een geweldig speeltje (de app) waarin zowel het uiterlijk als de beweging precies is zoals ik het wilde.
...maar hier doet zich een nieuw probleem voor.
Terwijl ik dit cockpit dagelijks gebruikte, kwam ik plotseling tot bezinning. Wacht even, in deze app staan mijn echte gezondheidsgegevens, dagelijkse medicijninformatie, recente huishoudboekjes en zelfs de lijst van taken die ik heb laten liggen, allemaal bij elkaar. Het is een en al onbeschermde privacy. Dat besefte ik ineens.
Momenteel heb ik het scherm vergrendeld met een eenvoudige pincode, maar eerlijk gezegd ben ik op het gebied van beveiliging volledig een leek. Met alleen de kennis van mezelf en AI die ik nu heb, kan ik mijn belangrijke gegevens er niet met een gerust hart aan toevertrouwen.
Als ontwerper maak je met zorg een 'prettige ervaring', en daarom hoort het gevoel van veiligheid, dat ervoor zorgt dat niets lekt of wordt doorbroken, ook tot het belangrijkste onderdeel.
"Ik wil het toch graag met Face ID op mijn telefoon of met de nieuwste Passkeys (Passkeys) veilig en slim openen, zodat alleen ik er bij kan!"
Dat dacht ik, maar beveiliging is een zeer specialistisch vakgebied dat niet zomaar even te regelen is.
Dit is voor mij echt te veel...
Ik wil hier zorgvuldig te werk gaan en dit bespreken met een engineer.
Later wil ik ook een huishoudboekje-tool toevoegen, zodat je alleen je creditcardafschriften hoeft te uploaden en de uitgaven automatisch worden bijgehouden. Vanwege mijn zorgen over de beveiliging heb ik dit voorlopig even on hold gezet.
Conclusie
De gereedschappen zijn compleet. Nu wil ik 'veiligheid' gaan bouwen!
Een idee dat ik alleen maar in mijn hoofd koesterde omdat ik dacht "ik heb geen ontwikkelkennis", is dankzij AI, mijn perfecte partner, nu echt tot leven gekomen en een tool geworden die mijn dagelijks leven verandert. Ik hoef mezelf niet meer te verwijten dat ik niet alles perfect doe; door een kleine "luiheidsbelasting" te betalen, kan ik het steeds opnieuw proberen. Dankzij dit vriendelijke systeem, en als iemand die vroeger al na drie dagen opgaf, houd ik nu met plezier mijn gewoonten vol.
Maar hoe handiger het wordt, hoe groter de verantwoordelijkheid om het te beschermen.
Hoewel dit niet in het artikel staat, voegen we ook geleidelijk meldingen en huishoudboekfuncties toe.
Huishoudboekbeheer moet echter zorgvuldig worden aangepakt vanwege beveiligingsoverwegingen, dus die functie wordt nog in de ontwikkelomgeving gebouwd.
Daarom: blijf de volgende update zeker in de gaten houden!
UI-ontwerp verandert elke dag! Ik denk na over hoe we toegankelijkheid kunnen verwerken in landingspagina-ontwerp. Ik heb me de laatste tijd wat minder met markup bezig gehouden en vraag me af: moet ik mijn JavaScript-kennis ook verder ontwikkelen? Ik ben dol op Takumi Kitamura!
Hasshi
Webdesigner / in dienst sinds 2018 / in hart en nieren nog steeds een beginnende designer