Cercis Chinensis:
A Website for Tsinghua's Distinguished Alumni

A web design project showcasing distinguished alumni of Tsinghua University.

Cercis Chinensis: A Website for Tsinghua's Distinguished Alumni

A web design project showcasing distinguished alumni of Tsinghua University.

Project Overview4 Weeks (Aug 2022)A Tribute to the 20th National CongressStatus: Proposal
My RoleIndependent DesignData VisualizationWeb Design

Background

Project Context

In anticipation of the 20th National Congress, Tsinghua University initiated a project to develop a website celebrating its major research achievements and distinguished alumni. The Academy of Arts & Design was tasked with the web design.

The Challenge

The primary challenge was to visualize over a thousand distinguished alumni on a single webpage, conveying a powerful sense of Tsinghua's vast and talented community.

Design Proposal

Cercis Chinensis: A Metaphor for Growth and Contribution

"Nourished by Tsinghua's spirit, they blossom as cercis flowers, dedicating their brilliance to the nation."

The design uses the Cercis Chinensis (Chinese Redbud), Tsinghua's university flower, as a central visual metaphor. It symbolizes how students, once nurtured on a campus in full bloom, go on to make outstanding contributions to the nation.

In this visualization, each petal represents a distinguished alumnus. Following the natural growth pattern of the redbud, these petals cluster into blossoms, branches, and finally, a full tree. This creates a powerful image of a flourishing garden, visually representing the immense pool of talent nurtured by Tsinghua.

Users can explore this interactive tree by zooming and searching. Clicking a petal reveals a brief summary of the alumnus, with an option to navigate to a detailed profile page.

Iteration Process

Phase 1

From Network Visualization to a 3D Floral Form

To visualize over 500 alumni simultaneously, my initial approach was network visualization. With the alumni data already categorized by their fields of contribution, I used a chord diagram to intuitively represent these categories and their relative sizes.

Network Visualization Concept

The first version was a 2D layout designed to prevent visual occlusion. Node sizes were scaled based on the number of alumni in each category to maximize readability and emphasize the scale of larger groups. However, this raised ethical concerns about fairness and representation among categories.

This led me to transition to a 3D visualization where all nodes could be of equal size. A floral, abstract form of the data network was well-received for its aesthetic appeal. The next challenge was to solve the occlusion problem in the 3D space.

3D Floral Form

Phase 2

Adopting the Cercis Flower as a Visual Metaphor

The Cercis flower was a fitting metaphor, both symbolically and structurally. As Tsinghua's university flower, it blooms in late April around the anniversary, embodying a pioneering spirit. It grows in dense clusters, creating a sea of purple that visually represents a large, thriving community.

Based on its biological structure, I defined a data cluster as 40-50 nodes. Categories with fewer nodes formed a single cluster, while larger ones formed branches of multiple clusters. I further refined the design by adding "Category" and "Time" filters to allow users to switch between different data views. Clicking a petal would zoom into its cluster, revealing detailed information.

Categorical View

Temporal View

Interaction Details

Phase 3

Refining the Floral Form and Visual Style

While the Phase 2 visualization was structurally sound, its curved forms created a delicate, feminine aesthetic that didn't align with the "pioneering spirit" or the university's goal of showcasing powerful achievements. In Phase 3, I redesigned the form to simulate upward growth, giving it a stronger presence, and refined the cluster shapes.

Upward Growth Form

To address readability issues from occlusion, I followed Ben Shneiderman's mantra: "Overview first, zoom and filter, then details-on-demand." When a user zooms into a cluster, an interaction is triggered to display the cluster in a flattened tile view, allowing for clear exploration of every individual within that group.