Problem
People with 3A to 4C hair can't tell from a stylist's Instagram whether the stylist works with their pattern, what it costs, or how to prepare. So they send a DM, wait, or book somewhere else. For the stylist, that means the same questions over and over and their best work buried deep in the grid.
Who it's for
The site has two users, and it only works if it serves both.
- New clients with 3A to 4C hair (primary): usually arriving from an Instagram bio link on a phone, deciding in seconds whether this stylist is for them.
- The stylist: a small business owner whose time goes to answering the same DMs instead of doing hair. Every question the page answers is one the stylist doesn't have to.
Process
This is a self-initiated concept, so I treated my starting beliefs as assumptions and wrote down how I'd test each one. I audited three real Charlotte curl salon homepages, built two proto-personas and a journey map, then mapped the path from an Instagram bio link to a booked visit. I sketched three hero layouts, wireframed the page for phone first, then designed and built it.
Key decisions
- Name the patterns. None of the three competitors names 3A to 4C on the homepage. A curl type strip right under the hero answers "is this for me" in a way a tagline can't.
- Filter the gallery by curl type. The user flow's make-or-break moment is seeing work on your own pattern, so the filter sits high on the page, before services.
- Price and time on every service. Two of three competitors hide prices from the homepage. Showing both removes the most common reason to DM.
- One page, in the order people ask. Is this for me, are they good, what does it cost, how do I book. Every Book a visit button goes to the stylist's existing booking tool.
- Split hero over a full-bleed photo. Text over a photo is hard to read on a phone and depends on one perfect image a real stylist may not have.
Scope
The test for every feature was whether it helps a new client get from "is this for me" to a booked visit.
- No booking system of my own: stylists already run their calendars, deposits and client history in a booking tool. Rebuilding that would add cost and risk for no gain, so every button hands off to the tool the stylist already uses.
- No extra pages: one page in the order people ask keeps the path short on a phone. Anything that doesn't answer one of those four questions waits.
Measuring success
The studio is fictional, so these are the measures I'd set with a real stylist, starting with two weeks of baseline from their current setup.
- Primary: the share of visits from the stylist's Instagram bio link that click Book a visit, tracked with a tagged link and privacy-friendly analytics.
- Secondary: fewer "do you do my hair type" and "how much is it" DMs per week, counted by the stylist before and after launch.
- Guardrail: no rise in mismatched bookings, like a client booking a service that doesn't fit their hair. Faster booking only counts if it's the right booking.
Before launch, the five-task usability test checks the same thing on a smaller scale: can a first-time visitor find work on their pattern, a price and the booking button without help?
Outcome
A working, responsive site in vanilla HTML, CSS and JavaScript with a filterable gallery, a keyboard-friendly FAQ, 44px touch targets and AA contrast throughout. The research, wireframes and a five-task usability test plan are documented in the repo, and the usability test is now in progress. The studio is fictional; bracketed text marks what a real client would supply.
Because the studio isn't real, the photos are AI-generated placeholders, and the site says so. I checked every gallery photo against the curl type it's filed under, and that check mattered. The first 4A photo showed long, glossy spiral ringlets. I have 4A hair, and mine has never looked like that. A 4A visitor who filtered for their pattern and saw that photo would get the same message Instagram gives them: this work isn't for hair like mine. I regenerated it until it matched real 4A texture. For a real build, the lesson is that photo accuracy is part of the design, and it has to be checked by people with that hair type.
What I'd revisit
Everything user-facing is still an assumption, so I'm now running the usability test with 5 people with 3A to 4C hair. Next I'd interview a working stylist about their DM load and replace the AI-generated photos with their real work.