Do you design for both iOS and Android?

Yes. We design a shared system that respects each platform's native conventions for navigation, typography and gestures, so the app feels correct on both rather than ported to one.

Do you also build the app or only design it?

We do both. Many clients take the design and hand it to their own engineers, and we also build production apps in React Native with a Supabase or Node.js backend.

How do you validate the design before development?

Interactive prototypes are tested with real users on real devices before any code is written, which is far cheaper than discovering the same navigation problem after the build.

Back to Portfolio

Design/Mobile Apps

Habit tracker

Habit tracker is a mobile app UI/UX design project from the Pixel2Tech mobile apps practice. We were brought in because onboarding asked for everything up front and lost a large share of users before the first useful moment. This page walks through the problem we were handed, how we approached it, and what changed as a result.

Brand: Habit Tracker
Practice: Design
Service: Mobile Apps
Year: 2025

The Work

What we designed for Habit Tracker

Deliverables

App UX
UI system
Prototype
Design handoff

The challenge

When the project started, onboarding asked for everything up front and lost a large share of users before the first useful moment.

Our approach

We defined a component library — buttons, sheets, states, empty states — so every screen behaves the same way.

The outcome

Time-to-first-action dropped to seconds, and first-session completion rose with it.

Screens designed: 58
Time to first action: −48%
Onboarding completion: +37%

How we delivered this mobile apps project

Step 01
User research and job mapping
We identified the single job a user opens the app to do, then mapped every screen against whether it helps or delays that job.
Step 02
Wireframes and prototypes
Low-fidelity flows were prototyped and tested before visual design, so navigation problems surfaced while they were still cheap to fix.
Step 03
UI system and screens
A component library covering buttons, sheets, form states, loading and empty states was built first, then screens were assembled from it for consistent behaviour throughout.
Step 04
Developer handoff
Handoff included spacing tokens, interaction specs, edge-case states and exportable assets, so engineering implements the design without reinterpreting it.

Technologies and tools used

The stack below was chosen for this engagement because it matched the scale of the work, the team that would maintain it afterwards, and the performance the brief required.

Figma
React Native
TypeScript
Design tokens
Interactive prototyping
Supabase
Accessibility (WCAG) review

Why this project matters

A documented UI system pays for itself across every future release, because engineering assembles new screens from existing parts instead of rebuilding patterns and re-litigating decisions each sprint.

If you are weighing up similar work, our services overview explains how we scope engagements, and about Pixel2Tech introduces the team who would run it.

Frequently asked questions

Do you design for both iOS and Android?: Yes. We design a shared system that respects each platform's native conventions for navigation, typography and gestures, so the app feels correct on both rather than ported to one.
Do you also build the app or only design it?: We do both. Many clients take the design and hand it to their own engineers, and we also build production apps in React Native with a Supabase or Node.js backend.
How do you validate the design before development?: Interactive prototypes are tested with real users on real devices before any code is written, which is far cheaper than discovering the same navigation problem after the build.