FIG 1. 3D Chinese Green Landscape Painting (Click to enlarge)
Overview
How to design an experience that helps people understand unfamiliar cultural concepts?
Flowing Vista is an interactive exhibition experience that explores how gesture interaction design can make complex cultural concepts easier to understand. Rather than asking visitors to observe passively, the experience encourages them to explore, frame, and compose landscapes through natural gesture interactions, creating a more engaging and memorable way to experience traditional Chinese landscape painting.
Timeline
April 2023 - Feb 2024, 10 months
Outcome
Exhibition — The 1 st Digital Art China Exhibition 2024, China
Paper — HCI International 2024, USA
Team
Jackie Xie — Lead Designer
User Research, UI & UX Design, Interaction Design, 3D Modelling, Prototyping, Usability Testing
Hayes Zheng — UI & UX Designer
Interface Design, Usability Testing
00 HIGHLIGHTS
Transforming passive cultural experiences into intuitive, interactive journeys.
FIG 2. 3D Chinese Ink Landscape Painting (Click to enlarge)
FIG 3. Panoramic Mode (Click to enlarge)
FIG 4. Frame Mode (Click to enlarge)
01 CONTEXT
Chinese Classical Gardens x Chinese Landscape Painting
FIG 5. The Principle of "Changing Steps, Changing Views" (Click to enlarge)
Chinese classical gardens and Chinese landscape painting are closely connected. Chinese gardens are designed around the philosophy of "Changing Steps, Changing Views" (FIG.5), where every step reveals a different view of the same landscape. Visitors move between different garden windows, each framing the scenery from a new perspective. In simple terms, these windows act like natural viewfinders, guiding people to appreciate the landscape through carefully composed views.
FIG 6. Three Types of Chinese Landscape Painting (Click to enlarge)
This philosophy also influenced traditional Chinese landscape painting. Instead of presenting one fixed perspective, Chinese painters combined multiple viewpoints into a single composition (FIG.6), allowing viewers to experience the landscape as if they were travelling through it.
This relationship became the starting point of Flowing Vista:
How could people experience both the spatial journey of Chinese classical gardens and the artistic expression of Chinese landscape painting through one interactive experience?
02 DESIGN DECISIONS
02-1 Connecting Two Cultural Experiences
Chinese classical gardens and Chinese landscape painting are closely connected but traditionally experienced separately. To help visitors understand this relationship, I designed two complementary interaction modes (FIG.7).
Panoramic Mode: It allows visitors to enter and freely explore a three-dimensional landscape, recreating the experience of travelling through a Chinese landscape painting.
Frame Mode: It recreates the viewing experience of Chinese Classical Gardens. Visitors can draw or select different frames to observe the landscape from multiple perspectives, just as garden windows frame changing scenery.
Together, these two modes transform two related cultural traditions into one coherent interactive journey (FIG.8).
FIG 7. Interaction Interface (Click to enlarge)
FIG 8. Interaction Framework (Click to enlarge)
02-2 Natural Gesture Interaction
Traditional exhibitions often rely on buttons, menus, or controllers, which can distract visitors from the experience itself. To keep the interaction intuitive, I designed the system around natural hand gestures (FIG.9). Visitors interact directly with the landscape using their hands, allowing them to focus on exploring the artwork instead of learning how to operate the interface in the exhibition (FIG.10).
I selected Leap Motion because it provides accurate, controller-free hand tracking, making the experience accessible for first-time visitors.
FIG 9. Interaction Gesture Design (Click to enlarge)
FIG 10. Exhibition Mockup (Click to enlarge)
02-3 Designing for Personal Participation
Rather than ending the experience with observation, I wanted every visitor to become a creator.
Visitors can save or print their final composition as a personalised artwork, turning a temporary exhibition into a lasting memory that can be shared beyond the exhibition space.
03 VISUAL DESIGN
To transform a traditional painting into an explorable environment, we reconstructed Qiu Ying's Peach Blossom Spring (FIG.11) as a three-dimensional landscape.
The environment was first modelled in Blender, sculpted and refined using ZBrush, and textured with Adobe Substance 3D Painter (FIG.12). The completed assets were then imported into Unreal Engine 5, where the entire scene was reconstructed based on the original composition (FIG.13).
Different visual styles allow visitors to experience how the same landscape can convey different artistic expressions, reinforcing one of the core ideas of traditional Chinese landscape painting (FIG.14).
FIG 11. Peach Blossom Spring (Qiu Ying) (Click to enlarge)
FIG 12. 3D Modelling (Click to enlarge)
FIG 13. 3D Rendering in Unreal Engine 5 (Click to enlarge)
FIG 14. 360° Panorama for VR (Click to enlarge)
04 USER FLOWS
FIG 15. Exhibition User Flows (Click to enlarge)
05 USABILITY TEST
After developing the prototype, we invited 12 volunteers to test the gamification design and conducted interviews to gather feedback on whether the interaction model aligns with the viewing principles of Chinese gardens (FIG.16).
FIG 16. Usability Test (Click to enlarge)
06 OUTCOME
This digital project was eventually exhibited at China’s First Digital Art Exhibition 2024 (national exhibition) and Chinese CHI2023 (international exhibition) (FIG.17).
FIG 17. China's First Digital Art Exhibition 2024 (Click to enlarge)
07 PROJECT TAKEAWAYS
Skillsets
