Skip to content
Book a call
SaaS

BrandingCatA dashboard for brand mentions

A tool that gathers brand mentions from several platforms into one feed: dashboard, post feed with reply suggestions and keywords.

BrandingCat: onboarding questionnaire: keywords
Industry
SaaS (brand monitoring)
Services
Product design, UX design, Web app design
Platform
Web
Screens shown
17
The brief

The problem

Mentions of a brand are spread across many platforms. Most need no answer, and a few do.

  • Collect mentions in one place
  • Sort and filter them
  • Reply without leaving the page
Approach

How we approached it

What it had to do

  • Help a brand owner set up tracking in a few short steps
  • Show mentions and posts in one place
  • Make replying to a post quick
  • Keep keywords, sources and account settings easy to reach
  1. 1Mapped four flowsFrom onboarding to account settings.
  2. 2Designed onboardingA questionnaire with keyword steps, ending in a project-created confirmation.
  3. 3Designed the dashboard and postsA mentions chart, an empty state, a posts list with filters, a single post and post history.
  4. 4Set up the systemA color palette, type styles, and buttons and controls.
Flows

The screens

17 real screens, grouped by the flow they belong to.

01

Onboarding

A short questionnaire that ends with a created project.

BrandingCat: onboarding questionnaire: keywords
Onboarding questionnaire: keywords
BrandingCat: onboarding step 1
Onboarding step 1
BrandingCat: onboarding step 4
Onboarding step 4
BrandingCat: project created confirmation
Project created confirmation
02

Dashboard and posts

A dashboard with a mentions chart, a posts list, single posts and post history.

BrandingCat: dashboard with a mentions chart and recent posts
Dashboard with a mentions chart and recent posts View full page of Dashboard with a mentions chart and recent posts (opens in a new tab)
BrandingCat: dashboard empty state
Dashboard empty state
BrandingCat: posts list with filters
Posts list with filters View full page of Posts list with filters (opens in a new tab)
BrandingCat: single post with replies
Single post with replies
BrandingCat: post history
Post history View full page of Post history (opens in a new tab)
03

Keywords and project settings

A keyword table and project settings for keywords and sources.

BrandingCat: keywords table
Keywords table
BrandingCat: project settings: keywords
Project settings: keywords
BrandingCat: project settings: sources
Project settings: sources
04

Achievements and account

Locked and unlocked achievements, plus profile, integrations and subscription settings.

BrandingCat: achievements: unlocked
Achievements: unlocked
BrandingCat: achievements: locked
Achievements: locked
BrandingCat: account settings: profile
Account settings: profile
BrandingCat: account settings: integrations
Account settings: integrations
BrandingCat: account settings: subscription
Account settings: subscription
Components

Design system

The parts that repeat across the screens, built once and reused.

  • ColorsA blue palette with warning, success and error colors.
  • TypeA type scale from headings to small labels.
  • ComponentsButtons, inputs and controls with their states.
BrandingCat design system: color palette
Color palette
BrandingCat design system: type styles
Type styles View full page of Type styles (opens in a new tab)
BrandingCat design system: buttons and controls
Buttons and controls
Result

What we delivered

Desktop screens from onboarding to settings, plus account, notification, integration and subscription settings and a components and style guide in Figma.

  • Desktop screens from onboarding to settings
  • A component and style guide in Figma

Next project

All work
Fintech TrackList A mobile app where songs are traded like stocks View the project TrackList

Have a product like this in mind?

Tell us what you are building. We will say honestly how we would approach it and what it would cost.

Book a call See all work