University of Notre Dame  ·  App Concept

BLOKD

Digital Media Design  ·  Fall 2023

BLOKD is a productivity-enhancing app designed to help individuals remain focused, boost productivity, and manage their time more effectively using the Pomodoro Technique. With BLOKD, users work for intervals of time with short breaks in between — and after longer periods of sustained focus, take longer breaks. The app integrates with all major calendars and can be tailored to personal preferences like custom work and break intervals.

Brand Identity Project Scoping Prototyping
BLOKD app mockup

01 / Brainstorming — Features & Characteristics

Features

Timer

Keeps track of work and break times throughout each session.

Cadence

Enables users to adjust and personalize work and break intervals.

Calendar Integration

Integrates with all major calendar applications.

Notifications

Motivational messages, emergency alerts, and upcoming session reminders.

Lockdown

Restricts the ability to exit BLOKD mid-session to prevent distraction.

Override

Allows important emails, calls, and texts through during lockdown.

Ability to Schedule

Schedule BLOKD sessions in advance within your calendar.

Characteristics

Easy-to-use and consistent UI

Intuitive UX

Fast loading time with no lag

Cross-device functionality

02 / FigJam Flowchart

BLOKD user journey flow

03 / Low-Fidelity Wireframing

Low-Fidelity Wireframing

Wireframes established the information architecture and core interaction patterns for both phone and watch before any visual design decisions were made.

Phone

Phone wireframe — Main Day View
Phone wireframe — Main Month View
Phone wireframe — Login Page

Watch

Watch wireframe — Reschedule
Watch wireframe — Timer Start
Watch wireframe — Detailed Reschedule

04 / Branding — Color

Color Palette

A dark base with bold accent colors mapping to calendar states — busy, available, and active BLOKD sessions.

#212227

Dark Gray

#EAEBED

Light Gray

Accent Colors

#246EB9

Blue

#5A9367

Green

#DA7635

Orange

04 / Branding — Typography

Typography

Inter's geometric structure carries confidence and clarity across all four weight levels.

Header

Inter Black

900 weight  ·  Headers, wordmark

Subheader

Inter Bold

700 weight  ·  Section titles

Body

Inter Medium

500 weight  ·  Descriptions

Caption

Inter Regular

400 weight  ·  Timestamps, meta

05 / High Fidelity Prototype

High Fidelity Prototype

The high fidelity prototype united the wireframes and brand identity into a fully realized product — dark UI with color-coded calendar blocks communicating schedule status at a glance across phone and watch.

Phone — Home & Main Screens

Hi-fi phone screens

Watch — Home & Main Screens

Hi-fi watch screens

06 / User Flows

User Flows

Login (Phone)

Login flow — phone

Start a spontaneous BLOKD time (Watch / Phone)

Start spontaneous session — watch
Start spontaneous session — phone

Set up a BLOKD time (Watch / Phone)

Set up BLOKD time — watch
Set up BLOKD time — phone

07 / Figma Prototypes

08 / Summary

With BLOKD, users have a productivity enhancing companion that seamlessly integrates the proven Pomodoro Technique into their routine. By combining focused work intervals with breaks, the app optimizes time management and improves productivity. With its user-friendly interface and customizable features, BLOKD provides a tailored experience and syncs effortlessly with all calendars.

BLOKD summary