CASE STUDY: Breaking paradigms of online chat rooms
Passion project, Remote
March 2020 - April 2020

Breaking paradigms of online chat rooms

Show me the work ↓

The short version

  • Role: Product direction with Alex Urbano and Phil Cummins; research, identity, UI and frontend components.
  • Problem: Online chat felt either overwhelming, impersonal or too much effort to join.
  • Decision: Small text-only rooms, a name to enter, and messages streamed as people type.
  • Result: A soft launch on Reddit gave us encouraging feedback on live typing. The full design was not implemented.

Watch the live-typing experiment

This recording shows the real prototype: people see a message taking shape instead of waiting for someone to press send.

The participant’s route

Join a small conversation and see it take shape.

A live-typing prototype; the complete UI design was not implemented.

  1. Enter a name

    How much setup is there?

    Require only a name to join.

  2. Join a room

    Who am I talking with?

    Keep rooms text-only, with a limit of ten people.

    View the evidence

  3. Type together

    What is the other person saying?

    Stream the message as it is written, without waiting for Send.

Conversation rule: messages disappear once everyone who saw them has left. The video above shows the working prototype; the linked room image is a design screen.

Tiny big detail

Your colour, in either theme.

The colour you choose adjusts to the theme, keeping your name readable on light and dark backgrounds.

The colour-readability helper on dark and light backgrounds.View full screen
The colour-readability helper on dark and light backgrounds.

01 / Live typing

Let people see the conversation take shape.

One identity, two themes

Dotdot desktop chat design in dark mode Dotdot mobile chat design in light mode
Decisions, process and lessons

Make the constraint the experience

We limited rooms to ten people and required only a name to join. Messages disappear once everyone who saw them leaves. Streaming text emerged from a WebSocket experiment and became the core interaction.

Design and frontend together

I designed the identity, screens and frontend components with React and Storybook. User-selected colours needed to work in both themes, so I wrote a readability helper using the third-party pSBC colour library.

User-selected colours adjusted for legibility on light and dark backgrounds

What I would revisit

Mobile browser behaviour made the chat harder to use than the desktop version. That needs more work, alongside infrastructure for scale. The strongest lesson was letting a technical experiment influence the product direction.

Role, tools & collaborators

Responsibilities

  • Discovery
  • Identity design
  • UI design
  • Frontend components

Tools

  • Sketch
  • Notion
  • VSCode

Tech

  • React
  • Storybook
  • AWS + CI
  • Github Pages

Credits

  • Alex Urbano for frontend, backend development and co-product direction
  • Phil Cummins for backend development and co-product direction
← Back to work

A closer look

Access granted.

You can now explore the private projects alongside the rest of my work. No extra steps between case studies.

Access stays in this tab until the session expires. You can lock it at any time using Private access.