中華民國對外貿易發展協會 TAITRA – 企劃財務處

TAITRA Annual Report Website Replaces PDFs with Modular Design to Speed Production and Cut Costs

67%

Increase in Website Stays

20%

Annual increase in overall flow

Industry: International Trade Promotion and Service Industries
Solution: Customized annual module library, annual color system switching design, editing process and maintenance efficiency upgrade.
Company size and market integration: International trade promotion unit, serving thousands of local SMEs, highly connected with domestic and international industry ecosystems.
Cooperation period: 2025
HubSpot Tools Used: Marketing Hub; Content Hub
Services Used: HubSpot Chinese Education Training; HubSpot CRM Setup / Getting Started; Website Design and Construction; SEO Technology Optimization

As an important official unit for promoting foreign trade in Taiwan, TAITRA has long been assisting local SMEs in expanding overseas markets through exhibitions, international cooperation, and event information. In the past, however, the production of static e-newsletters was not only time-consuming, but also difficult to meet the visual demands of different themes and colors every year.

The Department of Planning and Finance (DPF) wanted to create a "flexible, sustainable, and quickly maintainable" annual highlights information platform, so that the annual results could be presented to all enterprises in a more modern, diversified, and interactive way. Finally, Hububble was selected as the partner, and we were responsible for the module design, architecture planning, HubSpot CMS development, and full-site implementation.

Paint Points

Customer Goals

Customer Needs

01.

Replacing traditional e-newsletters with web-based alternatives presents key highlights of the year
01.

The editing process must be simpler and more reusable.
02.

Color adjustments can be made each year to create an independent annual visual style
02.

A large number of modules of different designs are needed for annual selection and reorganization.
03.

Reduce the amount of manual maintenance and increase the efficiency of content updates
03.

Upgrade the static e-newsletter to an online interactive website to enhance readers' browsing experience

Customer Goals

01.

Replacing traditional e-newsletters with web-based alternatives presents key highlights of the year
02.

Color adjustments can be made each year to create an independent annual visual style
03.

Reduce the amount of manual maintenance and increase the efficiency of content updates

Customer Needs

01.

The editing process must be simpler and more reusable.
02.

A large number of modules of different designs are needed for annual selection and reorganization.
03.

Upgrade the static e-newsletter to an online interactive website to enhance readers' browsing experience

Identifying the problem

Recognizing Problems

Prior to HubSpot, TAITRA had long relied on other tools to produce its newsletters. Although it was visually appealing, once the content or images needed to be changed, it was often necessary to go back and re-export the entire newsletter, resulting in the need to re-layout the newsletter for every change. It takes two to three months to produce a complete annual e-newsletter, which is a lengthy process that cannot be duplicated and is a huge burden on internal collaboration.

Since the e-newsletter is the key information of the year and each year has different planning directions, TAITRA has a high demand for the diversity of modules. They were concerned that if the number of modules was insufficient, the style of the site would be limited, resulting in similar content from one year to the next, which would not match the characteristics of the different themes. This is a flexibility that was not possible with the Adobe format in the past.

In terms of the use of color, TAITRA also expressed the desire to make each year "a new brand manual," but did not want to redevelop the entire site. Therefore, a flexible color system that could be changed quickly was needed so that the yearly themes could be clearly differentiated.

TAITRA wanted the website to be more dynamic than the e-newsletter, and to provide a visual guide for companies to understand the year's results more quickly.

Scope of works

Service Overview

HubSpot

HubSpot Tutorial

HubSpot CMS Introductory Education and Tutorials
Setting of administrative privileges and data structure planning
Backend content maintenance process introduction

HubSpot

HubSpot CRM Setup / Getting Started

Marketing Hub and CMS Hub Interface Integration
Backend asset management framework setup (files, modules, themes)
Collaboration account and review process arrangement

Website Design & Development

Web Strategy Planning and Application

Reorganize Sitemap and content structure according to the annual website purpose.
Adaptive RWD interface design and front-end cutouts across the site
Development of reusable HubSpot custom modules

Website Design & Development

SEO Technology Optimization

Base page weight settings (Metadata, OG, Structured)
URL and page hierarchy management
Image volume compression and load optimization

Website Design & Development

Web Design

Consistent and extendable branding style by standardizing website visuals according to yearly themes
Designed RWD responsive interface to ensure the best browsing experience for desktop, tablet, and mobile phones.
Created multiple sets of interactive visual components (e.g., overlapping cards, graphic modules, divider design) to enhance readability and browsing dynamics.

Our Solution

Solutions

Customized Annual Module Library

We have designed a complete library of annual modules for TAITRA, including overlapping cards, dividers, interactive card effects, and other graphic layouts, so that teams can freely combine them according to different themes each year, avoiding the presentation of overly standardized or homogeneous content. All modules support direct editing in the backend, allowing users to quickly replace text and images, significantly reducing the burden of re-producing each year.

Annual Color System Switching Design

To allow TAITRA to adapt to the changing theme each year, we planned a quick-switchable annual color palette and set global color variables through the CMS to make color management more intuitive and efficient. By simply updating the color settings each year, you can create a completely different visual style for the year, eliminating the need to redevelop the site while maintaining a consistent design foundation.

Editing Process and Maintenance Efficiency Upgrade

We completely revamped TAITRA's newsletter production process, which used to take 2-3 months to complete, so that content can be generated directly in the backend quickly, and the tedious layout and adjustment work can be automated through modular design. With HubSpot's review mechanism, version control, and module reuse functions, internal collaboration efficiency has been greatly improved, and follow-up operations have become easier and smoother.

Conclusion

Efficient Transformation with Visual Creativity and Digital Maintenance

In the past, TAITRA's annual e-newsletter was not only time-consuming, but also unable to meet the visual demands of different themes each year. After importing HubSpot's and Hububble's customized modules, TAITRA was able to quickly update the content through the backend and continue to expand the site in the future by taking advantage of the flexibility of modularization.

The modularized architecture makes the overall website maintenance process easier and internal collaboration smoother. With the replaceable color system, TAITRA can create an independent annual style each year, combining design changes with long-term maintenance stability.

Hububble helped TAITRA optimize its processes from design, development, and system implementation, not only solving the pain points of editing newsletters over the years, but also helping them build a more efficient and scalable content platform.

This project not only enhanced TAITRA's external presentation, but also laid the foundation for a standardized and sustainable expansion of the annual highlights website in the future. taitra-annual-report-ch-cms

Impact and Future Prospects

The HubSpot system has now been fully integrated into TAITRA's annual operations, making website maintenance faster and more suitable for cross-departmental collaboration. In the future, TAITRA expects to update the website color scheme every year and develop more modules according to the core focus of the year, so that the annual highlight website will continue to expand and become more diversified.

This structure will also give TAITRA more flexibility in terms of content, allowing it to adapt to different events and annual themes without having to redevelop the website. The website has become an important platform for them to communicate their achievements and lay the foundation for more digital projects within the organization.

Hububble will continue to assist TAITRA in the planning of future years to keep the website at optimal performance and scalability.