--- title: Brand24: Turn scattered settings into one clear setup — Łukasz Siwek url: https://www.siwek.design/work/brand24-settings description: The legacy screens handled this for years. Still, keyword configuration sent many users to Customer Success, and source and notification settings were scattered across the panel. We merged everything into three tabs: Keywords, Sources and Notifications. updated: 2026-11-03 --- # Brand24: Turn scattered settings into one clear setup — Łukasz Siwek Redesigning Brand24's legacy Project Settings with a team of two, one release and a lot of design judgment **Company:** Brand24 · **Role:** Product Designer · **Year:** 2026 **Tags:** - Product Design - Information Architecture - AI-assisted UX - Legacy Redesign The legacy screens handled this for years. Still, keyword configuration sent many users to Customer Success, and source and notification settings were scattered across the panel. We merged everything into three tabs: Keywords, Sources and Notifications. --- *(An in-house project at Brand24. I led it end to end: design, specs, data checks, QA and feedback. One developer wrote the code.)* Project Settings is where a Brand24 project gets its shape. Keywords decide what gets tracked, Sources decide where we look, and Notifications decide how users hear about it. A mistake in any of them shows up as noise, missed mentions or an empty feed, and the product looks broken even when it isn't. People come back here to cut spam, rescue a project with too few mentions, add a profile or set an alert before a campaign. The legacy screens handled this for years. Still, keyword configuration sent many users to Customer Success, and source and notification settings were scattered across the panel. *** ## Six tabs, three topics The old Project Settings had six tabs. Sources lived in two of them and notifications in two more. Some tabs saved automatically, others needed a Save button. We merged everything into three tabs: Keywords, Sources and Notifications. *Image: Four screenshots of the legacy Project Settings, each on a different tab: Keywords, Sources, Reports and Facebook & Instagram sources — The legacy Project Settings. Six tabs, with sources and notifications split across several of them.* All three had to ship in one release. Going tab by tab would have left users with a half-new, half-old screen and two save models for months. The team was me and one developer, so every feature had to justify its build cost. Each tab also had to give users something they didn't have before, on top of a cleaner layout. *** ## How we worked I started each tab with clickable prototypes built with AI in Claude Design. They let me test an idea in minutes and drop it just as fast. The direction that survived went to Figma, together with a feature spec covering behavior, edge cases and open questions. The product team gave feedback, the PM and I closed the open questions, and the developer built it. I tested each build against the spec and logged fixes. Most decisions came from product judgment and the constraints above. I reached for data when a hunch needed checking. *** ## Tab 1 — Keywords *Image: The new Keywords tab for a Burger King project: a keyword card with the main keyword, required and excluded keyword fields and suggested keywords on the left, and a column of mention previews on the right — The new Keywords tab. Keyword cards on the left, a live preview of mentions on the right.* Keyword configuration is hard for every media monitoring tool, because brand names behave differently. Apple has to filter out fruit, while a unique brand name needs nothing excluded. Our users also typed several keywords into one field and made typos they noticed only when mentions didn't come in. Some legacy projects carried two or more required keywords, which returns weak results. ### One field, one value The old field looked like it accepted a list, so users typed "Apple, iPhone" into it. Now the field shrinks to the size of its chip after Enter, which tells users it holds one value. Another keyword gets another card. ### Catch up, then get ahead Competitors already had a mention preview, and our legacy screen didn't. We added one as a sticky column that refreshes with every change, so users can test a setup before saving it. Collapsing it reflows keyword cards into two columns for anyone adding a long list. AI Suggestions were the extra. They catch typos, flag legacy setups, propose new keywords and suggest excluded keywords for generic names. *Image: Screen recording of the Keywords tab with Apple as the main keyword: the user opens the excluded keyword suggestion and adds suggested excluded keywords to the card — Adding excluded keywords straight from an AI suggestion.* ### Suggest only when sure A wrong suggestion that a user accepts fills the project with noise and costs trust in the feature. We tested the model on hard cases and kept one rule: suggest only when we're confident something can improve. Unique brand names get no excluded suggestions. Visibility follows severity, from a banner for zero results to a warning icon for typos and quiet chips for optional ideas. Legacy projects with several required keywords get an explanation without a fix button, because some of them still collect good mentions. *Image: Four versions of the same keyword card: empty; Burger King with a popover of excluded keyword ideas such as Stephen King and King Size; #bugerking with a possible typo popover suggesting #burgerking; and Burger King filled in with required and excluded keywords — One keyword card in four states: empty, with excluded keyword ideas, with a possible typo, and filled in.* *Image: Screen recording of the Keywords tab with Porche as the main keyword: the user opens the typo suggestion and replaces it with Porsche in one click — A possible typo in the main keyword, fixed with one click.* ### A delay we checked first AI limits meant suggestions are generated when the screen opens and appear after 5 to 10 seconds. The median session on this tab lasts about 47 seconds. Only 4.4% of sessions end before 5 seconds and 8.6% before 10, so over 90% of users see the suggestions while they're still working. ### Save button over auto-save We debated auto-save. Keyword changes decide what lands in the mentions feed, so auto-save would rerun the search on every edit. It would also take away the way back. A user who experiments for a few minutes and prefers the old setup would have to rebuild it from memory. Save stays disabled until something changes and asks for confirmation if you leave with unsaved edits. Sources and Notifications got the same button. The legacy mix of Save and auto-save confused users enough that they reported it. *Image: The Keywords tab on a phone: one keyword card, an Add next keyword button, and a Preview of mentions button next to Save at the bottom — On mobile the preview moves behind a button next to Save.* *** ## Tab 2 — Sources *Image: The new Sources tab: one list of sources grouped into Social media, Web news and broadcast, Specific pages and profiles, and Excluded sources, each source a single row with a status and a toggle or expand arrow — The new Sources tab. Every source in one list, grouped into four categories.* Sources was the simplest tab. It gathers every source a project monitors in one place, so the hard part was fitting many sources on one screen. ### The first version showed everything My first iteration listed every source with its settings open on one long page. Finding a single source took a lot of scrolling, and the page grew with every connected profile. *Image: Screen recording of the first version of the Sources tab, scrolling through one long page of sources with every setting open — The first version of Sources, with every source and setting open on one long page.* The final version groups sources into Social media, Web news and broadcast, Specific pages and profiles, and Excluded sources. Each source is one row with a status such as "2 profiles added", and its settings expand in place. Facebook and Instagram needed the most setup. One combo input replaced their two "add source" sections, and each Facebook page got a row with inline toggles. Instagram hashtags moved apart from profiles, with a global toggle and a per-account limit counter. ### A feature we kept out of sight The legacy tab had "Add mentions manually", and we considered giving it a more visible home such as the Mentions view. We left it in Sources with a clearer form. A monitoring tool that promotes manual mentions admits it missed them. The option is also rarely used, mostly by Customer Success advisors who know where to find it. *** ## Tab 3 — Notifications *Image: The new Notifications tab: an Alerts table and a Reports table with the same columns, showing each entry's type, recipients, filter, schedule and an on/off toggle — The new Notifications tab. Alerts and reports in two tables that follow the same structure.* Some users barely log in and rely on alerts, emails and Slack, so for them notifications are the product. I framed their job as "see if there is something to react to". Rosie, a PR specialist at an external agency, needs to catch a negative mention fast without reading every mention. *Image: A job-to-be-done diagram, See if there is something to react to, branching into functional and emotional criteria, above a persona card for Reputation Rosie, a PR specialist, with her goals and behaviors — Reputation Rosie and her job-to-be-done, with the functional and emotional criteria behind it.* In the legacy panel each notification type had its own rules and its own location. ### One model for alerts and reports The old Notifications and Reports tabs merged, and AI Insights reports joined them. Alerts and Reports share one model: an entry is a set of settings with many recipients. Every row shows what it is, where it goes, what it filters and when it sends. Adding an alert follows a fixed order: type, channel, then the settings that combination needs. Defaults do part of the work. Storm alerts start on, mention alerts start off, and email reports switch on automatically. *Image: The New alert modal: alert type cards for Mentions, Storm and Events, a channel switch for Email, Slack, MS Teams and Phone, then recipients, filters and change thresholds — Adding an alert. Type first, then channel, then the settings for that combination.* ### Moved out and cut Account and billing notifications, a cross-project overview and a Slack, Teams and phone page moved to Account Settings. Slack and Teams connect once per account and get configured per project, but the first connection still works from Project Settings. At the PM's request, other screens deep-link into Slack and Teams setup as a promotional hook. A "pause all notifications" switch stayed out of the MVP. *** ## Key takeaways 1. **Ship a redesign in one piece when half-new is worse than old.** Two save models side by side would confuse users more than the legacy screen did. 2. **Let shape do the explaining.** A field that shrinks to one chip teaches "one value" without a tooltip. 3. **Catch up on the standard, then add one extra.** The preview matched competitors and AI Suggestions went past them. 4. **A wrong AI suggestion is worse than none.** Suggest only when the model is confident. 5. **Use data to check a hunch.** One look at session data cleared the AI delay. 6. **Don't promote a feature that admits failure.** "Add mentions manually" stayed where its users expect it. 7. **Prototype to decide.** Clickable AI prototypes made ideas cheap to test and cheap to drop.