Navigation

Two levels, after ManyChat. A narrow rail of icons carries the areas of the product. Beside it, an area with more than one screen opens a panel that names those screens in words. The account avatar sits at the foot of the rail and opens the workspace popover. Frames: 23-mc-nav-icon-rail, 24-mc-nav-subnav-panel, 25-mc-nav-account-popover.

1. An area with several screensrail + sub-nav panel, 252px of chrome

The rail carries one icon per area and nothing else. Each icon has a tooltip and an accessible name in words, so the rail is never the only place a screen is named. Home is a house. The dot on Agent is the same needs-action count the Activity entry spells out.

2. An area that is one screenno panel, 56px of chrome

Inbox

4 waiting

Inbox, Contacts, Analytics, Automation and Home are one screen each, so there is nothing for a panel to list and it is not drawn. The tooltip is shown here to stand for hover. This is the state the flow canvas and the Inbox get, and it hands them 160px back.

3. The account popoveropened from the avatar at the foot of the rail

Overview

checked 30 seconds ago

The popover holds what the old top header held: who you are signed in as, your role, and Log out. The header goes with it. Frame 25 lists three more rows, and each one names something this product does not have yet, so none of them are drawn. See questions 3 and 5.

4. Settings, as an areathe panel replaces the tab rail inside the screen

General

Settings already carries these ten tabs in four groups, in a rail inside the screen. The panel is that rail, one level up, so the product has one place where a list of screens lives instead of two. Campaigns works the same way, with All campaigns and Templates.

5. Below the shell breakpointthe icons give way to words, in the drawer we already have

There is no room for two levels of chrome under 768px, so the rail and the panel collapse into the drawer that already exists, with the active area's screens nested under it. The avatar in the top bar opens the same popover.

What this sheet needs ruled

Six forks. Each says what is drawn, what the alternative is, and which one I would take.

1. The rail is one icon per area, so the Monitor, Agent and Outreach group labels go away (round-14 locks 1, 3 and 4)

  • A, as drawn. Eight icons: Home, Inbox, Agent, Automation, Campaigns, Contacts, Analytics, Settings. Every icon is a place, and the words live in the tooltip and the panel.
  • B. Five icons: Home, Monitor, Agent, Outreach, Settings, and the panel always lists that group's screens. Keeps the ruled grouping, at the cost of asking an icon to mean "Outreach".

recommend AA group heading is a word, and this rail has no room for words. ManyChat's own rail is one icon per place, which is what frame 23 shows.

2. The panel is drawn only where there is more than one screen

  • A, as drawn. Agent, Campaigns and Settings get a panel. The other five areas do not, and the content grows into the space.
  • B. The panel is always there, so the content never shifts, and on five areas it lists one item.

recommend AFrame 23 is the rail with no panel and frame 24 is the rail with one, so both states are in the reference. It is also the whole win for the Inbox and the flow canvas.

3. The global top header is removed and each screen keeps its own

Today every screen sits under a shared bar carrying "Silver Oak Properties · Channels Manager", the role pill, your email and Log out. The rail already carries the brand and the avatar, so that bar would be saying it all twice. Drawn: the bar is gone, role and email and Log out are in the popover, and the page title is the screen's own, the way Home already does it.

recommend as drawnThe alternative keeps a full-width bar to hold three things the popover holds better. It costs every screen a header of its own, which Home, Inbox and the flow canvas already have.

4. Settings' tab rail becomes its sub-nav panel

Settings has ten tabs in four groups, in a rail drawn inside the screen. Drawn: those ten become the Settings panel and the in-screen rail goes. It follows one concept, one surface, and it is the only way the Settings area has a panel at all.

recommend as drawnIt changes an approved screen, so it is yours to rule. If you would rather not touch Settings yet, it becomes a one-screen area under question 2 and nothing else changes.

5. Three rows in frame 25 are not drawn, because there is nothing behind them

  • Language select. The product has no second language and no translation layer.
  • Add sign-in options. Sign-in is email and password. There is no Google or Apple to add.
  • Message reports. Reports are the Analytics area, which already has its own icon on the rail.

recommend leaving them outDrawing a menu row for a thing that does not exist is a promise the build then has to keep. Say the word on any of the three and it goes in.

6. Templates and API documentation finally get a home

Both are live routes with no nav entry at all today: you reach Templates from a button on Campaigns, and the API docs from a link inside the campaign builder. Drawn: Templates joins the Campaigns panel as the second entry, API documentation sits in the popover, which is where frame 25 puts that kind of thing under "Advanced features". The heading itself is not drawn, because one row does not need one.

recommend as drawn