The studio

Strivelabs · Knowledge base

Redesigning the KB homepage

The knowledge base home had a lot to say: two sidebars, a draggable graph, an activity log and a row of controls. This is how I helped make it calm enough to use, including two calls I had to undo along the way.

My part
Audit, prototype and build, on top of a colleague’s first version
Prototyped in
Claude
Status
Live
The live page: hover a file for its details, open Recent, then a folder, a doc, and the graph full screen.

Backstory

A graph on a files page

  • Our knowledge base is where Strive keeps what agents need to know about each customer: .md files on brand, audiences, competitors and more, filled in at onboarding. It’s a files and folders module, so it shows as a second sidebar next to the platform one.
  • A colleague brought in a new home for it: a graph you can drag, with every folder and file as a node. On an audit, I felt it could do more for usability, not just for looks, so I offered to build on top of it.

The audit

More to decide than to do

  • Two sidebars side by side, each with its own switcher and plenty of options. A graph that had to work with one branch or many, inside a page that scrolls. A recent activity log, which wasn’t what people came for.
  • Put together, too many controls and too much detail on one screen. So the question wasn’t how to make the graph prettier. It was how to make the whole page calmer.
The first version of the knowledge base home: a files sidebar with its own workspace switcher at the top, the page title and description, and a graph card that runs past the bottom of the screen, with a full screen icon in its corner. Files show as small coloured dots with short labels, and hovering one shows a details card over the top right of the graph.
  1. A second sidebar, with a switcher of its own. Files and folders sat beside the platform sidebar, each with a switcher at the top.
  2. A drag surface in a scrolling page. The graph ran past the fold, so dragging the graph and scrolling the page fought over the same gesture.
  3. Files as small dots. A tiny target, and long names cut short.
  4. Everything on hover. The same details the file’s own page already shows.
  5. Full screen in a modal. Open a node from there, and the modal closed as the page changed.
The first version. The idea was right. The edges needed calming.

Design call · the proposal

Calm the surface down

  • I prototyped the changes in Claude: no page scroll under a drag surface, the platform sidebar folded by default, recent activity out of the way, files as pills, and softer colours.
  • And I treated the graph as an interface, not a picture: how it looks with a few nodes and with a crowd, how it says “click me”, and what moves when someone drags.
The prototype built in Claude: the platform sidebar folded to a strip of icons beside the files sidebar, a Recent button with a count in the header, and the graph filling the rest of the screen. Folders are large soft-coloured circles, files are labelled pills with icons, zoom and fit controls sit in the bottom left, and a legend and a hint run along the bottom.
  1. More room for the graph. The platform sidebar folded to icons, and the page stopped scrolling, so nothing scrolls under a drag. I took both back, more on that below.
  2. Recent, one click away. Activity moved behind a button with a count, instead of taking a section of the page.
  3. Pills, not dots. Each file is a labelled pill with its icon: a bigger target that looks clickable.
  4. Softer colours, with a key. Folders keep a light tint, and a legend says which is which.
  5. Controls in one corner. Zoom, fit and full screen together, and a hint that says what clicks and what drags.
The prototype, built in Claude. Most of it shipped. Two parts didn’t.

Design call · the details

Less up front, nothing hidden

  • Each of these started as something that felt off in use, not on screen. Full screen opened in a modal, while everywhere else in the platform it stretches in place up to the sidebar. And because nodes link to other pages, a click inside the modal closed it and jumped away.
  • So I kept full screen in the same view, like everywhere else, and went through the rest the same way: show less up front, but keep it one step away.

  • Full screen

    BeforeA modal over the page. Clicking a node closed it and jumped to another page.

    AfterStretches in place up to the sidebar, like every other full screen in Strive.

  • Recent activity

    BeforeA section of its own below the graph. Easy to miss, and it grows fast, with too little detail yet for a page of its own.

    AfterA pill in the header that opens a scrollable panel. Less prominent, never hidden, and room to grow.

  • Files on the graph

    BeforeSmall dots you could click.

    AfterPills with an icon and a name: a friendly hit target that looks clickable.

  • Hover card

    BeforeEvery detail on hover, the same ones the file’s own page shows.

    AfterJust enough to know what it is. The rest is a click away.

Before · after

Same page, fewer questions

  • Both sidebars stay open, the title and description sit where every page has them, and the graph gets a card of its own with full screen in the corner. Recent activity lives behind a button in the header.
  • Files are pills with icons, and a details card shows on hover. A folder opens its files, and a file opens the doc.
The first version: the files sidebar with its switcher, the page title and description, and the graph of small dots with a details card over it. The live version: the platform sidebar and the files sidebar both open, the page title and description, a Recent button in the header, and the graph of soft folder circles and file pills in its own card.
Drag to compare the first version with the one that’s live now.

Smudges

Two calls I took back

  • Folding the sidebar away. If it closed by itself on this one page, people would wonder where it went, and the app would need extra logic to detect the page and juggle both sidebars. I talked it through with Claude until I was confident, and kept both sidebars open.
  • Locking the page scroll. It made this page behave unlike every other page in the platform. If the goal is to fit the graph on screen, the placement can change while the layout stays the same: the same title, description and spacing as everywhere else.

What dried

What I’d keep

  • MissFolded the platform sidebar away on one page only.

    LessonDon’t move furniture people didn’t touch. Sidebar state belongs to the person, not the page.

  • MissLocked the page scroll to make room for the graph.

    LessonConsistency beats a perfect fit. Keep the shell the same, and fit the surface inside it.

  • LessonA graph is an interface, not a picture. Ask how it looks with a few nodes and with a crowd, how it says “click me”, and where things go when someone drags.

Calm isn’t fewer features. It’s fewer questions.

Thenga’s studio + yard