Discord Whiteboard

Context: We built a collaborative whiteboard right inside Discord. You can use tools to draw, write text, add images, upload images, add shapes, and search for and post GIFs and Stickers! Boards are saved automatically, so you can come back to your creations over and over again over multiple sessions.

My Role: I got to lead the design of this project from 0-1, working with a small group of engineers to build, experiment and ship this to all Discord users. I was the only designer on the project and worked with only a couple of engineers and a PM to bring this to life.

"This experience should feel native, not 3rd party and ultimately aim to become something that can continue to live inside your space, like a notebook on a nightstand or a cork board in a classroom"

Principles

Fun First: inspire playfulness, add delight through subtle animation and attention to detail, aim to exceed expectations. 

Familiar: we should pull inspiration from things our demographic uses daily—iMessage, Snapchat, Instagram, etc. Use gestural interactions over clunky navigation, create smooth transitions that feel native, don’t let the UI distract or get in the way of the act of creating.

Social Utility: this is a utility for social interaction. When we think of features we should think of them as a means of personal expression and creating stored value within a space.

Early Prototyping

With this project we took a very iterative approach to design, build a primitive prototype then iterate based on how it felt. We made a lot of assumptions based on other similar tools we use then found ways to improve. Here's some of the first interaction prototypes I made in Figma to give our engineers a starting point.

We started out with just GIF, Draw and Text tools. I wanted the toolbar to transition seamlessly between each tool using a morph animation.

Early Interaction Design

Initial interaction designs were pretty standard as we wanted to match user expectations around how to move, rotate and scale objects on the board.

Desktop interactions including drag, rotate and right click to show context menu that allows you to delete the object and order it. We added a drop shadow to the object once it was selected and a blue border with grab handles on each corner for scaling and rotating it.

Mobile is also what you would expect for the most part—drag, two finger rotate and long-press to bring up the context menu. We also added a drag to trashcan as well.

A a brilliant little detail one of our engineers, Anthony, added during early prototyping was scaling the other live cursors based on how far away from the you are. So as you navigate around the board the other cursors that are farther away pin to the sides of the canvas and scale down or up based on how close or far away from them you are.

Mobile Design

Since this was an internal Discord branded project we were able to borrow some of elements of the Discord Design System like font and colors while remianing flexible on the types of interactions and layouts needed for creativity. We also aimed to make the tools as scalable as possible if we needed to add more features to a tool like adding brushes to the drawing tool or shape frames to images. We also made big improvements to the interactions through iteration such as one finger dragging, scaling and rotating that makes placing objects really easy.

Desktop Design

We wanted to keep the layout and navigation very much the same across platforms but tailored the interaction design around how people use desktop. I wanted the toolbar to feel fluid and be the central destination for both using tools and editing objects. We replaced auto-placing with stamping for things like Stickies and Shapes. And we have things like multi-select for positioning and reporting.

Generative AI Concept

We were working on this at the height of the AI craze in 2022. So we started thiniing about how we might integrate AI into this tool to help people visualize their ideas. We never actually shipped this feature but had fun prototyping it.

Thanks for viewing!

Start using Whiteboard on Discord now by going to the App Directory.