5 UI/UX Lessons from TimeSpent’s Activity Dashboard - timespent UI Breakdown

timespent
timespentActivity Dashboard
Activity Dashboard
Visual Hierarchy

Smart Horizontal Calendar

The compact horizontal calendar saves space while keeping the layout clean. Clear visual hierarchy makes today’s date stand out with full-sun icons and darker contrast, while past dates fade subtly, a simple yet effective distinction.

Smart Horizontal Calendar
Contextual Design

Habit-Forming Reminder Card

The “Get notified, stay inspired” card introduces a new feature in a way that drives engagement without breaking focus. It teaches designers how to promote features contextually while giving users control to dismiss distractions.

Habit-Forming Reminder Card
Consistency

Action-Oriented Activity Cards

Each card under “Plan” is visually inviting, touch-friendly, and consistent. The icons, slight elevation, and clear labels guide users toward interaction naturally, with no guesswork, just intuitive action.

Action-Oriented Activity Cards
Minimalism

Floating Bottom Navigation

Using a floating navbar keeps the interface spacious and uncluttered. It subtly prioritizes main content, allowing activities and stats to take visual focus while navigation remains easily accessible.

Floating Bottom Navigation
WhitespaceMinimalism

Calm Visual Hierarchy and Whitespace

Ample whitespace, minimal color palette, and consistent icon style give the UI a calm, intentional rhythm. It’s a reminder that reducing noise isn’t about removing elements, it’s about directing attention where it matters most.

Calm Visual Hierarchy and Whitespace
Get UI breakdowns like this delivered to your inbox every week
FreeNo SpamReal ValueEvery Tuesday