Work/Dawdle
Case Study

DawdleMobile

Role
Product Designer and Engineer
Timeline
2025
Type
Personal productivity app
Stack
React NativeExpoTypeScriptSupabase
Replica Model - View actual screenshots and case study details belowReplica Model Only
Today
27 Mar
+
Planned Tasks
WorkSync calendar
AdminSubmit report
06:00 AM
90m free
📅
Team standup
1:42 pm - 2:12 pm
Meeting
60m free
Review project proposal
3:12 pm - 4:12 pm
45m
60m free
📅
Client review
5:12 pm - 6:42 pm
Meeting
90m free
Finalize documentation
8:12 pm - 9:12 pm
1h
22:00 PM
Overview

A mobile workflow system for real daily planning

Dawdle was built to support real routines instead of idealized productivity systems. The app combines tasks, events, and calendar context so planning and execution happen in one place.

The product direction was shaped around reducing context switching and making it easier to decide what to do next, especially when plans change mid-day.

7-step
Guided task creation flow
2 views
Calendar and upcoming list modes
1 app
Tasks, events, and scheduling together
Problem

Most task apps separate planning from execution

Many productivity tools make users jump between disconnected screens for tasks, events, and priorities. That fragmentation creates friction and weakens consistency.

"The product should reduce decision fatigue, not create more of it with endless setup and context switching."

The goal here was to create one coordinated flow where date context, priorities, and scheduling decisions work together instead of competing for attention.

Design

Designing for daily clarity and momentum

The UX emphasizes guided input, progressive disclosure, and clear status feedback. Instead of forcing large forms, users move through structured steps with visible progress.

A dual-view layout supports both strategic planning (calendar context) and immediate action (upcoming list), helping users adapt without rebuilding their entire day.

Engineering

State and data flows built for consistency

Dawdle uses context providers and custom hooks to centralize auth, date state, tasks, and events. This keeps screen-level components focused on UI while behavior stays modular.

The architecture supports pull-to-refresh updates, predictable data access patterns, and a clear boundary between app logic and service-layer persistence.

Challenge

Task setup needed richer input than a single form while still feeling fast on mobile.

Solution

Implemented a multi-step wizard with clear progress indicators and compact, focused prompts for each decision.

Challenge

Users needed different planning modes depending on whether they were scheduling ahead or acting now.

Solution

Added complementary calendar and upcoming-list views with shared date context to maintain continuity across screens.

RN
React Native
Cross-platform mobile UI
Ex
Expo
Runtime and tooling
TS
TypeScript
Typed app architecture
SB
Supabase
Auth and data sync
Ctx
Context + Hooks
State management pattern
UX
Design system
Reusable mobile patterns
Lessons

Key takeaways

This project sharpened how I design and engineer around daily-use behavior instead of feature checklists.

01
Guided workflows outperform giant forms. Breaking complex input into focused steps improved flow clarity and reduced drop-off compared with all-at-once form patterns.
02
Date context should be global. Centralized date context made it easier to keep calendar and list views aligned without brittle prop chains.
03
Architecture should match product rhythm. Structuring logic around task and event lifecycles made feature additions faster and reduced coupling as the app evolved.