Zihe Huang
Architecture · HCI · AI
Contact
← Product design

Kumi

A dashboard for your entire day.

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 · Claude Code
It’s a concept piece for this portfolio, not an advertisement.

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 you can read.

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

  • Small enough to stay open.

    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. Six ways to make the day clearer.

01

Needs you now, in colours that mean something.

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 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.
03

One small window, any size.

Three sizes, each in landscape or portrait. Widgets move and resize on a grid, showing more detail as they grow. At their smallest, they keep only the app, one number and a few words. Every drag also has a one-click or keyboard alternative.

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.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.

Nineteen widgets in seven groups, each with a preview. The Sources page explains what each app would contribute and how it would connect. Connections are designed to be read-only; the prototype uses sample data.

Choose what belongs on your board.

See where the information comes from.

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

Your own notes, when they matter.

A reminder can stay out of the way until the date you choose. Then it joins Needs you now alongside your other deadlines. Marking it done removes it from the list and calendar, with Undo available.

Your notes: Mom's birthday and Return library books earlier this week; Dentist tomorrow at 4:30 pm, bring the insurance card, shown 3 days before; Statistics midterm in 7 days, formula sheet allowed, due soon.
  1. 01Write it

    Dentist, Saturday 4:30 pm. Bring the insurance card.

  2. 02Hidden until it matters

    Show it 3 days before, so the board stays about now.

  3. 03Joins Needs you now

    In the week it’s due, sorted with every app’s deadlines.

  4. 04Done, with Undo

    Tick it off and it leaves the list and the calendar.

06

Wherever you look.

The same board as a read-only wallpaper, a dark window, or one column on a phone. The layouts change; the order and colour system stay familiar.

Wallpaper mode: Good afternoon, Alobi, with the time, then Needs you now across the left half, Next up, and the gym's week, Claude's usage, the weather and the sorted inbox across the whole screen.
Wallpaper
Kumi on a phone: Next up, then Needs you now and the small tiles in one column, with a bottom tab bar.
Phone
The Kumi board in its dark theme.
Dark
Kumi on a phone in its dark theme: warm charcoal cards, with Needs you now's rows in deep tints of their colours.
Phone, dark

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. The project reports 132 automated tests; 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.