Dr. Choi’s Breast & Thyroid ClinicDr. Choi’s Breast & Thyroid Clinic

From Ribbon to Butterfly

We redrew the website of a breast and thyroid clinic
in two directions: a night film and a day lens.

Client: Dr. Choi’s Breast & Thyroid Clinic
Scope: Website renewal proposal
Year: 2026

01 · RIBBONRibbon · Breast
A shape already in the logo. Draft A's film opens with a flowing satin ribbon that ties itself into the pink ribbon.
02 · FANFan · Ultrasound
The fan-shaped sector through which an ultrasound probe looks inside the body. Because screening and biopsy both take place on this fan, both drafts explain the biopsy process inside this shape.
03 · BUTTERFLYButterfly · Thyroid
The thyroid at the front of the neck is butterfly-shaped, with two lobes joined in the middle. This shape fills the other half that was missing from the logo.

01 / OVERVIEWOverview

A clinic that looks after
the breast and thyroid

Dr. Choi’s Breast & Thyroid Clinic is a surgical clinic by Jeongja Station in Bundang offering breast screening, vacuum-assisted breast biopsy, breast plastic surgery, thyroid screening and radiofrequency ablation. Its current website is a WordPress site built in 2014, packed with explanations across a menu of five groups and twenty-eight pages.

Most people who open this clinic's website arrive worried. They have felt a lump, found further tests listed on a screening report, or been told there is a lump in their neck. So we made the same content at two temperatures: a night screen for coming in with worry, and a day screen for heading home after hearing the results.

2014
Copyright year of the current websiteFive menu groups built on WordPress
28
Pages in the current menuAbout the clinic 9 · Breast & screening 5 · Breast plastic surgery 8 · Thyroid & radiofrequency 3 · Community 3
2
Drafts at two temperaturesRibbon Motion Film by night · Lens & Bloom by day
722
Scroll-film framesDraft A ribbon 240 · Draft B opening film 241 · magnolia 241

2014
Current websiteNOW
A WordPress site with five menu groups and twenty-eight pages. All three slides on the opening screen use the same sentence.
2026.11
Draft A · Ribbon Motion FilmROUND A
On a dark plum background, twelve scenes are linked by a film in which a ribbon becomes the pink ribbon, then an ultrasound fan, then the butterfly-shaped thyroid.
2026.11
Draft B · Lens & BloomROUND B
On a bright pearl background, eleven scenes are linked by a film that moves closer to a person by a window and a film of a magnolia in bloom.
2026.11
Remaking the opening screen
We changed Draft B's opening screen from a lens graphic that magnified words to a film that moves closer to a person.
2026.11
This record
How we reread the logo, mapped the patient's wait and rewrote the 2014 sentences.

02 / THE MARKReading the mark

A ribbon tied
to the U

The current logo reads 「최성림 +U 외과」 (“Choi Seong-rim +U Surgery”). The 「유」 (yu) in the middle of the name is written as a bold magenta U, with a pink ribbon tied around its left stem.

01 · UThe letter U
The logo writes 「유(乳)」, the yu of the Korean word for breast, as the Latin letter U. In the empty space inside the U, a small Hangul 「유」 shows the sound and the meaning together.
02 · RIBBONPink ribbon
The ribbon wraps around the U's left stem. One strand crosses diagonally in front of the stem; the other loops behind it and falls downward.
03 · PLUS「+」
The tail stretching sideways and the strand falling downward cross like a plus sign, so the whole mark reads as “+U.”
04 · THYROIDThe empty slot
The English name says Breast & Thyroid Clinic, but nothing in the mark stands for the thyroid. Both drafts filled this empty slot with a butterfly.

The current logo

U#E8517C
Ribbon#F59DAB
Logo lettering#AD6491

The mark was redrawn for this explanation from the current logo image (424 × 111); the colors are measured from the logo image.

03 / SHAPESRibbon · Fan · Butterfly

Speaking
in three shapes

Most care at this clinic begins with looking: first through mammography and ultrasound, then, when needed, by taking tissue while watching the ultrasound. So both drafts describe the clinic through three shapes: the ribbon from the logo, the fan of the ultrasound screen, and the butterfly of the thyroid.

01 · RIBBONRibbon · Breast
A shape already in the logo. Draft A's film opens with a flowing satin ribbon that ties itself into the pink ribbon.
02 · FANFan · Ultrasound
The fan-shaped sector through which an ultrasound probe looks inside the body. Because screening and biopsy both take place on this fan, both drafts explain the biopsy process inside this shape.
03 · BUTTERFLYButterfly · Thyroid
The thyroid at the front of the neck is butterfly-shaped, with two lobes joined in the middle. This shape fills the other half that was missing from the logo.

Draft A · NightOpening film: a flowing satin ribbon
Draft B · DayServices: pearls on pink silk
Draft A · NightBiopsy: an ultrasound drawing inside the fan
Draft B · DayBiopsy: a four-step dial
Draft A · NightRadiofrequency ablation: the butterfly-shaped thyroid
Draft B · DayServices: a glass butterfly refracting light

04 / THE WAITThe wait

The few days
of waiting for results

We divided the time from the day a patient first looks into this clinic to the day the results call comes into seven moments, and defined what the website should do at each one.

Worry peaks during the 4–5 days of waiting for results after the tests. Both drafts gave these few days a scene of their own.

01 The day you notice
You feel a lump, or your screening report says further tests are needed.

What the website doesMakes phone booking easy to find on the opening screen, and an “If you notice these changes” checklist helps people judge whether they need to see a doctor.
02 Calling to book
First you wonder where to go, and whether you can go today.

What the website doesPins the call-to-book button to the top and bottom of the screen, and shows opening hours together with whether the clinic is open right now.
03 Test day
You have a mammogram and a breast ultrasound on the same day.

What the website doesWe opened the services section with dense breasts, the reason the two tests are done together.
04 Biopsy
If needed, tissue is taken right then, while watching the ultrasound.

What the website doesShows the four steps of vacuum-assisted breast biopsy in illustrations beforehand, and leads with “One small incision · Home the same day.”
05 The 4–5 day wait
Biopsy results usually take 4–5 days. It is the time that feels longest.

What the website doesWe built a scene around the line “We won't leave you alone, even in the few days you wait for results,” and added a note that results are given by phone as soon as they are ready.
06 The results call
You hear the results and decide the next step with the same doctor.

What the website doesWe made “One doctor, all the way through” the promise line, and also noted the referral to a tertiary hospital when treatment there is needed.
07 Afterward
Treatment, post-surgical care, and regular check-ups follow.

What the website doesShows the operating room's safety devices and equipment, then turns the night screen to morning with the line “Come in anxious, go home reassured.”

The level of worry is an illustration, not a measurement. The time it takes to get biopsy results follows the clinic's own information.

Come in anxious,
go home reassured

This line comes from the dawn curtain scene in Draft A. From here on, this case study also moves to a daytime background.

05 / WORDSRewriting the wording

Words that reassure
without promising

A clinic's words sound louder when the listener is anxious. “Perfectly” raises expectations; “burned and killed” raises fear. Medical advertising, too, must not guarantee treatment results or compare one treatment with another.

So we reread the 2014 sentences one by one, turning wording that promised results into sentences that explain the process, and wording that sounded frightening into facts you can see.

2014 websiteOpening screen slides

Everything about cancer diagnosis and treatment for the breast and thyroid, and about breast plastic surgery
1. 1This wording promises everything that could be done. We wrote the actual scope instead, as in “from examination to treatment.”
In the drafts

Draft ABreast and thyroid, from examination to treatment, all in one place

Draft BBreast and thyroid: up close, in detail, all the way through.
2014 websiteVacuum-assisted breast biopsy page

… with no scalpel or open surgery and without pain, tissue can be obtained under local anesthesia perfectly, and not only that … it is a procedure that can simply and completely remove it.
1. 1How it feels differs from person to person. We described what is done instead, as in “a small incision after local anesthesia.”
2. 2We don't use wording that guarantees results.
3. 3It makes light of the procedure. We changed it to a visible fact, such as “one small incision.”
In the drafts

Draft A · Draft BOne small incision, and you go home the same day
2014 websiteRadiofrequency ablation page

But because the thyroid tissue burned and killed by radiofrequency heat is left in place …
1. 1True, but frightening to hear. For someone waiting for results, the process comes first.
In the drafts

Draft BTreatment under ultrasound guidance, without a skin incision
2014 websiteAdvantages of radiofrequency ablation

No scars remain. Unlike surgery, there are virtually no side effects.
1. 1Instead of asserting, we show the course as an “example.”
2. 2We don't use wording that compares it with other treatments.
In the drafts

Draft A · Draft BThe course may differ from person to person. As a rule, thyroid cancer is treated with surgery.
2014 websiteAbout breast plastic surgery

… we will resolve even your concerns about aesthetic beauty.
1. 1This wording promises a result. We wrote what the plan is based on instead.
In the drafts

Draft BBringing breast surgery experience to concerns about shape

Six rules both drafts kept

01We avoid words like “most,” “best” and “perfect”
Instead of wording that guarantees results, we describe the process and how long it takes.
02We don't make definite claims about pain, scarring or side effects
How it feels differs from person to person, so we describe what is actually done, as in “after local anesthesia” or “without stitches.”
03We keep reviews and before-and-after photos off the first page
The current site's patient reviews board was not brought onto the drafts' first page.
04We present the course as an “example”
We labeled the changes after radiofrequency ablation “Example course after the procedure” and added a line saying they may differ from person to person.
05We state the principle alongside it
We placed the line that thyroid cancer is, as a rule, treated with surgery right below the explanation of radiofrequency ablation.
06We show illustrations instead of procedures
Instead of photos of real procedures, we explain the process with ultrasound-like illustrations and a dial.

The 2014 sentences are quoted from the opening screen and treatment pages of the current website (checked November 2, 2026), with only the spacing corrected.

06 / COLORTwo temperatures of pink · Type

Same pink,
two temperatures

The logo's U is magenta #E8517C, and the velvet sofa in the waiting lounge is a coral red. Carried over as is, this pink works only for large text on a white background, and its light looks weak on a dark one.

So Draft A brightened the pink for the night, and Draft B deepened it for the day.

U#E8517CThe logo's U
Ribbon#F59DABThe logo's pink ribbon
Logo lettering#AD6491The wordmark letters around the U
Waiting lounge#D94440Velvet sofas in the waiting lounge

We set the same sentence on both backgrounds.

Draft A · Night background #12090F

Up close, in detail, all the way through

Biopsy results usually come back in 4–5 days.

Logo U #E8517C: 5.50:1Body text OK
Rose #FF6F98: 7.44:1Even small text

Draft B · Day background #F6F2EE

Up close, in detail, all the way through

Biopsy results usually come back in 4–5 days.

Logo U #E8517C: 3.19:1Large text only
Rose Deep #A8235A: 6.17:1Body text OK

In both drafts, pink used as an accent covers less than 0.5% of the screen. Backgrounds, photos and films carry the large areas; pink is kept for buttons and emphasized words.

Draft A · Night palette

Night background · layers47.1%
Bright background after dawn24.8%
Photo · Film21.6%
Text6.2%
Pink accents0.3%

Night#12090FBackground of the night scenes
Plum#2B1322Layers of cards and scenes
Rose#FF6F98Night accent · buttons
Rose Light#FFA6BFLight in the film · secondary accent
Ink#F7EEF2Night text
Dawn#FBF3F6Bright background after dawn

Draft B · Day palette

Pearl · blush background64.5%
Photo · Film20.6%
Dark scenes13.4%
Text1.0%
Pink · aqua accents0.4%

Pearl#F6F2EEBackground of the day scenes
Blush#F6E2E8Magnolia · Layers of panels
Ink#1C1530Day text
Rose#CF3570Buttons · large-text accent
Rose Deep#A8235AAccent for small text
Aqua#8FDED3Ultrasound glow in the thyroid and equipment sections

Contrast ratio between text and background
Pair	Swatch	Contrast	Use
Draft AInk / Night	Up close 4–5 days	17.23:1	Even small text
Draft ARose / Night	Up close 4–5 days	7.44:1	Even small text
Draft ALogo U / Night	Up close 4–5 days	5.50:1	Body text OK
Draft BInk / Pearl	Up close 4–5 days	15.72:1	Even small text
Draft BRose Deep / Pearl	Up close 4–5 days	6.17:1	Body text OK
Draft BRose / Pearl	Up close 4–5 days	4.28:1	Large text only
Draft BLogo U / Pearl	Up close 4–5 days	3.19:1	Large text only
Draft BWhite text / Rose button	Up close 4–5 days	4.77:1	Body text OK

Pretendard
Up close, in detail, all the way through
Korean headings and body text in both drafts
Pretendard 800
Age 35 · 4–5 days · 200m
Large numbers and promise lines
JetBrains Mono
FOCUS ×1.0 · SCAN 100%
Draft B's focus and scan readouts

Contrast is calculated according to WCAG 2.1 (4.5:1 or higher for body text, 3:1 or higher for large text). On-screen shares count the pixels close to the background, photo, accent and text colors in scene captures from both drafts.

07 / PHOTOTexture, not the body

Not showing the body,
speaking through texture

Photos for a clinic that treats the breast and neck call for care. Instead of showing bare bodies, the drafts speak through gestures in Draft A and through materials in Draft B.

In Draft A, people rest a hand on the chest or neck; in Draft B, the objects are pearls, satin and a glass butterfly. Set the same three areas of care side by side as human gestures and the texture of objects, and the difference in temperature between the two drafts becomes clear.

Draft A · A person resting a hand on an ivory blouse — **Breast & screening**Draft A chose a hand doing a self-exam; Draft B, a round, precious pearl.

Draft B · Pearls on pink silk — **Breast & screening**Draft A chose a hand doing a self-exam; Draft B, a round, precious pearl.

Draft A · A back view in a silk dress — **Breast plastic surgery**Draft A shows the line of a silhouette; Draft B, the curves of satin.

Draft B · Satin falling in soft curves — **Breast plastic surgery**Draft A shows the line of a silhouette; Draft B, the curves of satin.

Draft B · A glass butterfly refracting light — **Thyroid**Draft A used fingertips touching the neck; Draft B, a butterfly that echoes the shape of the thyroid.

Photos of the clinic's spaces and equipment are real ones from the current website; photos for the services and scenes were staged for the drafts. No photos of real patients or medical staff were used.

08 / STRUCTUREFrom twenty-eight pages to one stream

Twenty-eight pages
into one stream

The current site is split into five groups and twenty-eight pages: About the clinic · Breast & screening · Breast plastic surgery · Thyroid & radiofrequency · Community. A first-time visitor needs only some of them.

Both drafts turn the first page into one long scroll and let detailed explanations continue on the existing subpages. Small chips on each service are the way in.

The current menu five groups · 28 pages

About the Clinic 9

greetings
Medical team
partner
Clinic information
Medical equipment
Directions
Organizations we serve
Clinic tour
Document requests

Breast & Screening Clinic 5

Breast screening
Common conditions
Vacuum-assisted breast biopsy
Microcalcification biopsy
Breastfeeding

Breast Plastic Surgery Clinic 8

Safe plastic surgery system
Breast augmentation
Breast augmentation revision surgery
Breast reduction
Sagging breasts
Gynecomastia
Accessory breast
Inverted nipples

Thyroid & Radiofrequency Clinic 3

Common thyroid conditions
Thyroid screening
Radiofrequency ablation

Consultation & Community 3

announcement
Patient reviews
Medical news & columns

The patient reviews board was not brought onto the drafts' first page.

Draft A · Twelve scenes 31,166px

Ribbon film5,580
About the clinic904
Services3,761
Vacuum-assisted breast biopsy3,780
Thyroid radiofrequency ablation3,960
Safety devices in the operating room990
Diagnosis and treatment equipment568
Dawn curtain2,520
Medical team1,843
Clinic tour4,862
Self-check · Closure notice1,027
Directions1,096
Footer274

Draft B · Eleven scenes 30,456px

Up close · In detail · All the way through4,500
The clinic's promise1,061
Services3,150
Vacuum-assisted breast biopsy3,060
Thyroid radiofrequency ablation3,510
Magnolia film3,240
Equipment ring3,407
Medical team1,074
Clinic tour4,680
Self-check964
Directions1,284
Footer527

Bar lengths are proportional to scene heights measured on a 1440 × 900 screen, including the segments where the screen stays pinned while a film advances or panels unfold.

09 / ROUND ADraft A · The night film

Draft A · Ribbon Motion Film

Ribbon Motion FilmBreast and thyroid, from examination to treatment, all in one place

This draft opens with a 240-frame ribbon film on a dark plum background and runs through twelve scenes. Night scenes continue until the dawn curtain brings in a light background; from the medical team to directions, it reads as a daytime screen.

A film in which the ribbon becomes the pink ribbon, then a fan, then a butterfly, plays as you scroll
Three service cards stack one after another in the same spot
Inside an ultrasound drawing, a needle approaches the lesion through four steps
An ECG line draws itself as you scroll, introducing the operating room's safety devices

Night · Plum · Rose · Rose Light · Dawn

The first lines over the ribbon film
As the film plays, three lines such as “Regular screening is needed from age 35” rise one after another.
Stacking services
Cards for breast & screening, breast plastic surgery and thyroid & radiofrequency stack in the same spot, with chips that lead straight to the subpages.
A biopsy inside the fan
Inside the ultrasound drawing, a needle approaches the lesion as the four steps on the left advance with the picture.
A shrinking nodule
A nodule inside the butterfly-shaped thyroid shrinks after radiofrequency treatment, drawn alongside an example course after the procedure.
An ECG drawing itself
An ECG line draws itself as you scroll, followed by four devices, from the vital-signs monitor to the electrosurgical unit.
Dawn curtain
With the line “Come in anxious, go home reassured,” the screen brightens and moves into the medical team section.

In the recordings, the doctor's photo was replaced with a still life of an exam room, and the phone number, address and business details were replaced with other text or hidden.

10 / ROUND BDraft B · The day lens

Draft B · Lens & Bloom

Lens & BloomBreast and thyroid: up close, in detail, all the way through.

This draft opens on a bright pearl background with a film that moves closer to a person by a window, and runs through eleven scenes. Only in the thyroid and equipment sections does it drop into a dark background, using the aqua of an ultrasound screen.

The 241-frame opening film is split into three segments: up close, in detail and all the way through
Pearl, satin and glass-butterfly panels unfold one after another as you scroll
The four biopsy steps turn like a dial
Lines about the few days of waiting for results pass over the magnolia film

Pearl · Blush · Ink · Rose · Aqua

Up close · In detail · All the way through
As the camera moves toward the person by the window, the three words come closer one by one, come into focus, and draw a line to the edge of the screen.
The promise and the numbers
Under the promise “Tests on the same day; one doctor, all the way through,” we set out the numbers: age 35 · 4–5 days · 200m · 2 hours.
Three unfolding panels
Pearl, satin and glass-butterfly panels widen one at a time as you scroll, introducing the services.
The turning dial
The four biopsy steps sit around a dial that turns one notch at a time as you scroll.
The neckline after the scan
As a beam of light sweeps across the neckline, the screen turns into something like an ultrasound image, followed by an example course of a nodule shrinking.
Magnolia film
As the bud opens, the line “We won't leave you alone, even in the few days you wait for results” passes by; when the flower is in full bloom, it ends with “For the everyday life that will bloom again.”

Why we remade
the opening screen

Draft B's opening screen was at first a graphic in which a glass lens magnified “Up close · In detail · All the way through.” The screen was clean, but with no person in sight, it never drew people in.

So we remade it as a 241-frame film that moves closer to one person by a window: from a wide room to a profile, to fingertips resting on the neck, to the light beyond the curtain.

Up close, in detail, all the way through.

Original · Lens graphicA redrawn sample of the original lens graphic. Hover with a mouse and the lens follows.

It moves from a wide room to a profile, to fingertips resting on the neck, to the light beyond the curtain. We picked 81 of the 241 frames in Draft B's opening film.

Frame

Remade · A film that moves closer to a person

In the recordings, the doctor's photo was replaced with a still life of an exam room, and the phone number, address and business details were replaced with other text or hidden.

11 / COMPARESame content, two temperatures

The same copy,
by night and day

Both drafts were built from the same copy. With the same scene laid one over the other, drag the handle in the middle to see how the night screen and the day screen differ.

The screen in your hand

Both drafts have separate films made for portrait screens. The ribbon and the person sit near the top and the text near the bottom, so it reads where the thumb rests.

12 / DETAILDetails at your fingertips

Answering first
on a small screen

What people look for most on a clinic website are the opening hours, the location, and whether they can come in now. Here you can try the three small features we put in the drafts.

Is the clinic open now?

Choose a day and time to see how the notice in “Directions” changes.

Mon

Tue

Wed

Thu

Fri

Sat

Sun

Day Time 10:30

Open now · Lunch break from 1 PM (Closed on public holidays)

Based on weekdays 09:00–18:00 (lunch 13:00–14:00) and Saturdays 09:00–13:00. On Friday evenings, Saturday is given as the next opening.

If you notice these changes

Select the items that apply to you. The wording matches the self-check in both drafts.

Select any item that applies to you.

Early breast cancer usually has no symptoms. This checklist is not a substitute for diagnosis.

Biopsy in four steps

We brought Draft B's dial over so you can turn it with the step buttons.

The location and size of the lesion are confirmed by viewing the ultrasound image in real time.
After sufficient local anesthesia is applied to the skin and breast tissue, a needle is inserted through a small incision.
Tissue is drawn into the needle by vacuum and collected; benign lumps are sometimes removed at the same time.
The incision is not stitched but covered with a special dressing, and after pressure is applied to stop any bleeding, you go home the same day.

Biopsy results usually come back in 4–5 days, and we let you know by phone as soon as they are confirmed.

13 / RETROSPECTLooking back

Finding the half
missing from the logo

We proposed two directions, and they did not lead to a final selection. Even so, through this work we reread the ribbon tied to the logo, filled the thyroid's empty slot with a butterfly, and turned the few days of waiting for results into a scene on screen.

Draft A · NightRibbon Motion Film
Dark plum background · twelve scenes · 240-frame film
Draft B · DayLens & Bloom
Pearl background · eleven scenes · films of 241 · 241 frames
This recordFrom Ribbon to Butterfly
Reading the mark · The wait · Rewriting the wording

01Finding the half missing from the logo
The name included Thyroid, but the mark had only a ribbon. Adding a butterfly gives the two areas of care equal weight.
02Designing the wait
A clinic website isn't read only before a visit. We started from the fact that people open it again during the few days of waiting for results.
03People over graphics
The lens graphic was clean, but it never drew people in. We replaced it with a film that moves closer to a person, and polished the transitions so that no raw screens, such as a default horizontal scroll, show between the staged scenes.

14 / CREDITSDR. CHOI’S CLINIC · BLUECANVAS WORKS

BREAST & THYROID CLINIC HOMEPAGE RENEWAL