# SuperLocalSEO Rankings Dashboard — UI/UX Critique & Recommendations **Date:** May 4, 2026 **Page:** Rankings Dashboard **Status:** Design Review --- ## Executive Summary The current rankings page has a **clean, professional SaaS design system** with strong navigation and hierarchy. However, it feels like a **skeleton rather than a complete dashboard**. The page needs: 1. Summary metrics at the top (avg rank, wins/losses, visibility score) 2. Dense data visualization (trend chart, top movers) 3. Actionable filters and search 4. Better empty/loading states 5. More context for ranking performance insights **Overall Assessment:** ⭐⭐⭐⭐ Design system is solid. ⭐⭐⭐ Content density and utility need work. --- ## What's Working Well ### ✅ Clear Information Architecture - Left sidebar provides strong sense of structure - Main navigation is intuitive and organized - Active state is immediately obvious - Feels like a serious, professional SaaS tool ### ✅ Good Visual Hierarchy - "Rankings" page title is clear - Primary actions (Refresh Now, Keywords, ROI, Export CSV) are visible and scannable - Selected tab (Rankings Table) is visually distinguished - Headers are appropriately sized relative to body text ### ✅ Clean, Low-Clutter Layout - Generous whitespace reduces cognitive load - Table is simple, readable, and easy to scan - Restrained color usage maintains professional feel - No visual noise or decorative elements ### ✅ Consistent Design System - Buttons, tabs, sidebar items, and table elements feel cohesive - Rounded corners and soft shadows create polished, modern SaaS aesthetic - Typography scale is consistent and readable - Icon usage is clear and supports semantic meaning --- ## Weaknesses & UX Issues ### 🔴 **Critical: Page Feels Incomplete** The page has excessive empty space below the table, giving the impression it's either: - Still loading - Not fully implemented - Lacking content For a rankings dashboard, users expect: - Dense data density (lots of tracked keywords) - Visual insights (charts, trends, heat maps) - Performance summaries (summary cards, key metrics) - Quick actions (filters, search, bulk actions) **Current state:** Only 1 data row visible, multiple "—" placeholders, ~60% of page is blank. **Fix:** Add meaningful content modules to fill the space (see recommendations below). --- ### 🔴 **Critical: Vague Status States** "Pending scan" tells users nothing: - When was the scan initiated? - How long will it take? - Is it actively scanning or in a queue? - What happens if it fails? **Users lose confidence** when they don't understand the system's state. **Fix:** Show: - Last scan completion time (e.g., "Last updated 2 hours ago") - If currently scanning: progress percentage or ETA - If queued: position in queue + estimated wait time - Retry button if scan failed --- ### 🔴 **Critical: No Filters or Search** As keyword volume grows (10 → 100 → 1,000 keywords), the table becomes unusable without: - Keyword search box - Location filter (if multi-location) - Date range picker - Rank position filter (e.g., "Show only #1-5") - Service type filter (e.g., "Emergency plumber" vs. "Routine plumber") **Current state:** Scrolling through all data is required. **Fix:** Add filter bar above table with common dimensions. --- ### 🔴 **Major: Missing Summary Metrics** A rankings page should **immediately answer:** "How am I doing?" Current page doesn't show: - Average rank across all keywords - Number of keywords tracked - Gains/losses since last scan - Visibility score or trend - Estimated traffic/revenue impact **These are the metrics users care most about.** **Fix:** Add 4-5 metric cards in a row above the table: - **Avg. Rank:** 4.2 (↓ 0.3 from last week) - **Keywords Tracked:** 24 - **Top Performers:** 5 keywords in top 3 - **Visibility Score:** 8.4/10 (↑ 12% month-over-month) - **Est. Monthly Traffic:** 340 visitors --- ### 🟡 **Major: Table Lacks Context** The table shows columns but minimal useful data: - One row visible - Multiple "—" entries make it feel broken - No inline actions (click to expand, edit, view details) - No sorting affordances beyond header text - "Est. Revenue / Mo" column is unclear: - How is it calculated? - What assumptions are used? - Is it a forecast or estimated? - Why is it important for this ranking? **Fix:** - Show at least 10-15 rows of data - Fill "—" columns with real data or hide them - Add inline row actions (expand, view SERP, view history) - Add tooltips/help icons for calculated fields - Add sorting indicators (▲▼) on clickable headers - Show row hover state (light background highlight) --- ### 🟡 **Major: Top Actions Are Ambiguous** Three action buttons exist: **Keywords**, **ROI**, **Export CSV** Users may not know what each does: - **Keywords** — Edit keyword list? Filter to specific keywords? Show keyword manager? - **ROI** — Show ROI per keyword? Show ROI trend over time? Open ROI calculator? - **Export CSV** — This one is clear, but maybe should be in a menu (icon + dropdown)? **Fix:** - Add tooltips on hover - Consider grouping less-used actions in a "..." menu - Make the primary action (Refresh Now) more prominent - Move secondary actions (Export CSV, ROI report) to a dropdown menu --- ### 🟡 **Moderate: Weak Tab Styling** The "Visibility Map" tab exists but is easy to miss: - No icon to indicate what the tab does - Inactive state blends in - Tab styling doesn't feel interactive - Users may not realize a second view option exists **Fix:** - Add an icon to the tab (map icon for Visibility Map) - Stronger hover state (background color change) - Better contrast between active and inactive states - Consider moving tabs to a more prominent location (e.g., as buttons in the top action bar) --- ### 🟡 **Moderate: Sidebar Spacing Could Be Tighter** The left sidebar is functional but uses a lot of vertical space: - Navigation items have generous padding - For a data-heavy SaaS app, this reduces screen real estate for content - Icons + labels combo is good, but spacing could be more efficient **Fix:** - Reduce vertical padding on nav items (12px instead of 16px) - Consider collapsible sections (e.g., "Reports" and "Analysis" expand/collapse) - For power users, add a "Compact sidebar" toggle in settings --- ### 🟢 **Minor: Missing Supporting Visuals** The page has zero charts or visualizations: - No ranking trend chart - No visibility heat map - No SERP feature breakdown - No keyword performance breakdown by location For a rankings dashboard, these are table stakes. **Fix:** Add: - Line chart showing average rank over time (last 30 days) - Bar chart showing keyword distribution by rank position - Heat map or other visual for "Visibility Map" tab --- ## Priority Roadmap: What to Fix First | Priority | Issue | Fix | Impact | Effort | |----------|-------|-----|--------|--------| | 🔴 P0 | Page feels empty | Add summary metric cards (avg rank, keywords, gains/losses, visibility score) | Page feels complete + informative | Medium | | 🔴 P0 | Status is vague | Show last updated time + scan progress if in-progress | Users understand system state | Low | | 🔴 P0 | Table has "—" placeholders | Either fill with data or hide empty columns | Page doesn't look broken | Low | | 🔴 P1 | No filters | Add search + location/date/rank filters above table | Dashboard usable at scale (100+ keywords) | Medium | | 🟡 P1 | Missing insights | Add ranking trend chart below table | Users see performance trajectory | Medium | | 🟡 P1 | Ambiguous actions | Add tooltips to Keywords/ROI buttons, move Export CSV to menu | Users understand what buttons do | Low | | 🟡 P2 | Visibility Map tab is hidden | Add icon + stronger hover state | Second view is discoverable | Low | | 🟡 P2 | Missing inline actions | Add "View SERP" / "View History" / "Edit" row actions | Users can drill into details | Medium | | 🟢 P3 | Sidebar too tall | Reduce padding or add collapsible sections | Slightly more content space | Low | --- ## Recommended Content Layout ### After Fixes (Top to Bottom): ``` ┌─ Rankings ─── Refresh Now ────────────────────────────────────────┐ │ 📊 Avg. Rank: 4.2 ↓ │ 📈 Keywords: 24 │ 🏆 Top 3: 5 │ 📊 Visibility: 8.4/10 │ ├────────────────────────────────────────────────────────────────────┤ │ [Search keywords...] [Location ▼] [Date Range ▼] [Rank Position ▼] │ ├────────────────────────────────────────────────────────────────────┤ │ Ranking Trend (Last 30 Days) — Line Chart │ │ [Chart showing avg rank trend, with annotations for major changes] │ ├────────────────────────────────────────────────────────────────────┤ │ ┌─ Keyword Rankings ─ Visibility Map ─────────────────────────────┐│ │ │ Keyword │ Location │ Rank │ ↑/↓ │ Updated │ Est. Traffic │ Acts ││ │ │ ff │ Main, OK │ #2 │ ↓1 │ 2h ago │ 45/mo │ ... ││ │ │ [more rows...] │ │ └────────────────────────────────────────────────────────────────┘│ └────────────────────────────────────────────────────────────────────┘ ``` --- ## Design System Observations ### Colors: ✅ Good - Superman Blue (#0052CC) is strong, professional, and accessible - Dark sidebar + light content area has excellent contrast - Accent colors (success green, error red) are appropriate - Suggests good WCAG compliance ### Typography: ✅ Good - Sans-serif (Inter or similar) is modern and readable - Size hierarchy is clear (page title, section headers, body) - Font weights are used appropriately for emphasis ### Spacing: ✅ Good - Generous margins create breathing room - Consistent padding on cards and table cells - Aligns with 8px grid system (industry standard) ### Components: ✅ Mostly Good - Buttons look clickable and are appropriately sized - Table headers are readable - Sidebar navigation is intuitive - **Issue:** Tab styling could be stronger (see weaknesses) --- ## Specific UI Improvements ### 1. Add Summary Cards Section ``` At the top of the page, before the table: ┌─────────────────┬─────────────────┬─────────────────┬──────────────┐ │ Avg. Rank │ Keywords │ Top 3 Ranks │ Visibility │ │ 4.2 │ 24 │ 5 │ 8.4/10 │ │ ↓ 0.3 WoW │ ↑ 2 MoM │ ↑ 1 week │ ↑ 12% MoM │ └─────────────────┴─────────────────┴─────────────────┴──────────────┘ ``` **Benefits:** - Immediately answers "How am I doing?" - Shows trends (WoW = week-over-week, MoM = month-over-month) - Gives users confidence the system is working - Follows Semrush / Ahrefs / Moz Local pattern --- ### 2. Add Filter Bar ``` [🔍 Search keywords...] [📍 Location ▼] [📅 Date Range ▼] [📊 Rank Position ▼] [⚙️ More Filters ▼] ``` **Benefits:** - Users can find specific keywords without scrolling - Reduces cognitive load for large datasets - Enables power user workflows (e.g., "Show all keywords ranked 1-3") --- ### 3. Improve "Pending Scan" State **Current:** ``` Pending scan ``` **Improved:** ``` Last updated: 2 hours ago Scanning in progress... 45% complete (~2 min remaining) ↻ Retry | ⓘ What is this? ``` **Benefits:** - Users know exactly what's happening - Prevents confusion about whether the system is working - Gives them an option to retry if needed --- ### 4. Add Trend Chart Below the table (or above, depending on space): ``` Ranking Trend (Last 30 Days) ────────────────────────────── 5 │ ╱╲ 4 │ ╱╲ ╱╲╱ ╲╱╲ 3 │ ╱╲ ╱ ╲ ╱ ╲╱ 2 │___╱__╲╱____╲_╱___________ └────────────────────────────── Apr May Jun Jul Aug Sep ``` **Benefits:** - Shows ranking performance trend over time - Enables data-driven decisions ("What changed in July?") - More engaging than a table alone - Standard for SEO SaaS tools --- ### 5. Improve Table Rows **Current:** ``` Keyword │ Location │ Rank │ Change │ Updated │ Est. Revenue / Mo ff │ Main, Bixby, OK │ Pending scan │ — │ — │ — ``` **Improved:** ``` Keyword │ Location │ Rank │ Change │ Updated │ Traffic/Mo │ Actions ff (Emergency Plumber) │ Bixby, OK │ #2 │ ↓ 1 │ 2h ago │ 45 │ ⋮ View SERP junk removal │ Tulsa, OK │ #5 │ ↑ 2 │ 1d ago │ 32 │ ⋮ View History plumbing services │ Broken Arrow │ #8 │ — │ 3d ago │ 18 │ ⋮ Edit ``` **Benefits:** - Real data instead of placeholders - Service type added for context - More data per row (traffic/mo, actions) - Row actions let users drill into details --- ### 6. Strengthen Tab Styling **Current:** ``` Ranking Table | Visibility Map ────────────── ``` **Improved:** ``` 📊 Ranking Table | 🗺️ Visibility Map ────────────── (darker background on inactive tab, better contrast) ``` **Benefits:** - Icons make tabs more discoverable - Clearer visual distinction between active/inactive - More engaging interface --- ## Questions to Answer Before finalizing the design, clarify: 1. **How many keywords will typical clients track?** (10? 50? 500?) - Affects table pagination, filter necessity, virtualization needs 2. **What is "Est. Revenue / Mo" based on?** - Google keyword search volume × CTR × avg. customer value? - Show the calculation in a tooltip 3. **What should "Visibility Map" show?** - Geographic heat map? - SERP feature distribution? - Competitor rankings? 4. **Do clients need multiple locations support?** - If yes, location filter is essential - If no, simplify the table 5. **What actions do users take from the rankings table?** - View detailed SERP? - Edit keyword tracking? - View ranking history? - Create content based on keyword? --- ## Comparison to Industry Standards ### How does this compare to competitors? | Feature | SuperLocalSEO | Semrush | Ahrefs | Moz Local | |---------|---|---|---|---| | Summary metrics at top | ❌ No | ✅ Yes | ✅ Yes | ✅ Yes | | Filters + Search | ❌ No | ✅ Yes | ✅ Yes | ✅ Yes | | Trend chart | ❌ No | ✅ Yes | ✅ Yes | ✅ Yes | | Table with real data | ⚠️ Minimal | ✅ Yes | ✅ Yes | ✅ Yes | | Inline row actions | ❌ No | ✅ Yes | ✅ Yes | ✅ Yes | | Clean design | ✅ Yes | ✅ Yes | ✅ Yes | ✅ Yes | | Professional vibe | ✅ Yes | ✅ Yes | ✅ Yes | ✅ Yes | **Conclusion:** Design system is competitive, but feature density is below industry standard. Adding the P0 items (summary cards, filters, trend chart) will bring you to parity. --- ## Final Recommendation **In Priority Order:** ### Week 1: P0 Fixes (Make the page feel complete) - [ ] Add summary metric cards (avg rank, keyword count, wins/losses, visibility) - [ ] Replace vague "Pending scan" with last updated time + progress indicator - [ ] Remove "—" placeholders; fill with real data or hide columns - [ ] Add tooltip/help text to ambiguous columns ("Est. Revenue / Mo") ### Week 2: P1 Fixes (Make the page functional) - [ ] Add search box + filters (location, date range, rank position) - [ ] Add ranking trend chart below table - [ ] Add row actions (View SERP, View History, Edit) - [ ] Improve table with real data (at least 10-15 rows) ### Week 3: P2 Fixes (Polish) - [ ] Strengthen tab styling (icons, hover states) - [ ] Add tooltips to Keywords/ROI buttons - [ ] Move Export CSV to dropdown menu - [ ] Tighten sidebar spacing if needed ### Week 4+: P3 Fixes (Nice-to-haves) - [ ] Visibility Map visualization - [ ] SERP feature breakdown chart - [ ] Competitor ranking overlay - [ ] Advanced filtering options --- ## Conclusion **The design system is solid and professional.** The issue is content density and utility. By adding: 1. Summary metrics 2. Filters + search 3. Trend visualization 4. Real data density ...this dashboard will rival industry leaders (Semrush, Ahrefs, Moz Local). The bones are good. Now fill them in with substance. --- **Questions? Suggestions?** Open a GitHub issue or schedule a design review.