Saffron & Shear salon website design shown on a desktop browser and a phone
Desktop and phone view of the salon homepage.

The Project

The project is a website for Saffron & Shear, a hair salon in the Lyn-Lake area of Uptown Minneapolis. Salon websites live or die on one action: booking. Most salons already use an online scheduling tool, but their websites hide it behind a menu or send people to a generic page with no information about services.

This design treats the booking button as the main event, and pairs it with a service menu that tells people what to book and roughly how long it takes.

The Goals

  1. Booking in one tap from anywhere. A "Book Now" button in the header, the hero, every service card, and a full-width sticky bar on phones.
  2. A service menu that helps people choose. Cut, color, balayage and blowout, each with a typical appointment length.
  3. A look that matches the salon's style. Elegant and warm, so the website feels like walking in the door.
  4. Better visibility in Uptown searches. Local SEO and a Google Business Profile that match the site.
  5. Easy updates. Training so the front desk can update services and hours.

Package Fit

Package: Local Small Business, $1,000.

A single-location salon that already uses an online booking tool doesn't need custom software. It needs a polished site that sends visitors to that tool and ranks well locally. The Local Small Business package includes Local SEO, Google Business Profile setup, Google Analytics, mobile responsiveness, social media integration, a contact form, photo sourcing, 2 rounds of revisions and 2 hours of training. Extra pages, like a gift cards page, are $300 each.

Compare every option in the website packages section.

Design Approach

Colors: Deep plum (#4A2A3F) for text and buttons, blush (#F6E7E1) behind the hero, saffron gold (#E0A23A) for accents and the ampersand in the logo, dusty rose (#C97B84) for secondary shapes, and ivory (#FFFDF9) as the base.

Type: Cormorant Garamond for headlines and the wordmark, which feels refined and editorial, with DM Sans for body text, labels and buttons.

Layout: Overlapping arch shapes on the right of the hero echo salon mirrors. The left side has a short headline, one main "Book an Appointment" button and a secondary "View Services" link. Below, four service cards each carry a saffron edge, the service name, a typical duration and a "Book" link.

Cut, color, balayage, and blowout service cards
Service cards for cut, color, balayage, and blowout, each with a Book button.

Key pages:

  • Home
  • Services (with typical durations)
  • Stylists
  • Gallery
  • Gift Cards (extra page)
  • Contact
Gallery page of portfolio photos
Gallery page for portfolio photos, after the booking path.

What We Built

  1. Mobile-first layout: On phones, the full-width "Book Now" bar stays pinned to the bottom of the screen.
Three phone views of the salon site
Phone views of the booking bar, the service list, and the neighborhoods.
  1. Booking integration: Every booking button links straight into the salon's existing online scheduling tool, opening at the right service when the tool supports it.

Booking buttons for each salon service
Each service opens the salon scheduler, with Book Now pinned at the bottom.
3. Service menu: Real text with typical appointment lengths, so visitors can pick the right booking and search engines can read it. 4. Local SEO: The neighborhood is named in the title tags, headings and copy, with consistent name, address and phone everywhere. 5. HairSalon schema: Structured data using the schema.org HairSalon type, which Google recommends over the generic LocalBusiness type (Google Search Central). 6. Google Business Profile setup: Categories, services, hours, booking link and photos that match the website. 7. Social integration: Instagram links for portfolio browsing, placed so they don't pull people away before they book. 8. 2 hours of training: The front desk learns to update services, hours and the Business Profile.

Sample structured data (the street address and final hours are filled in at launch):

{
  "@context": "https://schema.org",
  "@type": "HairSalon",
  "name": "Saffron & Shear",
  "url": "https://saffronandshear.com",
  "telephone": "+1-612-555-0154",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Minneapolis",
    "addressRegion": "MN",
    "addressCountry": "US"
  },
  "openingHours": ["Tu-Fr 10:00-19:00", "Sa 09:00-16:00"]
}

Process Timeline

Here's a typical schedule for this package. Your quote confirms the real timeline.

  1. Week 1: brainstorm and setup. A 1-hour brainstorm covers services, the booking tool, brand feel and sample salon sites you like. Then we confirm the page list, pick the template and gather content.
  2. Week 2: design and build. We apply the template, colors and type, build the service menu, set up the booking links and contact form, and source photos. First revision round.
  3. Week 3: local SEO, Google Business Profile, launch and training. Titles, meta descriptions, schema and analytics with booking-click tracking, plus Business Profile setup with the booking link. Second revision round, launch, and 2 hours of training on updating services, hours and the Business Profile.

What It's Designed to Drive

  • More online bookings. Every page is designed to end in a booking button.
  • Better-matched appointments. Durations on the service menu are designed to help people choose the right service.
  • Visibility in Uptown and Lyn-Lake searches. Local SEO and the Business Profile are designed to work together.
  • Measurable bookings. Booking-button clicks are tracked in Google Analytics, so you can see which pages send people to book.

Frequently Asked Questions

Q: How much does a salon website cost in Minneapolis with SS Labs? A: A single-location salon site like this fits our $1,000 Local Small Business package, which includes local SEO, Google Business Profile setup and 2 hours of training.

Q: Can my website connect to the booking software I already use? A: Yes. This design links every booking button to your existing online scheduling tool, so you don't have to switch systems.

Q: Should I list prices on my salon website? A: That's up to you. This design shows typical appointment lengths, and prices can be added to the service menu or left to your booking tool.

Start Your Project

Own a salon, barbershop or spa in the Twin Cities? Let's make booking the easiest thing on your website.

Explore our website packages, our process, Minneapolis web design, SEO services, or more projects in the design showcase.

Sources

Checked October 7, 2026.

  1. Google Search Central: Local Business (LocalBusiness) structured data
  2. Schema.org: HairSalon type