Case Study: SurfGeo AI SEO SaaS Platform UI

Client: SurfGeo (BisonTech) Project Type: SaaS Dashboard & Landing Page Role: Frontend Developer (Team Member) Timeline: 1–2 Months Status: Private live URL not publicly available

Overview

SurfGeo is an AI-powered SEO SaaS product that helps brands rank better in responses generated by large language models including Claude, ChatGPT, Gemini, and Grok. As part of the BisonTech team, I was brought in to design and build the frontend of the platform: a modern SaaS landing page, a full dashboard UI, and a scalable component system to support the product long-term.

1. The Problem

SurfGeo had a compelling product concept helping brands optimize for AI-generated search results, a genuinely emerging space but lacked the UI/UX to present it credibly or manage users effectively inside the platform.

Without a strong landing page, potential customers couldn't understand or trust the product. Without a proper dashboard, existing users had no clean interface to actually use it. The product needed a frontend that matched the ambition of what it was building.

2. The Goal

My role was to design and build:

• A modern SaaS landing page that clearly communicated the product's value proposition
• A responsive dashboard UI for users to interact with the platform
• A clean, scalable design system that could support future feature growth without technical debt

3. Research & Approach

Before writing any code, I:

• Conducted competitor analysis studying the UI/UX of similar SaaS products to understand design patterns, navigation structures, and dashboard conventions that users already expect
• Evaluated UI libraries researched component systems to find the right foundation for fast, consistent, and scalable development
• Planned the component architecture mapped out the layout and component structure upfront to ensure the design system could accommodate new features without major rework

4. The Solution

I built a fully responsive SaaS landing page and dashboard using a modern, component-driven frontend stack.

Landing Page A polished marketing page that clearly presents SurfGeo's value proposition helping brands appear in AI-generated search results with structured sections, clean typography, and conversion-focused layout.

Dashboard UI A full application dashboard featuring:

• Feature-based UI components organized around the product's core functionality
• Clean navigation and structured layouts for intuitive usability
• A 3-tier subscription system with distinct UI states per plan:
  • Locked features visually indicated as unavailable for lower tiers
  • Blurred content restricted sections blurred to hint at what's behind the upgrade
  • Upgrade modals contextual prompts that appear when users attempt to access gated features
• A notification and messaging UI system built within the dashboard
• AI-assisted UI iteration to maintain design consistency and accelerate delivery

5. Tech Stack

6. Challenges

Feature Gating Across 3 Subscription Tiers

The most complex UI challenge was implementing a coherent feature gating system across three subscription plans. Each tier needed distinct visual states locked indicators, blurred restricted content, and contextual upgrade modals without making the interface feel broken or frustrating to lower-tier users.

Getting this right required careful design thinking: the gating needed to feel informative and motivating rather than punishing, encouraging upgrades rather than causing frustration.

Notification & Messaging UI

Building a fully functional notification and messaging system inside the dashboard added significant UI complexity managing read/unread states, real-time-feel interactions, and keeping the interface clean despite the added layer of functionality.

7. Results & Outcome

• Modern SaaS landing page delivered clearly communicates the product's AI SEO value proposition
• Full dashboard UI built with a clean, scalable component system
• 3-tier feature gating implemented with locked states, blurred sections, and upgrade modals
• Notification and messaging UI system integrated into the dashboard
• Design system structured for easy extension as new features are added

8. My Contributions

As a frontend developer on the team, I was responsible for:

• Building the SaaS landing page
• Designing and developing the full dashboard UI
• Implementing the subscription tier feature gating system
• Building the notification and messaging UI
• Establishing the component architecture and design system

Key Takeaway

SurfGeo pushed me to think beyond just building UI and to think about how UI communicates product value. Designing feature gating that feels motivating rather than restrictive, and building a design system scalable enough for a growing SaaS product, required a level of product thinking that goes beyond pure frontend development.

Built as part of the BisonTech development team