Senior UX/UI DesignerResponsive Corporate WebsiteEthanol Manufacturing / Chemicals

Unionchemical Website

BEURDEV CO., LTD. · May 2024 – Jul 2024

Union Chemical and Equipment corporate website — certification architecture, four ethanol products and ESG section

Design Process & Workflow

Structured for the Reviewer

The homepage and standards row, the corporate and certification structure, product pages, two of them with packaging specifications, ESG with its fourth pillar, and contact, media and careers.

Step 01

Home Page and the Standards Row

The home page runs the company statement, a plain explanation of what ethanol is, the four products, and then Our Standard: the company's licences and certificates listed by name and number above a row of certification marks, placed in the body of the page rather than in the footer. A procurement reviewer works from a checklist, so the standards are written out in terms each item can be matched against. The same page closes with the ESG summary and a contact form.

Step 02

Corporate Structure and Certification

The About menu holds what a regulated buyer or an investor checks: company overview, milestones, investment structure, organisation structure split into board and management, strategic outlook, and a dedicated Certification page. That page divides the evidence into our standard, product standard, environmental standards, and laboratory testing and calibration, so a reviewer working down a checklist can find each item in its own place.

Step 03

Product Pages

Each product has its own page with photographs and a description. The two ethanol products, Union Solution A and Union Solvent 95, end with a Packaging Containers block listing every container with its volume and weight, because how a product ships is part of whether an industrial buyer can order it. The hand-sanitiser brand page lists its key components instead, and the chemical page carries its own description and photographs. Each page is shaped by what its buyer needs to know, not by one fixed template.

Step 04

ESG With Health as a Fourth Pillar

The sustainability section runs Environmental, Social, Governance and Health, each with its own page reached from one overview diagram. Giving Health its own page, rather than folding it into Social, puts the disclosure food and pharmaceutical buyers ask about most where they will look for it.

Step 05

Contact, Media and Careers

Contact lists all three locations, the head office, the second office and the factory, beside the map and an enquiry form. Careers opens each position as an accordion so the full job description expands in place, with an application form that takes a CV upload. News articles and HR releases share one card pattern and one article template.

Executive Summary & Impact

Real-world

Match between system and the real world

standards named with their licence numbers, as a checklist reads

Efficiency

Flexibility and efficiency of use

one history as a table and a timeline for two readers

Recognition

Recognition rather than recall

packaging specification on both ethanol product pages

A corporate site for a manufacturer selling into regulated food and pharmaceutical supply chains, where the buyer audits before they buy. The design writes out the evidence a reviewer checks by name and number, shows the same history in two shapes for two kinds of reader, and puts the details that decide a purchase on the product page.

01 / Discovery & Heuristic Gaps

Problem & Usability Gaps

In a regulated supply chain, a procurement or quality reviewer screens a supplier against a checklist before a grade is discussed. Read against the heuristics, a conventional product site serves that reviewer badly: certification is reduced to a row of logos in the footer, with nothing a checklist item can be matched against; the company's history comes in one shape when two readers want different things from it; and shipping details are left for a later conversation, though they decide whether a product can be bought at all.

Logos only

certification reduced to a row of marks in the footer

One shape of history

a single format for readers who want different things

Specs deferred

shipping units left for a later conversation

02 / Architecture & UX System

Design Decisions by Heuristic

01

Match between system and the real world

Certification in the Reviewer's Terms

The homepage gives Our Standard its own section in the body of the page, listing each licence and certificate by name and number above the row of marks. A dedicated certification page divides the evidence into four groups: company, product, environmental, and laboratory testing and calibration. A reviewer arrives holding a checklist and can match it item by item.

02

Flexibility and efficiency of use

One History, Two Shapes

The milestone page shows the same record as a dated table and as a horizontal timeline. The table serves a reviewer checking a specific year; the timeline serves a visitor forming a view of the company. Each reader takes the shape that suits their task.

03

Recognition rather than recall

Packaging Specified on the Product Page

The two ethanol product pages end with their shipping containers, from small drums to bulk tanks, with net volume and weight per unit. A buyer sees whether the product ships the way they need without asking for it separately.

04

Aesthetic and minimalist design

Long Content Opened in Place

Open positions run as an accordion, so a full job description expands in place, with an application form that takes a CV directly. A visitor sees the whole list at a glance and opens only the role they want.

03 / Verification & Evidence

Before & After by Heuristic

Heuristic	Before	After	Change
Real-world	Marks as a footer row	Named standards and a four-group page	Checkable
Efficiency	History in one format	Dated table and timeline	Two views
Recognition	Shipping units on request	Specified on both ethanol product pages	In view
Minimalism	Every job description in full	Accordion with a CV upload	Collapsed

"In a regulated supply chain the sale opens with an audit, not a pitch. Giving the evidence a reviewer checks its own place, written out by name and number, was the central design decision."

— Design rationale · Unionchemical Website

04 / Retrospective

Design Learnings

→

A reviewer matches a supplier against a checklist, so standards listed by name and licence number serve them better than a row of logos can.

→

The same content can serve two readers if it is given two shapes; showing the history twice was correct rather than redundant.

→

Details that decide whether a purchase is possible belong where the purchase is considered, not in a follow-up.