Skip to content
Book a call
Marketing

Blue PantherA website for an SEO agency

A website for an SEO agency: homepage, service pages, pricing, courses and sign-in.

Blue Panther: sign-in page
Industry
Marketing (SEO agency)
Services
Website design, UX design, Design system
Platform
Web
Screens shown
14
The brief

The problem

An agency site has to explain several services that sound alike. A visitor should see what each is for, what they get and what it costs.

  • Seven similar service pages
  • Plans and prices side by side
  • A course area where people sign up and learn
Approach

How we approached it

What it had to do

  • Explain several similar SEO services without making visitors read every page
  • Show plans and prices side by side
  • Give people a place to sign up and learn through courses
  • Make contacting the agency easy
  1. 1Grouped the pagesFour groups, from home to sign-in.
  2. 2Drew the homepage and pricingA long homepage and a pricing page with three plans.
  3. 3Gave seven services one layoutAI SEO audit, keyword research, technical SEO, social media, programmatic SEO, press release and growth partner.
  4. 4Designed the course areaA course list, a course overview with lessons and a courses-in-progress view.
  5. 5Set up two componentsA service card and the pricing plan cards.
Flows

The screens

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

01

Home and pricing

A long homepage and a pricing page with three plans.

Blue Panther: homepage, top to bottom
Homepage, top to bottom View full page of Homepage, top to bottom (opens in a new tab)
Blue Panther: pricing page with three plans
Pricing page with three plans View full page of Pricing page with three plans (opens in a new tab)
02

Service pages

Seven service pages that share one layout, so visitors learn it once.

Blue Panther: AI SEO audit page
AI SEO audit page View full page of AI SEO audit page (opens in a new tab)
Blue Panther: keyword research page
Keyword research page View full page of Keyword research page (opens in a new tab)
Blue Panther: technical SEO page
Technical SEO page View full page of Technical SEO page (opens in a new tab)
Blue Panther: social media management page
Social media management page View full page of Social media management page (opens in a new tab)
Blue Panther: programmatic SEO page
Programmatic SEO page View full page of Programmatic SEO page (opens in a new tab)
Blue Panther: press release page
Press release page View full page of Press release page (opens in a new tab)
Blue Panther: growth partner page
Growth partner page View full page of Growth partner page (opens in a new tab)
03

Courses

A course list, a course overview with lessons and a courses-in-progress view.

Blue Panther: course list
Course list View full page of Course list (opens in a new tab)
Blue Panther: course overview with lessons
Course overview with lessons View full page of Course overview with lessons (opens in a new tab)
Blue Panther: courses in progress
Courses in progress View full page of Courses in progress (opens in a new tab)
04

Contact and sign-in

A contact page and a sign-in page in the same style.

Blue Panther: contact page
Contact page View full page of Contact page (opens in a new tab)
Blue Panther: sign-in page
Sign-in page
Components

Design system

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

  • Service cardOne card used across the service pages.
  • Pricing plansPlan cards, with the recommended plan set apart.
Blue Panther design system: service card component
Service card component
Blue Panther design system: pricing plan components
Pricing plan components
Result

What we delivered

The full set of desktop pages in Figma at 1440 pixels wide, plus a components and style guide.

  • Desktop pages at 1440 px wide, grouped by purpose
  • A component and style guide in Figma

Next project

All work
SaaS BrandingCat A dashboard for brand mentions View the project BrandingCat

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