• hero image of a user's frustrating task flow

BRIEF

Designing for Designers

So you're a designer. Perhaps a digital designer of systems, products, brands, marketing materials – maybe all of the above. How many applications do you use for your day-to-day work? Still counting? At Abstract, we used two: Notebooks and Figma (and sometimes FigJam 😉). At a remote-first company of about 80 individuals, we set out to revolutionize the ways of product design. The pain points were clear: there was no concise yet comprehensive way to do agile design work without using dozens of tools and maybe dozens more just for documentation.

😭 What was the decision out of that last design review? Did anyone write it down? What was the research behind that? Were stakeholders in agreement? What do you mean he wasn't on the call? What were the requirements again? Did you record the meeting? Is there a transcript to skim? Where are the designs? That link is broken. What happened to the concepts from that workshop in 2019? What's the context behind that? Did you talk to engineering? 😭

Over the course of 17 months, Notebooks was designed and built with these infamous questions in mind. Yes, there's Jira, Confluence, Trello, Slack, Notion, and ... email – but they all have a wall where talking about screens ends and making screens begins. Notebooks was created to be a door.

Pull from Figma Prototype Poll Reviews Prototype
Outline
  • Timeline
    May 2021 – January 2022
  • Employer
    Abstract / Atlanta, GA
Responsibilities / Tools
  • Product Design for Branches / Sketch
  • Systems Design / Figma, FigJam
  • Design System Management / Figma
  • Product Management / Dropbox Paper, then Notebooks

PULLING DESIGNS FROM FIGMA

PULLING DESIGNS FROM FIGMA

Notebooks started out as a documentation tool. Workshoppers detailed their design thinking thoughts here, product managers crafted their PRDs here, designers performed stakeholder reviews here, and engineers started their context-gathering here.

On a small design team of six and engineering team of four, we created these beloved top features:

  1. notebook statuses such as, "Draft" and "Open for Feedback" to easily track a project's progress
  2. smart Jira link unfurls to also track realtime ticket statuses – from within the notebook
  3. a robust Figma + FigJam plugin allowing any Fig_ user to curate and push frames directly to their notebook
  4. comment threads attached to a specific design frame or text node, with emoji reactions 💅🏽
  5. notebook reviews: the ability to approve, request changes, and/or comment on a curated prompt
  6. decisions that rolled up to the top of the notebook after one or more reviews
  7. a Slackbot to nudge requested parties when a colleague has asked for their review
  8. design versioning to traverse the history and conversations behind Figma frames in a notebook
  9. focus mode: allowing a notebook to be presented in a fullscreen deck format

DECISIONS & REVIEWS

DESIGN DETAIL with COMMENTS

REVIEWS WITH POLLS

REVIEWS WITH POLLS

These features completely changed the way we worked. Every idea started and was implemented using Notebooks – and fast. We shipped new features biweekly, and stopped using Dropbox Paper entirely.

While working on the Notebooks editor, I was also tasked with designing the experience for how tech teams could sign up to use (and pay for) this blessing of a product.

We needed a way for customers to easily trial and commit to Notebooks alongside existing Branches plans, or as a standalone solution. Although Notebooks runs in the browser and Branches is a Mac-only desktop app, we agreed that customers should be able to manage both product plans from their Abstract organization webpage.

NOTEBOOKS PLANS

A screenshot of Abstract's Notebooks plans. There are 3 plans, each of them detailed on a card.

OLD BILLING EXPERIENCE

This is a screenshot of the old billing screen for an organization using just Branches. In this design, the call-to-action to try Notebooks could be easily missed.

I also wanted to provide a more consistent experience for customers. Why show nice cards during their plan selection only to show a weird table (but not really a table) with tiny text and dated buttons afterwards?

Org Billing Prototype

NEW BILLING EXPERIENCE

NEW BILLING EXPERIENCE

After 17 months of magic, Notebooks caught the eye of the company behind fan favorites, Photoshop and Illustrator. In January of 2022, Notebooks was acquired to be integrated with Adobe's Creative Cloud suite of services. Check out Adobe's blog post about it via the link below.

Adobe Acquires Notebooks  open_in_new