DTLA Gynecology logo

Ob-Gyn Office Website

DTLA Gynecology


An informational website for a new solo obstetrics-gynecology practice located in downtown Los Angeles.

The website requirements were straightforward. The challenge was to get to the final result with minimal stress. We wanted a small focused site with just enough copy to do the job. Editing an idea down to a short sentence involves more work than  leaving it a paragraph.



  • Squarespace 7.1
    Elation EMR


  • Web Designer



Dr Yamaguchi, a returning client, was leaving her previous practice after it was acquired by a large healthcare chain. When we spoke in August 2020, she was juggling seeing patients and finalizing leasing details for a new office, and business registration for her new practice. Her move-in target was the start of 2021. I was moving from Hong Kong to LA in early November.

[Fig01] Home Page


Dr Yamaguchi's practice was clearly not at either extreme of ob-gyn services in LA. These can range from natural childbirth at one extreme to cosmetic gynecological procedures at the other. Her practice was focused on providing convenient gynecological services to women working in and around downtown.

We iterated on a SEO friendly, list of services using plain English terms when possible. We kept the descriptions short as we're not trying to build a medical reference. There are plenty of reputable sites out there with good information. We did not have the time to write comprehensive articles about all her procedures and we felt outsourced content gave mediocre results.

[Fig02] List of Services

The Look

Dr Yamaguchi's reviews talk about her fun but no nonsense bedside manner. How does that translate into the appearance of a medical professional's office or website?

A lab coat is basic, a spa experience luxurious. Branding from the inside out seemed out of place given her positioning and profession. Working from the outside in helped provide a context for a fairly arbitrary choice.

We seeded the color discussion using the websites of local women's clothing retailers as indicators of her clientele's taste. Then we looked at a color spectrum of competitor websites and found a gap in the blue part that differentiated her site from the others.

[Fig 03] Color Strategy

Her new office location was not finalized: any photos could not show choices about colors, furniture, or decor that were still in progress. On our previous collaboration we let the interior design of the office drive the website colors. This time, the web design had to accommodate a broad choice of office decor.

Squarespace 7.1

[Fig04] Quick Iterations on Color Variants with the new 7.1 Interface

This was my first project using Squarespace's new 7.1 setup. A new interface allows global colors and fonts settings to cascade down while allowing local exceptions and quick iterations on variants. Other parts feel like a work in progress and with suboptimal support. I coded around shortcomings but a DIYer can run into trouble.

The new 7.1 templates favor a minimal Swiss modern style using san-serif type. Free Google fonts are included with Squarespace but ones using variable font technology have to be custom-coded. We chose Jost, a modern san-serif as our main typeface.

The website's colors are derived from 3 labeled as accent, light and dark in addition to black and white. Our choice of blue generated 8 color themes using a monochrome variants of blue. A style page with sample sections of these colors help us verify that all the themes satisfied WCAG contrast requirements.

Elation Patient Signup Interface
[Fig05] Patient Signup

Business needs drove website features

We encouraged most patients to self book online through Elation, her electronic medical records provider. The website was designed to allow self-booking with no intermediate steps between the website and the Elation booking page.

I went through the new patient signup process myself to identify issues that could be managed within the limitations of the platform.

Focus on client goals

Designers are great at visualizing possibilities. However mocking up and reviewing every potential avenue is time consuming. It's unproductive if everyone gets exhausted by decision overload.

I reduce the number of choices by mapping out goals early and limiting choices to ones that direct the client towards their goals. I always frame choices around business goals and the consequences of each choice.

Why stress over the inconsequential?