HIGHTECH POLYMER
The English name of Hitech Polymer is HIGHTECH POLYMER. Currently, the company introduction on the website contains the phrase “High Quality in HIGHTECH POLYMER.” Before drawing the new website, I re-read what the name meant.
HIGHTECH POLYMER · Hitech PolymerWEBSITE RENEWAL PROPOSAL
Make the invisiblevisible
Hitech Polymer homepage renewal proposal
Matter in Motion · Polymer Scroll Film, two directions
HIGHTECH POLYMER · CASE STUDYHitech Polymer homepage renewal proposal
If you scroll down, scattered dots will continue
POLY · MERPolymer means many parts connected
Small molecules are connected to form a chain.
A · MATTER IN MOTIONThe chain becomes a knot through which light passes
Possibility comes from the material.
B · POLYMER SCROLL FILMThe knot is unraveled to form a net structure
The invisible structure determines the performance of the product
01 / OVERVIEWProject Overview
A company that connects German and American materials
to domestic sites
Hitech Polymer is the distributor of BASF Co., Ltd. in Korea and the Korean Representative of Shakespeare in the United States. We supply melamine foam Basotect W, microporous polyurethane elastomer Cellasto, thermoplastic polyurethane Elastollan, and conductive yarn to domestic companies, and we also handle soundproofing pads from Germany's FAIST ChemTec and passive house building materials from Synwer.
The current website has copyright 2015 written on the footer, and the photo posted in 2016 remains. BlueCanvas proposed a new website and created two design proposals that can be viewed while actually scrolling: Matter in Motion and Polymer Scroll Film. This page is a record of the process of consideration while preparing the proposal.
- 4placesglobal suppliersBASF, FAIST ChemTec, Synwer in Germany and Shakespeare in the United States
- 6Core materialsBasotect W · Cellasto · Elastollan · Conductive yarn · Noise-proof pad · Building materials
- 28Elastollan gradeSeven series of thermoplastic polyurethane grades currently listed on the website
- 200film frame in B3D scene that scrolls from polymer chain to conductive yarn
02 / CHALLENGEstarting point
are used absorbers in not
- 1In place of the logo, there is only the word “Hitech Polymer” written in the theme’s default font without an image. There is no separate sign to identify the company.
- 2The sentence on the first screen, “Hitech Polymer running toward sustainable growth,” is not enough to know what this company supplies.
- 3The four materials are divided only by product name and supplier, such as 「Basotect W / BASF (Germany)」 under 「Chemical field」, and you have to open each page to see which industry they are used in.
- 4The copyright 2015 is written in the footer, and the photo is the same as it was posted in July 2016.
FOUR QUESTIONS
Renewal started with
Four Questions
Currently, the website already has detailed descriptions and physical property tables for each material. However, because the information was buried deep in the product page, it was difficult to see what the company was doing on the first screen.
- Q1Can you see what the company supplies on the first screen?
Currently, the first screen only has the sentence “Hitech Polymer running toward sustainable growth.” In both design proposals, the first sentence was changed to talk about the material. Proposal A is “Possibilities come from materials.” Proposal B is “Invisible structures determine product performance.”
- Q2How do we reveal the ingredients hidden in our products?
Proposal A shows a large piece of material through which light passes, and Proposal B shows the molecular structure as if going through a microscope. I solved the same problem, one with impressions and the other with structure.
- Q3How do we connect four suppliers, six materials, and multiple industries?
Currently, the menu is divided only by supplier and product name. The two design proposals connect materials and industry, allowing one to move directly from industry to related materials.
- Q4How do we read physical properties in numbers?
Currently, the Cellasto physical property table on the website contains only seven density levels and seven items as a table. Proposal B was changed to a graph where the tensile strength, elongation, and tear strength change together when the density is selected.
03 / NAMERead the name again
In the name of polymer, there was
what the company does.
I read the company name again before writing a new sentence. The word polymer not only describes the structure of polymers, but also describes Hitech Polymer's work as a link between suppliers and customers.
Many parts are connected
Polymer is a combination of the Greek words poly (many) and meros (part). It becomes a polymer only when thousands of small molecules called monomers join together to form a long chain.
The way it continues determines its nature.
Depending on how the chains are connected and intertwined, the same polymer becomes hard or soft. Both the network structure of melamine foam and the resilience of elastomers come from this structure.
A company is also a chain
In its greeting, Hitech Polymer introduces itself as a “spokesperson for suppliers and customers.” The company's work is similar to its name, as it connects four German and American suppliers with domestic customers.
But the material is not visible
The materials supplied in this way are incorporated into the finished product. This includes shock absorbing parts of the suspension, noise-deadening pads on the car body, moisture-proof paper in the walls, and thread woven into dust-proof clothing. Neither the material nor the name Hitech Polymer is visible in the finished product.
The same word chosen by both designs
Proposal A introduces the company with “Invisible differences create a better tomorrow,” and Proposal B introduces the company with “Invisible structures determine product performance.” Both design proposals drawn separately started from the word “invisible,” and the title of this case was also taken from it.
04 / CHAINSupplier · Material · Industry
Four suppliers, six materials,
four industries
The materials that Hitech Polymer deals with are divided into four categories by suppliers, and four industries by division into areas where they are used. Currently, the website only has menus divided by supplier and product name, so automobile company managers have to open the pages one by one to check which material is right for their job.
The two design proposals changed the structure to connect materials and industry. When you click on a supplier, material, or industry on the map below, the connected lines become brighter.
SUPPLIERSupplier
MATERIALMaterial
INDUSTRYIndustry
How to read the mapClick on one of the following: supplier, material, or industry, and the related items and explanations will appear here.
Suppliers and materials follow the greeting and product pages of the current website, and industry classification follows the information structure in Proposal B.
05 / LABmaterial laboratory
See the invisible nature
and move it yourself
Most of the advantages of materials are revealed within products, even at very small sizes. While the two designs show the scene through photos and film, this case goes one step further by making it possible to move the four properties directly. All figures are currently listed on the product page of the website.
A chain that comes back when stretched and released
Thermoplastic polyurethane (TPU) is used for shoe soles, cable sheaths, and hoses, thanks to its tangled chains that unfold when pulled and rewind when released. Drag the bar to extend the chain and then release it.
- 500
- 600
- 1100
- B
- C
- R
- S
- Seven series, twenty-eight grades
- tensile strength
- 3.6 N/mm²
- Elongation at break
- 350 %
- Tear strength
- 10.0 N/mm
- Compression loss rate
- 2.6 %
So that it does not spread to the side when pressed
The tight lump of rubber bulges to the side when pressed. Because Cellasto's microscopic pores shrink first, it rarely spreads to the sides and returns to its original height when released. The current website describes this feature as “high compression with minimal lateral expansion.” Changing the density (g/cm³) changes the physical properties of Cellasto MH.
net through which light passes
Basotect W is an open-cell foam made of melamine resin. The pores are not blocked and only the thin framework is connected in three dimensions, and it is well known in Korea as a cleaning product called “Magic Block.” As you move the pointer over the picture, light passes through the net.
1kgIf you solve F902 R022, it is 409,091m
It is the length of approximately 9.7 marathon courses (42.195km).
A thread that transmits static electricity
Shakespeare's challenge yarn is electrically conductive nylon (PA6) and polyester thread. Even if just a few strands are woven into the fabric, these threads dissipate accumulated static electricity, so they are used for dust-proof and anti-vibration clothing in semiconductor factories. The average resistance of PA6 conductive yarn F902 R022 is 4×10⁵ Ω/cm, and the melting point is 220℃.
The length of the challenge is the translation of 409,091 meters per kilogram from the physical property table F902 R022 on the website, and one marathon course is 42.195km.
06 / STRUCTUREVisitors and Scene Order
Five types of people looking for Hitech Polymer
Hitech Polymer's website is visited by people with different purposes, from purchasing managers at automobile parts companies to overseas suppliers. Since each person was looking for different information, we first decided on a scene for each person to arrive at.
- 01Purchasing and development manager at an automobile parts company
Find materials and grades that reduce noise, vibration, and shock and compare their physical properties.
Material/property data - 02Architecture · Passive house construction company
Check the specifications and installation location of airtight tape and moisture-permeable and moisture-proof paper.
Building materials and applications - 03Textile and clothing companies
Find the type and thickness of conductive yarn to be included in dustproof clothing and outdoor clothing.
Challenge company · Physical properties table - 04Household goods and industrial products company
Choose materials that fit the finished product, such as cleaning foam, shoe soles, or chair parts.
Application areas/material archive - 05Overseas suppliers and partners
Check the items and company information handled by the Korean agency in English.
Company Introduction · English Site
Same material
in a new order
Currently, the main screen consists of a company emblem and a shortcut section, so there is no scene explaining what the material is and where it is used. The two design proposals showed the material in the first scene and then continued the story in the order of company, supplier, material, industry, and inquiry, and Proposal B included physical property data in between. The colored dots tell the story each scene tells.
- First sentence
- Company · Supplier
- Material
- Industrial
- Physical property data
- Contact us
Now main screenScene 5
- 01Hitech Polymer running toward sustainable growthThree slide photos and one sentence
- 02Business fieldThree images
- 03Go to product/fieldLink in six photo spaces
- 04Company Introduction · Directions · Customer InquiryFour icons
- 05Footercopyright 2015
A·Matter in Motion6 scenes
- 01Possibilities come from materials.A knot through which light passes and a 9.87-second film
- 02The invisible differenceThe company's perspective and the four suppliers
- 03If you know the material, you can see the followingFour material archives and detail window
- 04Materials become industriesHorizontal scenes of automobiles, architecture, industry and life
- 05From good materials to good answersThree stages of consultation
- 06Your next, togetherContact
B · Polymer Scroll Film8 scenes
- 01Invisible structure200 sheets of scroll film and five scenes
- 02Company introduction sentenceNumbers of suppliers, materials, and business fields
- 03Four suppliers of verified global materials
- 046 core materials6 sideways materials
- 05Choose the densityCellasto MH physical property graph
- 06From automobiles to clean roomsFour industries and related materials
- 07With the mindset of being an employee of the customerA greeting sentence
- 08Please tell us the material you needInquiry to select the material of interest
07 / COLORcolor chart
Amber color through which light passes
blue-green in a microscope
For Proposal A, I chose an amber color that appears when light passes through a transparent material. I placed only orange on a charcoal background and let the photo of the material take over the remaining colors.
Proposal B reminded me of a microscope screen looking at molecular structures. Structural lines, buttons, and graphs were drawn with a single piece of teal on a deep navy blue background. In both designs, only one accent color was left to draw the eye to where that color lands, and counting from the scene capture, orange only occupies 1.6% of the screen in eye A, and cyan only occupies 0.2% of the screen in eye B.
A · When light passes
#11110F#FF6B3AB · When illuminating the structure
#050A12#5CC8E4Same material,
two lights
To check how the colors in the two designs change, we created a material board where Hitech Polymer's six materials were placed in the same place and only the light was changed. On the left is the amber light in A, and on the right is the cyan light in B.
Under the light in A, the TPU granules glow amber, and under the light in B, the same material appears organized like a specimen. You can compare the two scenes by dragging the center line left or right.
A · Matter in Motion
charcoal and amber-
Background · 45.4%This is the background of the home screen and material · Industrial scenes and footer. It is a charcoal color that is slightly warmer than pure black.
-
Inquiry · Shadow in photo · 33% It is the background of the inquiry scene, and the screen ratio is high because it is charcoal at the same height as the shadow in the photo.
-
Bright scenes · Text · 18%It is the basis of company introduction and consultation scenes, and in dark scenes, it is used in font color.
-
Supplementary text · 2%Gray used for explanatory text and small labels.
-
Emphasis · 1.6%Orange is used only for periods, symbols, and progress bars at the end of titles.
B · Polymer Scroll Film
navy blue and teal-
Background · 75.7%The deep navy blue on which the scroll film and most scenes are placed.
-
Card · Table · 18.5%This is the basis for the supplier card, physical properties table, and inquiry form.
-
Label · 2.2%This is the color used for unit and small labels.
-
Supplementary letters · 1.9%A grey-blue color used in explanatory sentences.
-
Text · 1.6%Title and body font color. I mixed a little navy blue with white.
-
Emphasis · Structural line · 0.2% Cyan used for buttons, graphs, and structural lines in films.
Clicking on a color swatch will copy the HEX value. The number in the sample is the brightness contrast with the color of the text above it, and the ratio is a value calculated by counting the pixels closest to each color in scene captures in the two designs.
08 / TYPOGRAPHYname and font
Establishing a name that did not have a logo
with letters
Currently, the website header only has the words “Hitech Polymer” without a logo image. So, the names of the two design proposals were rewritten on the screen. For Proposal A, an atom-shaped symbol with three overlapping orbitals and HT POLYMER were created, and for Proposal B, HIGHTECH POLYMER was created with wide spacing.
Hitech Polymer
HT POLYMERHitech Polymer
HIGHTECH POLYMERHitech Polymer
Pretendard 600 · Proposal A first screen
600 / -0.065emThe possibility is
from the material.
Matter
in motion.
Proposal A placed the slanted serif English text “Matter in motion.” next to the large Korean title. This is a choice to add a hand-written texture to the mechanical material story.
Barlow 600 · Proposal B name and number
tracking 0.30emHIGHTECH
POLYMER
4×10⁵ Ω/cm0.35 g/cm³
Invisible structures
determine product performance
The Korean title is Pretendard 700, letter spacing -0.04em. Property numbers are written in Geist Mono monospace font so that the digits are aligned vertically. Moving the bar changes the letter spacing of the English name.
09 / MOTIONmotion principles
Film scrolls
scenes sideways
In both designs, the film on the first screen is scrolled. Lowering it plays forward and raising it plays backwards, so the viewer sets the pace of the scene. Contents placed side by side, such as industry and materials, are displayed one after another by changing vertical scrolling to horizontal movement. If you turn on Reduce Motion in your operating system, both designs will only show a static screen. The four cards below actually move along the scroll.
9.87 seconds to scroll
The film in the first screen of Proposal A is 9.87 seconds long. Because the playback position is moved according to the scroll position, the knot is untied when lowered, and when raised, it is rewound. As you pass this card, 48 scenes from the same film are flipped.
Film exceeding 200 sheets
For the first scene in Proposal B, 200 pre-drawn 3D frames are drawn on the canvas according to the scroll position. When the frame number reaches the boundary of the five scenes, the sentence changes. In this card, there are over 48 of them.
industry passing by
Proposal A changes vertical scrolling to horizontal movement and shows three scenes in turn: automobiles, architecture, industry, and life. The three scenes on this card also pass sideways along the scroll.
Sentences that become brighter word by word
The company introduction sentence in B is initially blurred, but the words become brighter one by one as you scroll. Even long sentences can be followed to the end at your reading speed.
Proposal A · Knot
Matter in MotionPossibility comes from materials.
The direction starts from transparent material sculptures and expands to industrial scenes. In the first screen, the polymer knot through which light passes spins as a 9.87-second film, and when scrolled down, the film plays forward and when scrolled up, it plays backward. Next, we laid out three stages in order: the company's perspective, four suppliers, an archive to select four materials, a sideways view of automobiles, architecture, industry, and life, and consultation.
- 9.87 second film that plays back and forth with polymer knots and scrolls through which light passes.
- Material archive and details window where the light and name of the photo change when you select the material
- Scenes of applications that horizontally cover automobiles, architecture, industry and life
- Three stages of consultation: Understand · Connect · Move forward
Pretendard · Georgia Italic
DIRECTION NOTES
Among the scenes in Proposal A, I chose a moment that I put a lot of effort into directing. Click on the photo to see a larger view of each scene.
- Possibility comes from the material.
The first screen shows the polymer knot through which light passes, placed on the right. Only the period at the end of the title is colored orange.
- The more connected you are, the greater the possibilities
As you scroll down, the knot disperses into particles to form a sphere, and a second sentence appears on the screen.
- three orbits
At the end of the film, the sphere unfolds into three orbits. The symbol for the header was also drawn with three identical orbits.
- invisible difference
The company's perspective was written on bright paper, and the names of the four suppliers were listed below.
- material archive
When you select a material, the color, name, and one-line description of the photo on the left change together. An orange band emblem passes below.
- Quieter. More comfortable.
Car scene. Vertical scrolling changes to horizontal movement, passing through three industrial scenes one after another.
- Increase the performance of space by one layer.
In the construction scene, airtightness, waterproofing, moisture permeability, and moisture resistance are explained as “comfort achieved in an invisible place.”
- From good materials to good answers
It shows how the consultation progresses in three stages: Understand · Connect · Move forward.
MATTER IN MOTIONUntie the knot that allows light to pass through
POLYMER SCROLL FILMInside the invisible structure
Proposal B · Structure
Polymer Scroll FilmInvisible structure determines product performance
The direction starts from one molecule and moves toward the finished product. The first screen is a scrolling film that shows four scenes - polymer chain, open cell net, elastic restoration, and conductive yarn - in 200 3D frames. Next, we introduced the company and four suppliers, six key materials that are flipped to the side, a Cellasto MH graph that changes physical properties when you select the density, and four industries.
- 200 sheets of scroll film leading to polymer chain, open cell, elastic restoration, and conductive yarn
- Six horizontal scenes of key materials with supplier and product information
- Cellasto MH physical property graph and overall property table that change according to seven levels of density
- Direct links to related materials in four industries and inquiries to select materials of interest
Pretendard · Barlow · Geist Mono
DIRECTION NOTES
Among the scenes in Proposal B, I chose a moment that I put a lot of effort into directing. Click on the photo to see a larger view of each scene.
- an invisible structure
This is the first screen with scattered monomers floating around. The scene list on the right allows you to instantly select five scenes from the film.
- When the chains become tangled and become a net
Along the scroll, monomers form chains, which intertwine to create a three-dimensional network structure of melamine foam.
- electric thread
The final scene of the film is a challenge. The average resistance, 4×10⁵ Ω/cm, is written next to the sentence.
- A paragraph about the company
This is a company introduction sentence where each word becomes brighter as you scroll. Suppliers, materials, and business areas are organized by number below.
- 6 core materials
For each material, write the supplier, country of origin, structure, characteristics, and application areas on the same frame and move it to the side.
- Choosing a Density
When you select the density of Cellasto MH, the tensile strength, elongation at break, and tear strength graphs move together.
- From automobiles to clean rooms
Four industries are introduced with photos, and direct links to related materials are included for each industry.
- Please tell us what material you need
This is an inquiry form where you select the material of interest and write down the applied product and required properties.
10 / PROCESSphotos and film
Instead of taking a new product
I drew a scene where the material was working.
Currently, the only photos on the website are product photos posted in 2016, so we had to create new scenes for the big screen. The two design proposals chose to draw scenes where the material is used and the structure within the material rather than imitating the actual product.
Proposal A created a 9.87-second film using four photos and hand-written 3D code, while Proposal B used eleven photos, 200 3D frames, and a 10-second film. To avoid appearing as a specific case of delivery, no trademarks or text are included in the photo.
From knot to orbit,
9.87 seconds in A
The film in A follows the sequence in which a transparent knot disperses into particles, turns into a sphere, and then draws an orbit within a 3D scene. Film saves every frame for immediate access, so even if you quickly scroll, the scene doesn't break.
01Transparent KnotA polymer ribbon through which light passes forms a knot and turns slowly. 
02Scattering particlesThe surface of the knot scatters into particles, leaving a trace of a chain. 
03One SphereParticles come together again to form one sphere. 
04Orbital StructureAn orbit is created around the sphere, opening the scene of “connection”.
From molecules to threads,
200 sheets in B
In Proposal B, five scenes - monomer, chain, net, compression and restoration, and challenge - were combined into one 3D scene and exported as 200 frames. We create separate 1600×900 frames for wide screens and 720×1280 frames for vertical screens, so the structure fills the screen even on mobile phones. Six materials and four industries are shown in pictures.
01MonomerThis is the first scene of scattered small molecules floating. 
02ChainMolecules are connected to form a chain of spirals and zigzags. 03NetChains are intertwined to form a three-dimensional network structure of open-cell foam. 
04Compression and restorationThe compressed layer does not spread to the side and returns. 
05ChallengeThe net gathers together thinly and becomes a single strand of electric thread.
Basotect WMelamine foam with open cells exposed on one side
CellastoBumper next to suspension spring
ElastollanTPU granules and hoses scattered in the air.
ChallengeBlack thread woven into gray fabric
Noise Anti-padNoise prevention pad attached to the inside of the car door
SynwerButyl tape and moisture proof paper on window corners
It is a film that connects monomers to become chains and nets, and then to become a single thread after being pressed and returned. In the design, open it with the “View motion film” button.
This is a film in which transparent knots turn into particles, spheres, and orbits. In the design, it plays back and forth as you scroll.
11 / MOBILEmobile
Even in the hand
Same knot and structure
Persons in charge of finding materials in the field often check physical properties using their mobile phones. Proposal A stacked industrial scenes that had been flipped horizontally on mobile devices into vertical cards, and changed the photos to slowly enlarge. Proposal B creates a separate film with a frame dedicated to the vertical screen, and shows the six materials that were flipped sideways vertically.
COMPAREHow are the two directions different?
Opening the same material
Knots and structures
The two design proposals are from the same company and cover the same material, but what they say on the first screen is different. Proposal A starts with the impression given by the material and expands to industrial scenes, while Proposal B starts with the structure within the material and goes into technical information. Hitech Polymer has organized the differences so you can choose based on the story you want to tell first on the first screen.
ClassificationA · Matter in MotionB · Polymer Scroll Film
First screenA 9.87-second film featuring polymer knots through which light passes.A 200-page film spanning five scenes from molecules to threads
First sentencePossibilities come from materials.Invisible structures determine product performance
ColorA charcoal background and one orangeA deep navy blue background and one cyan
TypefacePretendard · Georgia ItalicPretendard · Barlow · Geist Mono
NameOrbit three symbols and HT POLYMERHIGHTECH POLYMER with wide spacing
MaterialArchive and detail window for selecting four thingsScene for turning six things to the side
IndustryThree scenes of automobiles, architecture, industry and lifeFour industries and links to related materials
DataMaterial description and link to original product pageCellasto MH property graph by density
Where to place weightImpression and possibilities given by the materialStructure and technical information of the material
MATERIAL HTP-WEB · REV. 10
Make the invisible visible
Hitech Polymer website renewal proposal · Matter in Motion · Polymer Scroll Film
| Property | Value |
|---|---|
| Client | Hitech Polymer Co., Ltd. · Korea BASF Agency · Shakespeare Korea Representative |
| Project | website renewal proposal October 2026 |
| Research | Currently, there are seven Korean pages on the website and three types of physical property tables. |
| Brand Reading | Polymers (many parts connected) and “invisible” materials |
| Structure | Supplier, material, and industry map, five types of visitors, scene order |
| Direction A | Matter in Motion · UI design, 9.87 second 3D film, material archive |
| Direction B | Polymer Scroll Film · UI design, 200 3D frames, physical property graph |
| Lab | Four types of interactions: Chain, Compression, Open Cell, and Challenger |
| Mobile | Vertical screen scene reconstruction, portrait-only film frame |
| Typefaces | Pretendard · Barlow · Geist Mono · Georgia |
| Studio | BlueCanvas |
MATTER, MADE VISIBLE
If you want to show the hidden strengths of the product
If you want to show the hidden strengths of the product
on the screen
We will start by organizing the scenes in which the technology, which has remained only in numbers and specifications, will be shown.
other projects
-
Global enterprise
Youngone Corporation
A website renewal proposal for a global OEM company whose name never appears on the label. It includes the brand reading “From the inside of clothing to the outside of the world,” a color system, a main-page proposal that begins on a snowy mountain, scroll interactions for the manufacturing process, and screens for the global network, materials and ESG.
-
Biotech · Pharma
HLB Therapeutics
A website renewal proposal for a listed biotech company. The brand reading ties rare-disease drugs and the pharmaceutical cold chain into one sentence. It includes a palette of ink and ice tones with a single drop of red, four proposals, and pipeline and cold-chain screens.
-
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.