account-book.svg

Grouped comments interaction FINAL

To be completed week of October 25th.

Publish v5 - Mobile Sprint

Initial

Copy titles (batch action)

V.0.1 (Week 2)

Purchased from C<a href="https://liply.co" target="_blank">liply.co</a> on May 4, 2022. No attribution required, never expires.

Sparkles

Unapproved

Resolved 6/16

Status

draft

Color Search/Filter

Licensing

Comment attachments

<a href="https://www.figma.com/proto/nGXSUZMZKubFjH8M1CbN8J/Upload-Validations?node-id=4319-17116&amp;p=f&amp;t=eDXO6ZmRl3lz3kI9-0&amp;scaling=min-zoom&amp;content-scaling=fixed&amp;page-id=4319%3A15177&amp;starting-point-node-id=4319%3A17581&amp;show-proto-sidebar=1" rel="noopener noreferrer nofollow" data-link-auto="" target="_blank">https://www.figma.com/proto/nGXSUZMZKubFjH8M1CbN8J/Upload-Validations?node-id=4319-17116&amp;p=f&amp;t=eDXO6ZmRl3lz3kI9-0&amp;scaling=min-zoom&amp;content-scaling=fixed&amp;page-id=4319%3A15177&amp;starting-point-node-id=4319%3A17581&amp;show-proto-sidebar=1</a>Product Doc: <a href="https://www.notion.so/playbookteam/Upload-validations-1b326566cabf80a9b753d8f96efab19d" rel="noopener noreferrer nofollow" data-link-auto="" target="_blank">https://www.notion.so/playbookteam/Upload-validations-1b326566cabf80a9b753d8f96efab19d</a>

Upload validations

Interface

1 – Brand

Character

4 – Assets

Changes:<ul><li>Change 'Translation' to an icon, with hover state and tooltip</li><li>Cap the height of the dropdown and make it scrollable, preventing it from being out of frame on small screen.</li><li>Add English and Korea (for now) to the top for easy access, it would be nice if this eventually shows recently used.</li></ul>

Translation mini polish

Linear task here: <a href="https://linear.app/playbook-app/issue/PLA-6971/enable-unhide-on-a-schedule-within-a-sharedpublished-page" rel="noopener noreferrer nofollow" data-link-auto="" target="_blank">https://linear.app/playbook-app/issue/PLA-6971/enable-unhide-on-a-schedule-within-a-sharedpublished-page</a>Design here: <a href="//figma.com/proto/qIpl53taLaXQPa2Bp1ABvp/Schedule-Unhide?node-id=4268-4641&amp;t=UnOxvFDPCdZQNmF6-0&amp;scaling=contain&amp;content-scaling=fixed&amp;page-id=2%3A4&amp;starting-point-node-id=4268%3A3898&amp;show-proto-sidebar=1" rel="noopener noreferrer nofollow" data-link-auto="" target="_blank">figma.com/proto/qIpl53taLaXQPa2Bp1ABvp/Schedule-Unhide?node-id=4268-4641&amp;t=UnOxvFDPCdZQNmF6-0&amp;scaling=contain&amp;content-scaling=fixed&amp;page-id=2%3A4&amp;starting-point-node-id=4268%3A3898&amp;show-proto-sidebar=1</a>

Schedule show

Onboarding

Embedding

Perception

Bulk-edit V.1

Social media

Bug bash 3/20

Publish V.2

Strategy

marketing

DON&#39;T USE THESE. USE THESE <a href="https://www.playbook.com/playbook/x9NmXJPW6f9pr35k2sRKWoj7" target="_blank">https://www.playbook.com/playbook/x9NmXJPW6f9pr35k2sRKWoj7</a>

Illustrations

Gen Art

Search revamp 9/30

License Management

Bulk rename

Video frame search

Chrome extension

Multi-select V.0

Design specs: <a href="https://www.figma.com/file/5cUzqsGBQfVOWjrtlW6ZYc/Onboarding-V.2?type=design&amp;node-id=2420-3168&amp;mode=dev" rel="noopener noreferrer nofollow" data-link-auto="" target="_blank">https://www.figma.com/file/5cUzqsGBQfVOWjrtlW6ZYc/Onboarding-V.2?type=design&amp;node-id=2420-3168&amp;mode=dev</a>

Part I: Questionnaire

Ui polish

Photoroom V2

3–Iconography

🟧 Ongoing/Exploring

<ul><li>hard to see all tags, rows of tags is not the best way to show</li><li>need better UI than the table format - better use of spacing</li><li>create rule like "everything uploaded by Henry is tagged with #UploadedByHenry"</li><li>auto apply rules, and also approval process</li></ul>

Tags and Similar Asset Search

Licensing icon

Design specs: <a href="https://www.figma.com/file/h1SYT5hR7rthXMD22iuOIX/Expiration-link?type=design&amp;node-id=2-3&amp;mode=design" rel="noopener noreferrer nofollow" data-link-auto="" target="_blank">https://www.figma.com/file/h1SYT5hR7rthXMD22iuOIX/Expiration-link?type=design&amp;node-id=2-3&amp;mode=design</a>

Link Expiration

Figma specs: <a href="https://www.figma.com/design/NiQUq2W2ZudgRwGKPoOmpn/Zip-download?node-id=4371-23307&amp;m=dev" rel="noopener noreferrer nofollow" data-link-auto="" target="_blank">https://www.figma.com/design/NiQUq2W2ZudgRwGKPoOmpn/Zip-download?node-id=4371-23307&amp;m=dev</a>

Zip archive

8/7 bug bash

Upgrade to pro banner

<a target="_blank" rel="noopener noreferrer nofollow" href="https://www.figma.com/design/bLq0zOD5ekPr9Kft4STRvb/Asset-Modal-Toolbar?node-id=2-7&amp;p=f&amp;t=s71e9QAZPo0t5U66-0">https://www.figma.com/design/bLq0zOD5ekPr9Kft4STRvb/Asset-Modal-Toolbar?node-id=2-7&amp;p=f&amp;t=s71e9QAZPo0t5U66-0</a>Proposed general toolbar changes:<ul><li>Combined and centered zoom + miniapps toolbars</li><li>Separate out dark mode as toggle in the lower left corner</li><li>Move hide asset, permalink, crop, and delete actions into centered asset toolbar - these are common actions that apply directly to an asset<ul><li>Actions that remain in right asset sidebar: reacts, comments, copy, move, search, and other less common tools (eg. make license)</li><li>This would also allow users to easily crop, delete, create permalink for an individual asset when it's grouped (currently hidden in the vertical ellipsis)</li></ul></li></ul>

Asset modal toolbar

some design exploration to introduce Highlight feature in search but also improving the current UX of Filter, making the UI more intuitive to run a search with single/multiple filters

Search filter/highlight

Conversation tab

No more source

3–Logo Lockup

Launch site changes

Bug bash 11/3

<ul><li>A quick prototype of asset modal view <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.figma.com/proto/aQoAjUFzsfRfESYOJtKnb6/Ads?page-id=2%3A7&amp;node-id=4282-1278&amp;viewport=347%2C485%2C0.48&amp;t=wgkdjULPl3oqaKjt-8&amp;scaling=min-zoom&amp;content-scaling=fixed&amp;starting-point-node-id=4282%3A1278&amp;hide-ui=1">here</a></li></ul>

Ads placement

<ul><li>It’s still not clear that you need to click on ••• to open Conversations</li><li>there should not be X icon, it should be collapsing icon or something</li><li>Idea:<ul><li>having comment box in All media could be more inviting</li><li>Allow adding people from Conversation</li></ul></li><li>Inbox and dropzone<ul><li>What if we move Inbox over to Conversations as well?</li></ul></li></ul>

More Conversations

Icons

AI organize

USE FOR INTERNAL DOCUMENT ONLY (since we don't have office license for these)

Basis Grotesque

Publish edit menu polish

Import

Based on this board <a href="https://www.playbook.com/marketing-design/NeSC42v4EkwgxBEU6R7Uq6RJ" target="_blank">https://www.playbook.com/marketing-design/NeSC42v4EkwgxBEU6R7Uq6RJ</a> and <a href="https://www.playbook.com/laurie-mccarriar/ZN9vxkYs4A2UrxKivQ5LXX5W" target="_blank">https://www.playbook.com/laurie-mccarriar/ZN9vxkYs4A2UrxKivQ5LXX5W</a>Gradient BG: <a href="https://www.playbook.com/playbook/EwLbaYLSaMcq8CNmq2S5p5KQ" target="_blank">https://www.playbook.com/playbook/EwLbaYLSaMcq8CNmq2S5p5KQ</a>Good example of org with files that have no previews: <a href="https://www.playbook.com/all-documents-and-other-stuff" target="_blank">https://www.playbook.com/all-documents-and-other-stuff</a>

File previews

Playbook Brand Guidelines 2025

Design specs: <a href="https://www.figma.com/design/qIu0OvnN4Gbfmkz7LI8Pf7/Desktop-App-UI?node-id=2747-16680&amp;t=Afrewi7uVgikGo2X-4" rel="noopener noreferrer nofollow" data-link-auto="" target="_blank">https://www.figma.com/design/qIu0OvnN4Gbfmkz7LI8Pf7/Desktop-App-UI?node-id=2747-16680&amp;t=Afrewi7uVgikGo2X-4</a>

Icons/Assets

Dark mode

Landing page changes

<a href="https://www.figma.com/file/PGWgf095gE4qD0PgKc5Zl6/Mobile-UX?node-id=2%3A4" target="_blank">https://www.figma.com/file/PGWgf095gE4qD0PgKc5Zl6/Mobile-UX?node-id=2%3A4</a>

Mobile UX

2–Wordmark

Identity

Board invite link

Here are the guidelines for Playbook Brand! Designed and created by Red Antler, New York.

Playbook Brand Guidelines

Fonts

Group asset navigation

Activity flow

6–Typography

Appendix–Applications

Comment w/o signin

Phase 2 bug bash / brainstorm

Initial explorations

<ul><li>We should group comments by asset to provide more context + continuity for conversations.</li><li>Do we want users to think of comments as separate items? or do we want them to be all part of one conversation? → decided that we want them to think of it as separate, so keeping 5px gap because I think it's important users feel like they can thread / reply to just a single comment.</li><li>Now, I'm debating all the different UIs that make sense... the hover + commenting interaction remains the same:<ul><li>hover will show reactjis and allow users to resolve comment</li><li>click on comment allows user to reply to each comment separately</li><li>click on asset allows user to click into original photo when clicking image</li><li>HOWEVER: image is large enough / aspect ratio is correct so that user does not NEED to click into the image to have all the context to reply.</li></ul></li><li>Also, I know we initially had concerns on having too much empty space when the asset is shown ABOVE comments. I think this is more optimal than fitting it to a narrow comment section. I also think having larger asset size allows people to comment within the tab, without having to click into the asset.</li></ul>

Comments grouping UI

Typography

Agent workflow

Bug bash 3/10

Live editing (p.1)

<a href="https://www.figma.com/design/50SCT2UcOGIxfG7mTR0u0D/Publish-2.0?node-id=2-7&amp;t=TXuuDVoEfv6Cc9CN-1" rel="noopener noreferrer nofollow" data-link-auto="" target="_blank">https://www.figma.com/design/50SCT2UcOGIxfG7mTR0u0D/Publish-2.0?node-id=2-7&amp;t=TXuuDVoEfv6Cc9CN-1</a>

Figma specs: <a href="https://www.figma.com/design/KSvgLoxFmJdHSYRq1ZdTBA/UI-Explorations?node-id=2767-18675&amp;m=dev" rel="noopener noreferrer nofollow" data-link-auto="" target="_blank">https://www.figma.com/design/KSvgLoxFmJdHSYRq1ZdTBA/UI-Explorations?node-id=2767-18675&amp;m=dev</a>

Batch action search bar

Beta program

Make search/filter more obvious

Board rules UI polish

Bug bash 3/13

Version History

3 – Application

🟢 Ready for Dev

AI Import Vision

Onboarding refresh '26

Before and after new conversation tab refresh

BEFORE AND AFTER

Email Templates

Personality, Brand Pyramid, Messaging Pillars

1–Strategy

Mocks

Playbook for Desktop

Animated GIFs

Command in description

Bug bash 11/10

New in this design:- Workspace + Comments- Threading- &quot;Mini-modal&quot; for adding comments in board view

Comment V.2

Sub-board Search

🚀 Live

⚡️ Prototype

Logo

Emails Social icons

Random visuals

Search from parent boards in publish

Bug bash - April

Add/apps

1–Symbol Gestures

Mobile App

2–SecondaryPalette

Bug bash phase 1/2

Colors

FINAL

Logo Lockup

High Level Activity

Asset Modal (group) Comments

AI Search Vision

WIP options

1–Symbol

Product

Antd Icons

Admin reports

Don't use

Move/Copy Improvements

10/26/26

Desktop app

Figma specs: <a href="https://www.figma.com/design/Pgd0Fky1saWMkTR7Nny7tC/Mobile-App?node-id=3443-1195&amp;t=pftFdvGkf8fwQ8D3-4" rel="noopener noreferrer nofollow" data-link-auto="" target="_blank">https://www.figma.com/design/Pgd0Fky1saWMkTR7Nny7tC/Mobile-App?node-id=3443-1195&amp;t=pftFdvGkf8fwQ8D3-4</a>

Share/Invite

Icebox

Initial  explorations

Mobile web bugs 10/25

Flaticon

Symbol Gestures, Creative Galleries, Iconography, Patterns

3–Graphic Elements

Status position options

V2/Launch

4–Social Icon

Brand Guidelines

<a href="https://www.notion.so/playbookteam/Workflow-Kanban-PRD-6ea85b11d3ef4863b5dc65ee1f4519e2" rel="noopener noreferrer nofollow" data-link-auto="" target="_blank">https://www.notion.so/playbookteam/Workflow-Kanban-PRD-6ea85b11d3ef4863b5dc65ee1f4519e2</a>

Workflow

Playbook Gallery Assets, Creative Community Photography, Illustration Motifs

4–Art Direction

License

Quick solution for adding a search component in Publish (re-using the existing search)<ul><li>add component to Block</li><li>When you click edit, add option to toggle Filter view ON vs. OFF</li><li>When you click into search, filters always show</li></ul>

Publish Search Component

Based on <a href="https://www.playbook.com/s/mkp/1DFjRgeMdagGyqEwyfCmPj5j" rel="noopener noreferrer nofollow" data-link-auto="" target="_blank">https://www.playbook.com/s/mkp/1DFjRgeMdagGyqEwyfCmPj5j</a>

Mavity

Visual assets

🎨 Design Resources

Miris

Ally bug bash 3/18

4–Patterns

Snappiness improvements

Publish polish 7/1

Published templates

Current

Libraries testing

<a href="https://www.notion.so/playbookteam/Empty-state-use-cases-2a726566cabf8037aa9ace3c67338725" rel="noopener noreferrer nofollow" data-link-auto="" target="_blank">https://www.notion.so/playbookteam/Empty-state-use-cases-2a726566cabf8037aa9ace3c67338725</a><a href="https://www.playbook.com/playbook-tour/1o2myV3ckg2PCXxvkiYY8EbT" rel="noopener noreferrer nofollow" data-link-auto="" target="_blank">https://www.playbook.com/playbook-tour/1o2myV3ckg2PCXxvkiYY8EbT</a> for new templates

Onboarding & board empty state

2 – Visual Identity

Conversational search results

Search testing 10/5

🚀 Phase 2 Conversations is live on feature-flagged orgs — would love everyone’s help to test! :)🛠️&nbsp;Main changes:<ul><li>Grouping events by via board, users, and types of activities</li><li>Grouping comments by asset</li><li>Adding filter between all events, comments, and events only</li><li>Adding read/unread comments logic to surface/prioritize action for users</li><li>Huge UI lift - new notification design, tab switch, and transitions</li></ul>🧪 Try these workflows:<ul><li>switching between tabs</li><li>adjusting width of sidebar</li><li>clicking into boards and assets tagged in conversation, expanding assets</li><li>adding, replying, resolving comments</li><li>uploading assets and changing boards</li></ul>

8/11 Playbook Team Bug Bash

Initial exploration

<a href="https://playbook-labs.slack.com/archives/C02C2D0SJBY/p1730227825926399?thread_ts=1730227558.641749&amp;cid=C02C2D0SJBY" rel="noopener noreferrer nofollow" data-link-auto="" target="_blank">https://playbook-labs.slack.com/archives/C02C2D0SJBY/p1730227825926399?thread_ts=1730227558.641749&amp;cid=C02C2D0SJBY</a>

Emojis everywhere

Asset Modal (group) Comments

Asset Modal (group) Comments

12 assets

WIP options

12 assets

WIP options