What is ClickUp?
ClickUp is a productivity and project management platform designed to help teams and individuals collaborate, document, and manage work efficiently. The platform provides a robust suite of tools, including task management, goal tracking, and an advanced document editor, allowing users to centralize their workflows in one place. By offering a flexible and customizable system, ClickUp empowers teams across industries to streamline their operations, improve productivity, and maintain transparency in their work processes.
Overview of Whiteboards 0-1 product design
Whiteboards are built for collaboration. Users can create Whiteboards to track sprint planning, brainstorm marketing collateral concepts, or help distributed teams work together. This story covers how we designed and built whole Whiteboards product with incredibly small, fast paced team, getting functional that became not only viable, but part of core Brand and what users know ClickUp for.
Early Phase
I was early solo designer in a team of several engineers, product manager and cross-squads stakeholders who'd consult us on related product areas which Whiteboards would be related to. Here the early on challenges and requirements we had at the start.
Build Fast
First version design took just a few months including discovery and research phase. It was important to get it ready for engineers since there were deadlines, related to coming LevelUp and series C raise announcements, where it would get one of the main highlights
Basement
FirstDesign system and defined UX patterns, flows and strategy was a must to get a solid basement, since the product would scale fast after proving it viability. It was critical to set it right, so product would be consistent to the ClickUp, and every decision made would be easy to replicate or adjust in following iterations.
Avoiding complexity
Since engineering resources were limited, designs wouldn't get built out fully, ofcourse. So we had to have very clear communication line of what's realistic to build first, so that design focus would be placed in areas that were the most important, first.
Kick-off and challenges
One of the biggest challenges was technology and resources. The product had to prove its viability so, team had to be rather small at early phase, to build the first production version.
Design process consisted of ideation phase, where it was mainly design driven at early phase. It was no rocket science at the basics since everyone understood that we had to have a basic set of board collaboration software toolset like using notes, shapes, arrows, texts, etc. We conducted constant internal as well as external interviews with users to understand, what would be the most important use cases to solve, and what features and UX aspects should be prioritised first, especially due to limited resources.
Nailing basics UX aspect of Whiteboards was very important - little details did really matter for the same reason of high bar of user expectations. We aimed at the level other best in class tools in the same area. Good part of it was the once, for example, UX of treating one object would be sorted out and polished, it could be scaled into dozens of other elements, with further adjustments. It also meant we couldn't take shots into a random design ideas and had to have a solid, defined UX line early on.
Stable journey & growth stage
Whiteboards was an obvious success in terms of direction and the user problem it targeted to solve - boost collaboration in teams. Also, it strongly resonated with ClickUp missions and why users came to ClickUp for - be more productive.
That was a confident product market fit 🍏
Of course, we didn't expect it to be a perfect at the start, and the following challenges were rather a milestones and known problems to solve.
First of all, performance was quite low. In fact it took around a year or so to get it right, so the response time would be smooth, across all browsers. Bugs were part of the problem, but with increased time invested in the product, Whiteboards got more and more mature and bug-free experience, especially now.
Good news is that Whiteboards drove the retention and revenue!
1. Statistics shown that users who try Whiteboards after signing up, tend to retain up to 2 times more than other users.
2. Whiteboards Paywall we designed for Whiteboards (since it was a paid plan over a certain limit), was the most converting paywall in ClickUp, ever.
So although design was moving much faster and didn't have Eng restrictions - it took a while to get it going on a good level, and from there Whiteboards got on a stable growth path, nailing deeper use cases, addressing existing users feedback and reiterating on it.
Features and use cases
Create and access Whiteboards
Whiteboards are collaborative work areas user can add at the every layer of ClickUp navigation hierarchy. Whiteboard can be a part of a view or - fully independent instance.
Whiteboard Creation from a template
When creating a Whiteboard, user can create it from an existing template. Templates are meant to be a productivity boost for starting creative process with a specific framework as a basement.
First layer click on an object, shape
Adding the same instance of object with on-hover plus icons around, in a direction of the iconSecond layer click, allowing to edit content and giving more options to interact with
Working with images
Imported images allow common manipulations like crop, selection of filling type or resizing.
Enabling power of ClicKUp ecosystem in Whiteboards
This is where magic starts to strike
While basics are super important, ability to allow various interactions and actions between simple objects and actual workspaces ecosystem would be a crushing feature. Everyone understood, that that's probably the biggest winning factor of Whiteboards to other board collaboration tools, which don't have such a rich project and team management suite. It would allow users to manage any work area visually, in one single Whiteboard. Take a look at few of examples below.
Adding items to whiteboards
Using basic blocks users can directly connect ideas to your work by converting shapes, sticky notes, or text into a task. Or, users can embed existing tasks and Docs into a Whiteboard. Tasks and Docs on a Whiteboard are fully editable. They also have the same functionality as the other Whiteboard items. Users can can duplicate, connect, and draw on them!
Adding existing Workspace items like Tasks, List, Docs and more
Any simple object can be converted into a taskAny note, shape, text can become an actual task or list of task after a brainstorm session, drafting project ideas or discussing priorities with a team.
Project Visualising
Using real locations and action items embeds, users can set up their own hierarchy paradigms. This would be useful since ClickUp hierarchy structure might not meed all the real world use cases, and with a freedom of Whiteboards - there's no limitations to do custom flows.
Arrows aren't just arrows
After connections made, user can transform them into an actual dependencies or relationships in the workspace. So users could perform actions that would reflect in their work processes, like set up project infrastructures, build critical path maps with help of formulas and custom fields and so much more.
Color System & Dark mode
Colors were one of the challenges to solve when building Whiteboards.
First of all, user interface color system didn't really work for graphics. For example, button primary token, that worked well for a CTA would appear quite dark and flushed out. So picking a simple notes fill colors was quite a struggle, since nothing in existing design system would work and we eventually had to create a local color tokens system, that would work specifically for Whiteboards.
Idea was the we'd still have same library of colors (orange, green, blue, etc) but it would be working uniquely for lines, fill cases for all objects. For example, notes would have its own "soft" fill variation to differentiate from shapes and have unique, gentle, almost like physical look.
Part of the challenge was that, we found that colors didn't match with a built-out front-end version. Reason was that the color profile used in figma was different from the one front-end environment used. While this was a minor different for user interface elements, when used on a shape fills, the difference was dramatic. So we had to make a number of rounds, communicate with Eng side to make sure all the environment properties were matching too.
The same story happened to shadows. While they looked well in Figma using quite a simple set of rules, due to a front-end rendering specifics it was impossible to do one to one translation and we had to do many rounds in order to make it look almost identical to what we had in designs.
On the top of all that - each fill color had to work with various content use cases, which also might have color settings, and color themes (light/dark), in order to be accessible and not fail contrast tests.
Here is a real design board shot of testing various color options, with a goal to define best match that would not only look great, but also prevent any contrast issues when content is placed on it:
Dark mode had to get its own treatment, each color and element was tested to prevent contrast and accessibility issues.
Post production concept. Right after the first version was released, we started working on the next generation. Here you can see example of dark mode with collapsed left sidebar allows to keep focus, and collaborate with a team.
Thank you! 💎
It was incredibly fun and interesting journey, where I got deep into a visual collaboration software nuances and practices, did a ton of research on patterns and proper UX techniques to design it not just right, but best-in class right, placing right basement that would help it to sustain, grow and help millions of users!
