A Website Redesign
Studio 313
Before & After
A heartfelt look at what changed, what stayed true, and how every link now takes you exactly where you need to go.
CLICK ARROWS OR USE KEYBOARD → TO ADVANCE
What Changed
9 Key Upgrades
①
Full Navigation Bar
②
Stylist Profiles
③
Hair Gallery Carousel
④
Full Services Menu
⑤
Hours & Directions
⑥
Grand Opening Banner
⑦
Every Link Works
⑧
Contact Form
⑨
Cohesive Design
Upgrade #1
The Navigation
Before
Studio 313
— no menu —
  • ✗No navigation bar
  • ✗No way to jump to sections
  • ✗No Book Now button
  • ✗Had to scroll endlessly
After
Studio 313
SERVICESGALLERYOUR STYLISTSLOCATIONCONTACT
BOOK NOW
  • ✓Sticky nav visible on every scroll
  • ✓6 direct links — one click to any section
  • ✓Gold "BOOK NOW" button always visible
  • ✓Mobile hamburger menu included
Upgrade #2
The Stylists
Before
Taylor
Book Here
@TrueCosmetologist
  • ✗Square photo, no styling
  • ✗No bio or credentials
  • ✗Plain underlined text links
  • ✗No visual hierarchy
After
T

Taylor

Licensed Cosmetologist · Est. 2021

Locs · Silk Press · Sew-ins · Color

Book
View Site
B

Breya

Hair Stylist · Studio 313

Protective Styles · Locs · Natural Hair

Book
View Site
  • ✓Real selfie photos in gold-ringed circles
  • ✓Bio, credentials, and specialty listed
  • ✓Gold "Book" + "View Site" buttons — both clickable
  • ✓Both hero + full card versions
Upgrade #3
The Services
Before
—
No services listed on the website.
Clients had to call or DM to ask.
After
Locs
Natural Hair
Extensions
Treatments
Consultations
Starter Locs — Coils
$130 · 90 min
Book Now →
Loc Retwist
$85 · 90 min
Book Now →
  • ✓25+ services across 5 tabs
  • ✓Every service has price + duration
  • ✓"Book Now" opens Square with service pre-selected
  • ✓No more guessing what's available
Upgrade #4
The Gallery
Before
  • ✗4 circle photos, randomly sized
  • ✗No navigation between photos
  • ✗No additional work visible
After
‹
›
  • ✓5 equal-width photos in one clean row
  • ✓Left/right arrows to browse more styles
  • ✓Additional styles added from partner studio
  • ✓Hover zoom effect on each photo
Upgrade #5
Every Link Goes Somewhere
Nothing is dead. Every button is a door.
📸
Instagram
@Studio313PHL · Opens the real Instagram profile in a new tab
✓ LIVE LINK
🎵
TikTok
@Studio313PHL · Links directly to TikTok profile
✓ LIVE LINK
📅
Book Now
Opens Square booking with location pre-loaded — just pick a time
✓ LIVE LINK
💈
Taylor — View Site
Links to Square booking page — clients book Taylor directly
✓ LIVE LINK
✂️
Breya — View Site
Links to Square booking page — clients book Breya directly
✓ LIVE LINK
📋
View Full Menu
Links to betruebeauty.org appointments page for extended menu
✓ LIVE LINK
Upgrade #6
Hours & Location
Before
—
No hours listed.
No directions.
Clients had to Google the address.
After
HOW TO GET THERE
Walk up stairs to 3rd level. Turn left — Studio 313 is the door at the end of the hall.
From Stairs
From Elevator
MondayClosed
Tue–Fri10AM–5PM
Saturday9AM–2PM
SundayClosed
  • ✓Step-by-step directions (stairs & elevator)
  • ✓Full weekly hours displayed clearly
  • ✓Embedded Google Map + Get Directions button
  • ✓Phone, email, and parking info all in one place
"This is the same Studio 313 you've always loved —
just finally dressed the way it deserves to be."
Studio 313
Philadelphia · Germantown Ave · Healthy Hair Starts Here
View Redesign → Original Site
‹
›