HLB THERAPEUTICS · WEBSITE RENEWAL PROPOSAL
HLB Therapeutics homepage renewal proposal
Brand interpretation · Information structure · UI design · Interaction
HLB Therapeutics is a company that develops new drugs for rare diseases for which there are no prescription drugs and distributes temperature-sensitive biopharmaceuticals nationwide. We are developing RGN-259, a treatment for eye diseases, and OKN-007, a treatment for glioblastoma, and operate a pharmaceutical cold chain at seven centers across the country.
After BlueCanvas created the current HLB Therapeutics website, the company's name and CI changed, and the cold chain business grew nationwide. As the company grew, we thought it was time to redesign the website, so we proposed a direction for renewal. This page is a record of the proposal and process.
Operating HLB Therapeutics homepageIt started from the numbers the company walked by.
Year the company was founded
Changed name to HLB Therapeutics in 2021
The year of listing on KOSDAQ
HLB Group affiliated bio company
Designated as an orphan drug by the U.S. FDA
RGN-259 · OKN-007
National Cold Chain Center
From Guri headquarters to Jeju
Number source: HLB Therapeutics website public data (confirmed October 2026)
Developing Companies Vaccines Carry Companies First On To people HLB Therapeutics Second Of Which toward should you look? two business d The company's story to be told sentence
I read the website we created again with the eyes of a first-time visitor. The company has changed greatly over the years, and the screen has not been able to keep up with the changes.
When we first created the website, the color of HLB was orange. After the group CI was changed to red, the logo was replaced, but the old orange remained in the tabs and highlight colors of the subpages. On one screen, two colors represented companies from different periods of time.
Reposition the color based on the red of the groupThe pipeline was introduced separately in the dark DNA image, and the cold chain was introduced separately in the distribution center table and map. It was difficult for investors watching the development of new drugs and pharmaceutical companies trying to entrust vaccine distribution to read the same principles from the same company.
Combining two businesses in one sentence: “Until we reach”Announcements of clinical progress, information on shareholder meetings, and certification news were followed in the same list. It was difficult for shareholders, partners, and cold chain customers to select and read the news they needed.
Label each news with a program or business tag so people can read them selectively.A variety of people visit the website of a listed bio company more than you might think. Visitors were divided by reason for opening the website, not by age or occupation. This is because for different reasons, the screen you should look at first also varies.
What does this announcement mean?
In the design Recent news strip on the first screen
Can we confirm the basis of this substance?
In the design List of research materials by program
Can I entrust you with our vaccine?
In the design Temperature scale and center map
Is a drug being developed for this disease?
In the design, Easy explanation cards for each disease
From licensing introduction to clinical trials and approval, it takes a long time for a substance to reach patients. Developing new drugs is about enduring the test of time.
From the center to the hospital, biopharmaceuticals must not exceed specified temperatures. Cold chain is about maintaining that temperature until the end.
The time and temperature that were observed eventually reach one person. According to the management vision Human Life Better, a better life begins at that moment.
If you translate Human Life Better into Korean, it means 「until it reaches the patient」.
Speak in steps and dates instead of exaggerated qualifiers. This is because one sentence on the website of a listed bio company can be used to make an investment decision.
Next to the name of the disease or substance, an explanation that the patient and family can read is added. Instead of erasing technical terms, keep simple language nearby.
Clinical news and announcements are always displayed in the same order and format. The format must be the same so that you can compare old news and new news side by side.
RGN-259 is an eye drop being developed for corneal diseases. I thought that the website of a company developing medicine for the eyes should be clearly readable more than anything else.
The first screen now was a picture of a person inserting eye drops. Rather than focusing on the facial expressions of unfamiliar models, a company dealing with rare diseases has set the standard for photography to tell the story through the light, material, and temperature of the laboratory.
HLB Therapeutics' red is the CI color used by the group. I decided not to change the red, but to keep it only in place of one bauble rather than the color that paints the screen. The rest is covered in deep ink and cool ice colors.
This is Group CI Red. Write only the one place you need to look first, such as your current stage and arrival point.
It is a level of deeper red used when text or links must be written in red on a white background.
Background for body text and dark scenes. It has a bluer tone than black, so it blends in naturally with the ice color.
Write in auxiliary letters, lines and temperature graphs on a dark background.
Write on a card with a wide bright side to create a cool blank space on the screen.
It is a basic base that is easier on the eyes than pure white. Photos and cards are placed on top of it.
The background and text take up most of the screen, ice color takes up the wide area, and frost color takes up the lines and auxiliary information. Red is only placed in one place on the screen that you want to see first, such as the current stage, headquarters location, or out-of-standard temperature.
CI red on a white background has a brightness contrast of 3.9:1, so it is not used in small letters. When text needs to be red, change it to Text Red with a contrast of 5.6:1.
On the cold chain screen, the color used for each temperature has been predetermined. The colder it is, the deeper the frost color becomes, and 2~8℃, which is the standard for refrigerated biopharmaceuticals, is indicated by an ice-colored band. Red lights up only when the standard is out of bounds.
Until it reaches the patient
From the title to the text, the Korean language is organized into one family, Pretendard. Bold titles should be written tightly with narrow letter spacing, and text should be written comfortably with line spacing of 1.75.
RGN-259
The wide-open English text matches the geometric letters of the HLB wordmark and clearly stands out the program name on the large screen.
2026.10.12
2–8℃ · Phase 3
Numbers that need to be compared, such as dates, stages, and temperatures, are formatted in a monospace font. The table can be read quickly only if the numbers have the same digits.
The line represents time and path, and the drop represents arrival and now. With just two shapes, we drew the pipeline, cold chain route, history, and disclosure list so that they could be read as the same company on any screen.
Even if you start with the same facts and the same information structure, the nature of the website varies greatly depending on what you show first. I drew the main page all the way through in four directions: a sentence connecting the two businesses, science for patients, numbers for investors, and cold chain temperature.
The screen below is the actual design draft. When you scroll down, the main page in each design moves from top to bottom.
Before coloring, I first assembled the skeleton with a gray box. By moving the handle, you can compare the skeleton and finished version on the same screen.
The two businesses were grouped into “keeping time” and “keeping temperature”, and a red bell was placed at the end where the two lines meet. The company's story unfolds calmly, moving from the dark first screen to the bright main text.
The direction is to explain science in simple terms so that patients, families, and medical staff can understand diseases and substances. The large, famous titles and bright lens photos speak for themselves.
The disclosures and pipelines that shareholders and partners look for first are gathered on the first screen. Dates and steps are arranged as monospaced numbers on a dark dashboard.
This is the direction to introduce the company in terms of temperature. The huge “2–8℃” and frost crystal photos first demonstrate the accuracy of the cold chain.
The four design proposals were evaluated together based on six criteria. The most important criterion was whether new drug development and cold chain could be read as the story of one company. This is because a design proposal that only focuses on one side of the business misses out on visitors from the other side.
A card that explains the disease in simple words
Disclosure shortcut and fixed width numbers
Temperature scale and center map
The advantages of the design proposal that were not adopted were not discarded and were moved to the details page of Proposal A.
The pipeline prepared two explanations from the same data. Investors and partners first look at the development stage and designation status, and patients and their families read what disease the drug is for. You can change the two descriptions using the buttons on the screen below.
The development stage is a transfer of the progress status disclosed on the HLB Therapeutics website in October 2026.
Thymosin beta 4, the core substance of RGN-259, is a small protein found in almost every tissue in our body. On the detailed page, these explanations are shown first in numbers and dots, and the research materials are placed below them.
Cold chain is a business that needs to show invisible work. We proposed a screen that connects seven centers across the country with a line on a map and shows the temperature being transported along with a standard range.
From inspection of receipt to confirmation of delivery completion, the twelve steps that a box of medicine goes through are laid out in one line. You can see at a glance which stage your client is currently in and read the management standards that must be followed for each stage.
The most frequently visited place on the website of listed bio companies is investment information. Disclosures, IR materials, and shareholder information can be opened directly from one line on the first screen.
News related to clinical trials was formatted in a card format that kept the order of program, indication, stage, one-sentence summary, and original text announcement. If each post has the same format, you can compare old and new posts side by side.
Shareholders checking public disclosures and customers looking for the center location often open the website for the first time using their mobile phones. On small screens, the latest news was placed directly below the first screen, and the pipeline was scrolled horizontally.
Buttons and tags, step bars and even temperature chips. We organized it into parts so that the same screen can be created even if the person in charge changes.
The homepage of a biopharmaceutical company is read by investors, partners, patients, and job applicants.
Let's start with who is coming.
Public institution
Korea Drug Development Fund
The build and renewal process of a public institution’s website, from user analysis and CI interpretation to nine main-page proposals and pipeline visualization.
Bio · Public
KDDF Partnering
The build process of a bio partnering platform: role design for partners and participating companies, a company directory with expanding chat, 30-minute meeting requests with automatic scheduling, and batch matching for administrators.
Foundation · Nonprofit
Purme Foundation
A website renewal proposal for a nonprofit foundation. The brand reading starts from the three trees in its symbol. It includes blue and sprout-lime colors, accessibility standards and four proposals.
Contact
Tell us where you are and what you want to achieve. We’ll outline a practical scope, process, and estimated budget.
DIRECT
Your inquiry has been received. We will reply within one business day with a scope and an estimate.