Simran Chhabriya

Designing an Editor for Personalized Deal Rooms

Role

Product Designer

My contribution

Research

UX, UI

Prototyping

Research

UX, UI

Prototyping

Team

Founder,

Product Manager

Developer

Designer(Me)

STATUS

Shipped

TIMELINE

2022 - 2023

The Problem

Imagine a sales representative named Alex

Alex has an important client meeting next week.

Imagine a sales representative named Alex

Alex has an important client meeting next week.

He needs to share:

📄 Pricing documents

📑 Case studies

🎥 Demo videos

🤝🏻 Contracts

📅 Calendar links

💻 A product deck

🎨 A few Figma files

🗂️ More resources

As the deal moves forward, more documents and more emails keep getting added. Soon, things start to feel messy.

The Solution

What if sales teams didn’t have to send five different links, three documents, and a meeting invite separately? That was the idea behind Heybase.

The goal was simple: Create one place for the entire deal.

What if sales teams didn’t have to send five different links, three documents, and a meeting invite separately? That was the idea behind Heybase.

The goal was simple: Create one place for the entire deal.

Bring everything together

Documents, videos, links, calendars, and other content in one place.

Keep the editor simple

Users should be able to build a deal room without figuring out a complicated tool.

Give users flexibility

The editor should support different kinds of deal rooms and content.

Make sharing easier

One deal room. One link. Everything the client needs.

Research Summary

Screenshots of competitors’ app

Understanding the landscape

Before designing the editor, I explored products that were solving different parts of the sales experience.

I used their products, looked at how their editors worked, and read reviews to understand what worked well and where users struggled.

Before designing the editor, I explored products that were solving different parts of the sales experience.

I used their products, looked at how their editors worked, and read reviews to understand what worked well and where users struggled.

What I looked at:

Dock + Recapped

How sales teams organize and share deal content.

DealHub

How proposals and deal information are brought together.

DeckLinks + Loom

How video can add explanation and context.

Notion

How a flexible editor can still feel simple.

There wasn’t one product we wanted Heybase to follow. Different products gave us useful ideas for different parts of the experience.

Choosing the editing experience

After exploring different editors, Notion's block-based approach felt like the simplest way to add different types of content.

We also explored a drag-and-drop approach, but it took up more space and made the editor harder to manage.

So we chose a familiar block-based structure for Heybase.

After exploring different editors, Notion’s block-based approach felt like the simplest way to add different types of content.

We also explored a drag-and-drop approach, but it took up more space and made the editor harder to manage.

So we chose a familiar block-based structure for Heybase.

FEATURE ONE - Embeds

Bringing everything into one place

A sales pitch rarely lives in one format.

One deal might include documents, videos, calendars, links, and content from different tools.

So we designed the editor to support different types of content in the same deal room.

A sales pitch rarely lives in one format.

One deal might include documents, videos, calendars, links, and content from different tools.

So we designed the editor to support different types of content in the same deal room.

Add text, images, videos, and embeds easily

Use familiar editing patterns

Focus on creating, not figuring out the editor

One slash command gives users quick access to multiple embed options and pre-built UI blocks, making it easy to add content as they build the deal room.

A video showing list of embeds

A walkthrough video showing how to embed a youtube video

One slash command gives users quick access to multiple embed options and pre-built UI blocks, making it easy to add content as they build the deal room.

FEATURE two - Personalization

Giving users the freedom to personalize

As we started designing different deal rooms, we realized one fixed visual style wouldn’t be enough.

Different teams might want to present the same kind of content in very different ways.

So we added personalization options that let users:

As we started designing different deal rooms, we realized one fixed visual style wouldn’t be enough.

Different teams might want to present the same kind of content in very different ways.

So we added personalization options that let users:

Add company and client logos

Change colors and section styling

Choose a cover image

Switch between different deal room layouts

The goal was to give users more control over how the deal room looked, without letting that flexibility break the structure of the page.

A walkthrough video showing how to customize Dealroom according to their brand

Adding a YouTube video or any embed takes just a few steps: paste the link, add it to the page, and the video becomes part of the deal room.

A video showing list of embeds

Theme + Brand Color

Make it feel like your brand

People have different visual preferences — even within our team, I preferred a light interface while my co-founder preferred dark. Instead of choosing one for everyone, we added Light, Dark, and System themes.

Teams can also use their own brand color, helping the deal room feel more like an extension of their brand.

Layouts

Different ways to present a deal

Not every deal needs to be presented in the same way.

Some users may prefer a presentation-style experience, while others may want something closer to a landing page. So we created different layouts for both.

The One-page layout works like an interactive landing page, while still supporting Heybase features like video narration, buyer activity tracking, and chat.

Not every deal needs to be presented in the same way.

Some users may prefer a presentation-style experience, while others may want something closer to a landing page. So we created different layouts for both.

The One-page layout works like an interactive landing page, while still supporting Heybase features like video narration, buyer activity tracking, and chat.

Logo + Navigation + Cover

The finishing touches

Not every deal needs to be presented in the same way.

Some users may prefer a presentation-style experience, while others may want something closer to a landing page. So we created different layouts for both.

The One-page layout works like an interactive landing page, while still supporting Heybase features like video narration, buyer activity tracking, and chat.

Not every deal needs to be presented in the same way.

Some users may prefer a presentation-style experience, while others may want something closer to a landing page. So we created different layouts for both.

The One-page layout works like an interactive landing page, while still supporting Heybase features like video narration, buyer activity tracking, and chat.

FEATURE three - video narration

Adding a human touch with video narration

Sometimes, sharing the content itself isn’t enough.

A salesperson might want to explain a proposal, add context to a document, or simply leave a short welcome message for the client.

So we added video narration directly inside the deal room.

Users could:

Sometimes, sharing the content itself isn’t enough.

A salesperson might want to explain a proposal, add context to a document, or simply leave a short welcome message for the client.

So we added video narration directly inside the deal room.

Users could:

Record a new video or upload an existing video

Attach it to the specific section where that explanation is needed.

The idea was to keep the explanation close to the content, instead of sending another Loom link or another email.

For the player, we took inspiration from Loom’s floating video bubble. It stayed compact on the screen and didn’t get in the way of the main content.

The idea was to keep the explanation close to the content, instead of sending another Loom link or another email.

For the player, we took inspiration from Loom’s floating video bubble. It stayed compact on the screen and didn’t get in the way of the main content.

A video showing how to add a video to a section

Users can record a new video or upload an existing one, and attach it directly to the section where it's needed.

Users can record a new video or upload an existing one, and attach it directly to the section where it’s needed.

the end

Alex's pitch is now much simpler.

Alex’s pitch is now much simpler.

Instead of sending multiple emails, documents, and links, Alex can now share a single personalized deal room.

Everything the client needs — from product information and proposals to videos and meeting links — lives in one place.

Instead of sending multiple emails, documents, and links, Alex can now share a single personalized deal room.

Everything the client needs — from product information and proposals to videos and meeting links — lives in one place.

The deal didn't change. The experience did.

The deal didn’t change. The experience did.

Reflections

What I learned

Designing the Heybase editor taught me that flexibility doesn’t have to mean complexity.

We were building an editor that could handle different types of content, layouts, branding, and video, but adding more options could easily make the product harder to use.

A few things I took away from the project:

Designing the Heybase editor taught me that flexibility doesn’t have to mean complexity.

We were building an editor that could handle different types of content, layouts, branding, and video, but adding more options could easily make the product harder to use.

A few things I took away from the project:

Familiar patterns are powerful

We didn’t need to reinvent how an editor works. Using familiar interactions gave us more room to focus on what was unique to Heybase.

Not every good idea needs a new interaction

A lot of our decisions came from looking at products that already solved parts of the problem well, and adapting those ideas to fit Heybase.

More flexibility needs more structure

Giving users more control was important, but so was deciding where that control should stop. The goal was to let users personalize their deal rooms without breaking the overall experience.

What users had to say

Simplicity at its finest.

Louis Newman

Member, OPUS

With Heybase it is possible to keep track of my current offers and proposals while having an eyepleasing experience for my clients. I like the UI and also that it helps me not forget what to include during a sales pitch.

Michael O.

Owner, Law Bound

Heybase makes it easy to manage your sales process and stay organized. It's simple to use and has a clean interface. I've been using Heybase for a couple of months now and it's been a great help in keeping my sales process organized and streamlined.

Heybase makes it easy to manage your sales process and stay organized. It’s simple to use and has a clean interface. I’ve been using Heybase for a couple of months now and it’s been a great help in keeping my sales process organized and streamlined.

David Leoncavallo

Founder & CEO, Scape Relaxation

Got an idea, a project, or just want to say hi?
My inbox is always open for interesting conversations, design opportunities, and the occasional "I found a bug on your website."

Email me

My Linkedin

Made with 🤍, after procrastinating on it longer than I'd like to admit.

Made with 🤍, after procrastinating on it longer than I’d like to admit.

Got an idea, a project, or just want to say hi?
My inbox is always open for interesting conversations, design opportunities, and the occasional “I found a bug on your website.”

Email me

My Linkedin