Shanghai American School

B2B, B2C, B2G, Storytelling, AI-Driven Conceptualization
Shanghai American School (SAS) needed a modern, mobile-first website to engage students, parents, and faculty. The goal was to create a visually engaging, user-friendly experience while enhancing SEO, personalization, and analytics tracking—crafting a story-driven digital experience that reflects SA

Client

Shanghai American School

Role

Creative director, product designer

Scalable, Story-Driven UX
for Shanghai American School
‍

I led the UX strategy, product design, and AI-driven personalization to create a visually immersive, story-driven platform that engaged prospective families and students. Through onsite discovery workshops and AI-powered research, we validated multiple concepts, shaping "The Journey Beyond"—an interactive experience featuring timelines, animations, and rich storytelling.
‍

We built a modular, scalable design system, ensuring cross-platform consistency and future growth. AI-driven personalization adapted content based on user behaviour, enhancing engagement. Close collaboration with engineering and data science teams optimized performance and automated content recommendations, streamlining content management.

‍

Discovery, Research & Strategy

  • Led onsite discovery sessions and R&D workshops to define audience needs and key engagement drivers.
  • Conducted competitive analysis, content audits, and SEO strategy development to optimize discoverability.
  • Worked closely with SAS stakeholders to align site goals with conversion, retention, and awareness metrics.

AI-Driven Concept Validation & Storytelling

  • Leveraged AI-powered analysis to synthesize discovery insights and validate three conceptual directions:
    • The Journey Beyond – A storytelling-driven approach emphasizing students' holistic academic growth.
    • Innovation Hub – Showcasing cutting-edge teaching methods and emerging technologies.
    • Future Leaders – Focusing on independence, creativity, and student-driven learning.
    Developed and tested interactive timeline UX to highlight student milestones and alumni impact stories.

Lead UX/UI Execution & Content Strategy

  • Designed an intuitive information architecture that streamlined navigation and improved content discovery.
  • Created a modern, interactive UI enhanced with GSAP animations, ensuring an engaging user experience.
  • Integrated personalization features to deliver tailored content experiences for different user segments

Scalable Design System
& Component-Driven Execution

  • Developed a modular design system, ensuring visual consistency and efficiency across all platforms.
  • Standardized UI components, enabling faster iteration and seamless scalability for future updates.
  • Collaborated with engineering teams to create developer-friendly, reusable components, reducing design debt.
  • Established design system documentation and interactive prototypes for streamlined adoption.

Results & Impact

  • Enhanced Engagement – The storytelling approach created a more immersive user experience, leading to higher time-on-site metrics.
  • Improved Content Discoverability – SEO optimizations and improved IA led to an increase in organic traffic.
  • Interactive & Personalized UX – GSAP animations and tailored content experiences helped create a delightful, user-centered website.

Reflections

  • Scalability: The website framework allows SAS to continuously expand functionality and content offerings.
  • AI & Personalization: Future iterations could deepen AI-driven personalization, tailoring experiences based on user behavior.
  • Expanding Interactive Storytelling: Further integration of student-led content and interactive features could enhance user engagement.
Next Project