Zihe Huang
Architecture · HCI · AI
Contact
← Product design

Kumi

One glance tells you what’s next.

The deadlines, events and messages spread across your apps, ordered by when they’re due.

Interactive prototype. The screens use sample data; real account connections are next.

Role
Product designer
Type
Web · Wallpaper · Phone
Duration
3 weeks
Year
2026
Built with
Figma for the design, Claude Code for the code
The intro redraws real app icons with Kumi’s K. Kumi is a portfolio concept, not affiliated with these apps.

At a glance

One board for the things you would otherwise check app by app.

  • One list across apps.

    Deadlines, events and replies together, ordered by when they are due.

  • Colour-coded with meaning.

    The hue tells you the kind. The amount of colour tells you the urgency.

  • A dashboard you customise.

    A window beside your work, with more detail as you make it larger.

01 Problem

A day spread across a dozen apps.

Canvas student desktop Dashboard with course cards, a To Do list, upcoming deadlines and recent feedback.

CanvasCoursework and deadlines

Gmail inbox showing messages and the application sidebar.

GmailMessages and replies

Google Calendar showing a week view and event editor.

Google CalendarEvents and schedules

Todoist Windows desktop Today view with a project sidebar, scheduled tasks and due times.

TodoistTasks and reminders

A student’s schedule, deadlines and messages live in different places. Knowing what is next means opening each app, and moving what is due into a calendar or to-do list by hand.

Kumi starts with that round of checking: the information already exists, but it is not together.

  1. Too many places to check.

    The calendar, inbox and course tools each hold a different part of the day.

  2. Switching just to get a picture.

    Understanding what is next means opening those apps one after another.

  3. Organizing the same information again.

    Deadlines get copied into another calendar or list.

02 Solution

One small window. Five ways to make the day clearer.

01

Needs you now, colour-coded with meaning.

Kumi’s board: Needs you now on the left, with the next event and supporting widgets on the right.
The strongest colour is reserved for what needs attention now.

Deadlines, events, replies and reminders sit in one list, soonest first. Kind is shown by a colour, icon and word; urgency changes how much colour an item carries. Done, Snooze and Dismiss come with Undo.

  • ClassCanvas, Todoist, deadlines
  • TimeCalendar, Zoom, gym bookings
  • PeopleGmail, iMessage, Slack
  • BodyHealth, gym, Grubhub
  • YoursYour notes and trackers
  • ToolsClaude, GitHub, Notion
  • NowSolid, outlined, a hard shadow
  • SoonA soft tint and a coloured edge
  • LaterPlain paper and a dot
02

A dashboard you customise.

Edit layout turns the board into a grid of open cells. Drag a widget to a new place, or pull its corner to make it larger or smaller, and the rest of the board moves out of the way. A widget shows more as it grows, and every drag also has a one-click or keyboard alternative.

03

One small window, any size.

Three sizes, each in landscape or portrait, and a wallpaper that fills the screen. Widgets show more detail as the window grows; at their smallest, they keep only the app, one number and a few words. Smaller still, Kumi can float just the next thing: one card that stays on top of every other window, in the same colours as the board.

The same inbox, from a glance to the whole list.

  • The Inbox widget at 1 by 1: the Gmail icon, 3, to reply.1 × 1 · a glance
  • At 2 by 1: Inbox, 3, to reply, with the first one beside it: Prof. Lin, about an extension for problem set 4.2 × 1 · a tile
  • At 2 by 2: Inbox, sorted. Needs a reply, 3: the first two, Prof. Lin about an extension for problem set 4 and Maya asking to swap crit slots. Sorted by AI, 14 updates hidden.2 × 2 · who's first
  • At 3 by 3: Inbox, sorted. Needs a reply, 3: Prof. Lin about an extension for problem set 4, Maya asking to swap crit slots, and the Career Center about a mock interview. Worth reading, 2: the HCII Office on spring registration. Sorted by AI, 14 updates hidden.3 × 3 · the whole list
04

Widgets from the apps you use.

Each app brings its own widgets. On Connected apps, connecting one puts its main widget on the board, and the rest are listed under it. The Widgets page holds only what Kumi makes itself, the widgets that need no app: a chart, a tracker, a notice, a timer, a countdown, a world clock, a checklist and a quick note. The two pages never offer the same widget. Connections are designed to be read-only; the prototype uses sample data.

Each app brings its widgets.

Kumi’s own widgets, for everything else.

How each app would connect

  • Sign in, read-onlyGoogle CalendarGmailSlackGitHubTodoistZoom
  • A feed or a tokenCanvasNotionTrelloOutlook CalendarAirtableAsana
  • Through your emailLinkedInHandshakeIndeedGlassdoorEventbriteCalendly
  • A small helperiMessage · MacApple Health · ShortcutApple RemindersApple CalendarChrome · extension
  • Open data or typed inWeatherOpenGymGrubhubClaudeChatGPTTransit schedules

Example connections, not live integrations. Availability and permissions vary by app.

05

A calendar that fills itself.

What is due sits under each day, in its colour. Events stay quieter below it. The design brings the same items from the board into a week view, without entering them a second time.

Kumi's calendar for the week of October 12, on Wednesday the 14th at 1:18 pm. Under each day, a row of what's due: Monday just says 2 done; on Tuesday Lab write-up 3 is solid red because it's a day late; today a gym slot to book within the hour is solid green, a reply to Maya and Problem set 4 are tinted because they're due today, and one thing is done; the days ahead list a library return, a persona draft, an RSVP, a reading response, Mom's birthday and a research plan, uncoloured except for their icons, and Sunday is nearly free. Below, classes, lunches and meetings sit quietly with a thin colour bar, the 2 pm crit highlighted because it starts within the hour, and a red line at now.

Designed with access in mind.

Kumi targets WCAG 2.2 AA, with keyboard operation, measured contrast in both themes, tables alongside charts, and Undo messages that do not time out. Automated tests check every page against it in light and dark, at desktop, tablet and phone sizes; a screen-reader pass and testing with people are still next steps.

03 Process

Shaped by what didn’t work.

Three explorations behind the current design.

  • 01

    From a full screen to a window.

    The full-screen dashboard became a compact window beside your work.

    The first version: a full-screen dashboard in a sage and cream matcha theme, with a greeting, an icon rail and wide widgets.
    The current Kumi window.
  • 02

    One colour system, three styles.

    Gummy kept the warmth while giving urgent items the strongest emphasis.

    Direction A, Sticker: cream paper, ink outlines and hard offset shadows.
    A. Sticker
    Direction B, Poster: no outlines, the most urgent widget floods with colour, giant numbers.
    B. Poster
    Direction C, Gummy: same-hue gradients and a soft highlight on urgent items only.
    C. Gummy, picked
  • 03

    Recognizable app icons.

    Kumi’s K takes each app’s shape, replacing the earlier abstract textures.

    Thirty-three app icons redrawn with Kumi's K in place of each app's symbol: Gmail, Google Calendar, Claude, Canvas, Slack, Notion, Zoom, Figma, Discord and more.

04 Reflection

What I’m taking forward.

A glance starts with what is left out.

The move from a full screen to a small window made the hierarchy more important. Each widget needs a useful smallest version, not a miniature of everything.

Colour needs a consistent meaning.

Kind and urgency do different jobs. Keeping that rule across the board, calendar and smaller widgets gives the colour a purpose.

Next steps

  1. 01Connect real accounts.

    Every app runs on realistic sample data for now. Next is sign-in and the real connections; iMessage, Grubhub and LinkedIn have no public API, so the Sources page says how each one would connect.

  2. 02Test with students.

    A week of real use with a few students, to see whether one glance really replaces the round of apps.

  3. 03A screen reader pass.

    A full pass with NVDA, then testing with people who use assistive technology every day.

Image credits

Reference screenshots: Canvas by Instructure; Gmail and Google Calendar by Google; Todoist by Todoist. Canvas guide screenshot licensed under CC BY-NC-SA 4.0. Preview crops use a common frame; select an image to see its full screenshot. Product names and screenshots belong to their respective owners; no endorsement is implied.