Skip to main content
Sustainability WebsiteSustainability ReportIllustration SystemBilingual

National Chengchi University — NCCU Sustainability

One home for NCCU's sustainability progress — built by the same team as its sustainability report, with the illustration language carried through

Industry
Higher education · sustainability
National Chengchi University — NCCU Sustainability website

About the client

In its requirements form, NCCU noted that it did not yet have a consolidated sustainability website, while peers such as NTU, NTNU, NYCU, NTHU, NCU and NTPU already had sustainability platforms.

The site had to bring together sustainability-assessment indicators, activities, news and highlights so that stakeholders can follow NCCU's progress. The brand core value was "a university without walls", and the site was named "NCCU Sustainability".

The brief

The visual brief asked for a simple, user-friendly style that combines the beauty of the campus ecology with a humanistic feel and some innovation.

The home page needed highlights, latest news and a sustainability dashboard in order; the menu had to cover About, News, Sustainability Empowerment, Sustainable Campus, Participation and Downloads, with the annual report accessible.

What we did

  1. 01

    Sustainability report design

    The same client's sustainability report: inner pages, an interactive PDF, and Chinese and English editions.

  2. 02

    Sustainability website design and build

    The project was closed out as the "ESG sustainability report website"; the site and the report were delivered by the same team.

  3. 03

    Illustration carried through

    Illustration elements from the report — the eagle, paper planes, books, the red campus marker and the fountain — are recomposed on the home page's highlights, dashboard and footer, so report and website read as one visual language.

  4. 04

    Visual system

    A teal palette, wave dividers and horizontal tabbed sub-menus unify the inner pages.

Site structure

  • News
  • Sustainability Empowerment
  • Sustainable Campus
  • Participation
  • Downloads
  • About (vision, organisation, responsibilities)
  • EN switch

Highlights

Highlights and dashboard

Number cards in a carousel present indicators such as courses, renewable energy, water, greenhouse gases and electricity. The figures are provided and updated by NCCU.

Categorised news

News items carry category tags and dates, with Read More links.

Report downloads

The Downloads page shows past sustainability reports (Chinese and English) as cover cards.

Bilingual and mobile

The menu switches to English; on mobile the site uses a hamburger menu and a single-column layout.

Screens

NCCU Sustainability home page first screen: the "Sustainability at NCCU" headline and Read the Report button
Home page first screen: a teal-and-forest-green key visual, with a campus sustainability campaign featured beside the headline.
NCCU Sustainability home page: highlights and dashboard with eagle and paper-plane illustrations
Home page: highlights and dashboard, with illustrations carried over from the sustainability report.
Three campus photos in the Sustainable Campus block of the NCCU Sustainability home page
Home page Sustainable Campus block: campus photography first, in line with the request for a simple, user-friendly look.
Footer illustration of a girl holding a globe on a stack of books, beside a fountain
Home page footer: books, globe and fountain illustration joined to the wave divider.
NCCU Sustainability About page: vision and goals
About: horizontal tabs switch between vision, organisation and responsibilities.
NCCU Sustainability Downloads page with sustainability report cover cards
Downloads: cover cards for past sustainability reports in Chinese and English.
NCCU Sustainability Downloads page on mobile
Mobile Downloads page: single-column cards and a hamburger menu.

Screens are public pages of the NCCU site captured in October 2026. The carousel, news and dashboard figures are kept up to date by NCCU and are not results claimed by us.

Want a website that works like this for you?

Tell us about your industry and goals, and we will talk through the right approach.