{"id":1587,"date":"2025-02-26T01:01:48","date_gmt":"2025-02-26T01:01:48","guid":{"rendered":"https:\/\/f13.kr\/sooha\/?post_type=project&p=1587"},"modified":"2026-06-18T07:49:25","modified_gmt":"2026-06-18T07:49:25","slug":"intelgenx","status":"publish","type":"project","link":"https:\/\/www.sooha.kim\/index.php\/project\/intelgenx\/","title":{"rendered":"IntelGenx"},"content":{"rendered":"\n
\n
\n
\n

IntelGenx<\/h3>\n\n\n\n

A biotech company developing oral film therapeutics
across multiple therapeutic areas.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

Role<\/p>\n\n\n\n

UX UI<\/strong><\/p>\n<\/div>\n\n\n\n

\n

Scope<\/p>\n\n\n\n

Information structure<\/strong>
Visual system<\/strong><\/strong><\/p>\n<\/div>\n\n\n\n

\n

Tools<\/p>\n\n\n\n

\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
<\/div>\n\n\n\n

Turning dense biotech content into a visual story<\/h2>\n\n\n\n

A visualization-focused redesign of IntelGenx\u2019s corporate website, turning text-heavy pages into a clear, scannable narrative for partners, investors, and patients.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n
\n

Too much dense text,
not enough guidance for users.<\/h2>\n\n\n\n

On the old site, visitors were greeted by long blocks of copy with no clear starting point, so it was hard to quickly see what was relevant to them.<\/p>\n<\/div><\/div>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n
\n
<\/div>\n\n\n\n

Understanding the Content<\/h2>\n\n\n\n

I read through every page, grouped related content, and mapped
what each audience needed to understand at a glance.<\/p>\n\n\n\n

<\/div>\n<\/div><\/div>\n\n\n\n
\n
\n
\n

Step 1<\/p>\n\n\n\n

Read and map the content<\/h4>\n\n\n\n

Read through all pages and group the content by type.<\/p>\n<\/div>\n\n\n

\n
\"\"<\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n
\n
\n
\n

Step 2<\/p>\n\n\n\n

Find the core concepts<\/h4>\n\n\n\n

Identify key concepts, processes, and categories that
users need to understand.<\/p>\n<\/div>\n\n\n

\n
\"\"<\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n
\n
\n
\n

Step 3<\/p>\n\n\n\n

Choose the right format<\/h4>\n\n\n\n

Decide what must stay as precise text and what can be
turned into icons or diagrams.<\/p>\n<\/div>\n\n\n

\n
\"\"<\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n
<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n
\n

Applying the System
to Key Pages<\/h2>\n\n\n\n

I transformed the highest-impact pages into visual narratives by reorganizing the content into scannable sections supported by icons and imagery.<\/p>\n<\/div><\/div>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>
\n
\n

Information Architecture<\/h4>\n\n\n\n

Structuring the key pages<\/p>\n<\/div>\n\n\n\n

On the most important pages, I first restructured the content before thinking about visuals. I grouped related information into clear sections and defined what each section should answer for the user.<\/p>\n<\/div><\/div>\n\n\n\n

<\/div>\n\n\n\n
\n
\n

Visual Communication<\/h4>\n\n\n\n

Turning text into visual entry points<\/p>\n<\/div>\n\n\n\n

After restructuring the content, I used icons and diagrams as visual entry points, so users could understand the main idea before reading the details. I was careful to add visuals only where they clarified the message, not just to decorate the page.<\/p>\n<\/div>

\"\"<\/figure><\/div>\n\n\n\n
<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Before & After:
What Changed on Screen<\/h2>\n\n\n\n

The redesign doesn\u2019t remove information. Instead, it restructures and visualizes it so that complex content feels more approachable and less overwhelming.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n
\n

Small text, long paragraphs<\/p>\n\n\n\n

Strong visual entry points<\/h4>\n\n\n\n

Headings, icons, and diagrams make it easy to see where to start.<\/p>\n<\/div>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n
\n

Mixed details in one block<\/p>\n\n\n\n

Clear sections with visual hierarchy<\/h4>\n\n\n\n

Split into focused sections with icons, bullets,
and images so users can quickly understand each part.<\/p>\n<\/div>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n
\n

No clear starting point for the eye<\/p>\n\n\n\n

Clear sense of what each page is about<\/h4>\n\n\n\n

Users can quickly see what each page is about within a few seconds,
instead of having to read every line.<\/p>\n<\/div>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n
\n

UI Design<\/p>\n\n\n\n

Turning Structure into UI<\/h2>\n<\/div>\n\n\n\n
<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n
<\/div>\n\n\n\n
\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"

Redesigning IntelGenx\u2019s corporate site<\/p>\n","protected":false},"featured_media":1588,"template":"","meta":{"inline_featured_image":false},"project-category":[15],"class_list":["post-1587","project","type-project","status-publish","has-post-thumbnail","hentry","has-content"],"_links":{"self":[{"href":"https:\/\/www.sooha.kim\/index.php\/wp-json\/wp\/v2\/project\/1587","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sooha.kim\/index.php\/wp-json\/wp\/v2\/project"}],"about":[{"href":"https:\/\/www.sooha.kim\/index.php\/wp-json\/wp\/v2\/types\/project"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sooha.kim\/index.php\/wp-json\/wp\/v2\/media\/1588"}],"wp:attachment":[{"href":"https:\/\/www.sooha.kim\/index.php\/wp-json\/wp\/v2\/media?parent=1587"}],"wp:term":[{"taxonomy":"project-category","embeddable":true,"href":"https:\/\/www.sooha.kim\/index.php\/wp-json\/wp\/v2\/project-category?post=1587"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}