Three final interface designs show how Tend separates daily action, progress review and reflection. Each detail below connects a visible design choice to its purpose.
UI/UX Design · SwiftUI Habit Tracker
Tend
Habit Tracker
Product design · Native iOS build · App Store prep
Self-initiated product
I designed and built a calm habit tracker, from browser prototype to native SwiftUI flows for habits, reminders and journaling.
Design authorship note: The product direction, interface decisions, visual system, and final design choices are mine. Parts of the build and prototype were vibe-coded with AI as a development collaborator.
Project decisions & details
Challenge
Build a habit tracker that feels calm, not gamified or guilt-driven — and ship it for real.
Outcome
A working native iOS product with persistent habits, onboarding, themes, journaling, and local reminders.
- Audience
- Habit builders seeking a low-pressure daily routine
- Build
- Native SwiftUI app with SwiftData persistence and local notifications
- Deliverables
- Onboarding, home, calendar, journal, reminders, three themes, and App Store-ready launch assets
- Build proof
- Working Xcode build; habits and journal entries persist across relaunches; reminders schedule locally
A calmer daily loop
Check in
The progress ring and habit list share one view. A filled lavender row distinguishes a completed habit, while the weekly strip keeps the selected day visible.
Look for the completed row
Review the month
The month grid sits above a daily summary. Selecting a date has a clear place to show that day’s habit progress without crowding the calendar itself.
Look for the summary below the dates
Make room to reflect
A short prompt leads into an open writing area. Reflection has its own screen, giving the writing space a quieter hierarchy than the habit list.
Look for the open writing areaInterface details cropped from the existing final design plates. Select an image to view its complete presentation.
02 / Explore the earlier design snapshots
The early Home snapshot establishes the habit list and lavender progress ring. Compare it with the final Home detail above: the weekly strip and filled completion state make the selected day and completed habit more explicit.
These process snapshots document the design direction; the native implementation is described separately below.
Minimal Habit Home
Zen Launch Animation
Calendar + Journal
Themes + Pro
Product Flows
SwiftUI Foundation
Problem
Most habit apps make progress visible, but many make failure louder than recovery. Tend was shaped around a softer product question: how can a tracker preserve accountability while making missed days feel recoverable?
The answer became a calm ritual system rather than a productivity dashboard. Tend focuses on small routines, quiet reminders, simple check-ins, and reflection, with progress framed as rhythm instead of perfection.
Product Flow
Prototype
A browser build tested the dashboard, date strip, calendar, journal, themes, reminders, Pro screen, and startup ripple animation.
Translate
The experience moved into SwiftUI with Home, Calendar, Journal, and Theme Studio views built as native screens.
Persist
Habit, completion, and journal data moved from snapshot storage to SwiftData so user progress survives relaunch.
Prepare
The project added onboarding, local notifications, StoreKit product planning, icon exports, and App Store material drafts.
Core Features
Implemented
Home habit tracker, weekly date strip, progress ring, add habit flow, habit completion toggles, calendar view, journal view, per-date habit and journal state, habit templates, habit detail editing, reminder settings, first-launch onboarding, and local notification scheduling.
Pro Direction
Tend Pro is planned as a one-time unlock instead of a subscription. The unlock expands the product with unlimited habits, full history, premium themes, widgets, export, and advanced reflections.
Visual System
Colour
The base direction is gentle and minimal: off-white surfaces, lavender accents, and a leaf landing on water ripples for the app icon. Theme explorations extended the system into Matcha and Moon, while a Waves direction was tested and removed.
Type
Small wins compound.
Native Build
The SwiftUI project was organized into App, Models, Views, Components, Design, Services, Assets, and Configuration folders. Reusable pieces include ProgressRing, WeekStrip, HabitRow, TendCard, TendChip, TendPrimaryButton, LaunchRippleView, sheet components, section headers, and empty states.
SwiftData models cover habits, habit completions, and journal entries. AppState now keeps only lightweight UI preferences such as selected date, active page, theme, reminder time, Pro unlock state, onboarding completion, and reminder enablement.
Build issues were resolved along the way: old model conflicts were removed, HabitFrequency was renamed to TendHabitFrequency, iOS-only modifiers were wrapped with platform checks, Combine imports were added where needed, and newer onChange syntax was adopted. The simulator build now runs and retains data after relaunch.
UX Writing
The notification language was written to feel like a gentle invitation rather than a demand. Example lines include “A small moment for Tend,” “Pause, breathe, check in,” “A little progress counts,” and “Come back to your rhythm.”
A habit app should make returning easier than quitting.
Launch Prep
App Store materials were drafted alongside the build, including app-store copy, a privacy policy draft, an icon install guide, and StoreKit local testing notes. The current product ID for the one-time unlock is tend.pro.unlock.
The next steps are to add the final AppIcon.appiconset into Xcode, test onboarding from a clean install, verify notification scheduling on simulator or device, add local StoreKit configuration, continue polishing Calendar, Journal, and sheet views, then prepare for TestFlight.
Reflection
Tend became more than a visual concept. It moved through product definition, prototype testing, native implementation, data persistence, notification design, monetization planning, and store-readiness tasks.
The strongest lesson was that calm design is not just a palette. It shows up in the data model, the reminder copy, the recovery states, and the way the product behaves when someone misses a day. Tend is structured, but not severe; motivating, but not loud; designed to help a user keep going without making the app the centre of their day.