Medspa by Rayray Project

It all started with a job posting. A US marketing agency specializing in med spas was looking for someone remote, part-time, to build websites with artificial intelligence. Their web division was new, and they needed portfolio proof: sites built fast, tailored to each business, that didn't look like templates. We figured the most convincing application was to send them one. So we set out to build the best med spa site we could and publish it, so they could browse it from their phone instead of looking at a screenshot.

At first we worked on two candidates in parallel, Rayray and a second med spa, to bring two different proposals. After several rounds we paused the other one and put all our energy into just one; we'd rather have one well-finished site than two half-done ones. The Medspa by Rayray stuck, a studio in Irving, Texas, with a client base built up since 2014. Since it would serve as both a case study and a job application at the same time, it had to be live. And it had to hold up next to the big brands in the industry, with every screen designed to end with someone booking an appointment.

The base came together in one afternoon. Everything after that was short rounds of revision with very specific requests about the type, the photos, the buttons, and the motion. The idea of applying with something already finished came from our first portfolio↗, where we learned that describing your capabilities barely convinces anyone, and that a piece anyone can open from their phone convinces a lot more.

On scope, we should be clear. The site wasn't commissioned by the business, it has no analytics, and there are no visits or bookings to report.

The application was a link to a published site that anyone could open and explore.

Source: The Medspa by Rayray · Full report, §2 The origin: why this project exists · The Medspa by Rayray · Full report, §14 Final result and status · Interview with the Damorus Projects team, 2026: built in one afternoon as proof for an agency that sells to med spas

The Medspa by Rayray is personally run by a single practitioner and offers six treatment families. They range from injectables (Botox, Dysport, hyaluronic acid fillers, lips with techniques like "Russian lips" and PDO threads) to regenerative treatments, like facial PRP and scalp PRP, which use the patient's own blood, along with chemical peels, luxury facials, and brow microblading. Its main channels are Instagram and Facebook, where it posts results. The reputation has been earned through word of mouth and before-and-after photos.

The website was a free Wix template. With a template like that, a med spa ends up looking the same as a hair salon, a real estate office, or a coffee shop, and that works against a business where someone is entrusting their face to another person. There was also no journey that led from curiosity to booking, and once someone was convinced, the way to book wasn't always within reach.

And content was missing. Treatments showed up as loose tags, and nowhere was it explained what PRP is, how long Botox lasts, or how microblading heals. Without explanations it's hard to build trust, and Google and AI assistants have nothing to read, index, or cite either, so the business was left out of search engine rankings. Touching up the template wasn't going to fix any of that. A different site had to be built, with a journey that led from doubt to booking, without losing the business's identity.

The template didn't explain a single treatment or lead anyone to booking.

Source: The Medspa by Rayray · Full report, §3 The client and the starting point

The site we studied most was drsubbio.com ↗, for one very specific reason: where it places its buttons. There, booking stays within reach at every moment, with calls to action ranked by importance that follow the visitor from start to finish without ever feeling pushy. Half the project's thesis came out of that analysis.

After that we looked at Glanz Aesthetics, SkinSpirit, and Peachy, and picked up bits and pieces from each: the editorial tone, how they handle real skin photos, the rhythm of alternating sections, and restrained typography. We run this exercise before writing a line of code on any project, always looking at major brands in the same industry. What we borrow is the structure and the logic that leads someone to book, never the color, photos, story, or copy, which stay the business's own.

Three structural decisions came out of all that. Buttons are spread across several layers depending on the device, following the logic we saw at drsubbio.com (more detail on that below). Each service's content runs as an article, with no cards or tables, because the brands doing best in this industry explain a lot, and explain it well. And headlines are short, with the text underneath doing the work of explaining and no decorative subheadings, a rule we had to defend in every single round of revision.

From drsubbio.com we inherited where the buttons go. The photos and the story are still Rayray's own.

Source: The Medspa by Rayray · Full report, §4 The research: not designing from scratch · Interview with the Damorus Projects team, 2026: premium references in the industry

A card that says "scalp PRP" explains nothing to someone who's never heard of the treatment. That's why the project's first bet was content: each treatment family has its own subpage with a long article explaining it. Google favors deep, well-organized content, and an article on what scalp PRP is can rank where a three-word card never would. AI assistants, for their part, cite pages that explain things (we call that GEO, generative engine optimization), and a site with written answers has something to surface when someone asks them about med spas in Irving.

For the business, something else matters even more. A client who already knows what a neuromodulator is, how long it lasts, and what to expect arrives at the consultation with less fear and more resolve.

The site has six views in total: the home page, four articles (injectables; facials and skin, covering facial PRP, peels, and luxury facials; microblading; and hair restoration with PRP), and a final page to find the spa. Since each family answers a different search, it has its own address, with its own headline, photo, and copy, and can be the very first page of the site someone opens. Every article ends with a button, for anyone who read all the way to the bottom.

We looked for named reviews we could cite and found none, so the site has no reviews; social proof sits where the evidence already existed, in the business's own results posts. We followed the same standard with photos. No stock library: we pulled ten from the business's own Wix site and re-downloaded them at a size optimized for the web. The structured data, of the health-and-beauty type, also comes from its real listing and includes address, phone, email, hours, service area (Irving, Las Colinas, Coppell, Valley Ranch, Dallas, and Grapevine), and links to its social accounts. Only what could be verified was used.

Whoever has already read how their treatment works arrives at the consultation with less fear.

Source: The Medspa by Rayray · Full report, §5 Bet 1: content as the salesperson (SEO/GEO) · The Medspa by Rayray · Full report, §6 Information architecture · The Medspa by Rayray · Full report, §4 and §9 Real data, original photos, and technical SEO

The second bet targeted one very specific moment: someone finally decides and can't find how to book the appointment. It's an emotional decision, and every second spent hunting for a button drains their motivation. We solved it with three mechanisms that take turns depending on the device and the part of the page, so a way to book is always visible without the site ever feeling pushy.

The first is the top bar. Over the cover photo it's transparent, so it doesn't block the image, and once you scroll past the photo it picks up a background and a shadow; the logo, the phone number, and the results button read clearly either way. On desktop there are also two fixed buttons at the bottom right, one to book and one to request a consultation, which slide in from the edge like a blind when the page loads. On mobile those buttons would get in the way, so they're hidden, and a bottom bar takes their place instead, with call, book, and view results, within thumb's reach and laid out the way people already know from apps.

The team asked for one change to the main banner: drop the booking button and put in "View results" instead, which links to Instagram. The bet is that someone who just arrived is more tempted to look at results than to book an appointment right off the bat.

Below the cover, the site asks where you'd like to start and offers six rows, each with a number, a large name, a one-line description, and a thumbnail. That way, visitors go straight to what interests them without having to read everything. The team specifically asked that the thumbnails not appear only on hover, and the team was right: the photo is what invites the tap. Further down, an invitation to a free consultation asks for something small first, just coming in to talk.

What the site doesn't have is a booking system. The form on the final page, once submitted, mockups an email with the details already filled in and opens it in the sender's own email app, addressed to the business, which today handles things by email and phone. The footer newsletter works the same way. There's no online calendar or payment gateway either. If the project continued, the next step would be integrating the business's own scheduling tool.

No screen on the site is ever missing a way to book.

Source: The Medspa by Rayray · Full report, §5 Bet 2: booking everywhere · The Medspa by Rayray · Full report, §8 Applied conversion psychology · The Medspa by Rayray · Full report, §9 The real form and §12 Honesty

The cover line is "Beauty, redefined," and the design follows that lead: a magazine-style aesthetic in black, white, and nude tones, with quiet luxury. We left out the typical spa purples, gradients, and shimmer, and stuck to a small palette on purpose, because restraint reads as luxury and too many colors read as improvised. The palette rests on four: a near-pure black, a bone-colored paper tone, a warm nude as the single accent, and a mocha for text details. On top of that there's pure white, for sections that need room to breathe.

Black and white carry the idea of clinical cleanliness and luxury, and the nude brings in something human, the color of skin. A med spa is medicine and beauty at once, and the palette tries to say both. Black on bone, on top of that, reads with very little effort, something necessary with such long articles. Sections alternate light and dark, and the dark ones recall the full-ink pages of an expensive magazine. The skin-pink band appears exactly once, in the brow before-and-after, where that color is precisely the subject.

We got the type wrong at first. The first version used Bodoni Moda for headlines, gorgeous in theory, but on screen and at large sizes its hairline strokes made it nearly unreadable, and the cover headline read poorly. We switched to DM Serif Display, using its italic to highlight words, and set the body copy in Jost. The editorial feel stayed intact, and now it reads effortlessly.

Two more details. The animations use a custom easing curve, because the default one gives away a template. And the shapes change on purpose from section to section: full-bleed photos, rounded thumbnails, vertical frames, and a map with a 4-pixel black border.

We swapped Bodoni Moda for DM Serif Display because the cover headline was nearly unreadable.

Source: The Medspa by Rayray · Full report, §5 The visual concept: Beauty, redefined · The Medspa by Rayray · Full report, §7 Visual design: the science behind what you see

The first one is already told: the headline type was unreadable, and we had to swap it for one that holds up better on screen. The second was harder to spot. The cover line types itself out letter by letter, and while it did, the whole page kept jumping downward; even the word "Beauty" shifted. It happened because the effect kept inserting new text, and the headline gained height with every letter. We fixed it by drawing every character invisibly from the start, so the headline immediately occupies its final two-line height, then revealing them one by one with a cursor trailing behind. Ever since, on any text effect, we reserve the space before animating.

The third is the one we learned the most from. The index rows were supposed to slide in from the left, in a staggered stack, but they kept appearing from below instead; it got reported twice. The code had the right rule, but the rule that returned each element to its place carried the same weight as the direction rules written after it, and because of the stylesheet's order, those later rules won out and the elements stayed frozen. A more specific closing rule, one that always wins, fixed it. What we didn't expect was that the same bug was silently disabling other animations on the site, and every one of them came back to life with the fix. On top of that, some reviews kept showing the old version because the browser had it cached.

The next three showed up on mobile. The transformations band looked squeezed against the left edge, because its photo strip had inherited a six-column grid; we turned it into a block with a track twice as wide (four times on mobile) that loops through its 16 photos. The results button was spilling out of the navigation on narrow screens, so we hid it there, since that action already lives in the bottom bar and the menu. The footer looked off and took several passes to get right; it ended up with the Damorus credit on the left, as plain text, and the social links centered.

The last three had to do with testing and publishing. In the mobile emulator, the cover shrank to 235 pixels tall because a rule was overriding the minimum height, so we gave it its own height for mobile and removed the rule that was overriding it. At publish time, images using relative paths failed to load at the clean address, the one with no trailing slash, and they had to be converted to absolute paths during deployment. And the testing browser "lied." Since the route is served through a rewrite, it would sometimes show an error or the home page even though the page existed. From then on we verified with direct requests to the server, checking the title and the images, and with a parameter that skips the browser's cache.

Fixing the index rows brought back other animations that the same bug had been silently disabling.

Source: The Medspa by Rayray · Full report, §11 Problems and solutions (1 through 9) · The Medspa by Rayray · Full report, §10 Build diary and rounds of revision

Rayray produced several rules we now use in everything we build, almost all about details a visitor never sees. A headline that's hard to read gets changed, no matter how elegant it is. Text effects reserve their space before animating, so they never push the content around. In entrance-animation systems, we watch how much weight each style rule carries and add a closing rule that always wins. And on multi-page sites, animations get rebuilt on every route change, something we also had to learn on Pastime Lanes↗.

Others have to do with publishing. What's live gets verified with direct requests to the server, skipping the cache, because the testing browser can lie. And when publishing to clean addresses, image paths get converted to absolute.

The last two are about strategy. For any service business, article-format content is the core ranking strategy. And for businesses that sell by appointment, clinics, studios, practices, or academies, booking runs in three layers: a top bar, fixed buttons on desktop, and a bottom bar on mobile.

It's worth saying what the site doesn't have. There's no online booking: appointments are requested through the form that mockups an email, or by phone. There are no written reviews either, since we found no verifiable ones. And with no analytics installed, there's no traffic or conversions to report. We use it as an example of what fits in our Silver plan, from $1.000.000 COP$500 USD€500 EUR: a site built for the business, fast, and ready for search engines. If your business sells by appointment, the details are in pricing↗.

Every one of these rules came out of a problem we had to solve on this site.

Source: The Medspa by Rayray · Full report, §15 Lessons and how they fed into the Damorus system · The Medspa by Rayray · Full report, §12 Honesty: what wasn't done and why · Damorus Projects, plans and pricing (2026): Silver plan