THE FINAL CUT

CUT: 00/10 THE FINAL CUT »

PRODUCTION: SELECTED WORKS OF CHANG XU (INTERACTION & GRAPHIC DESIGNER) <select// 2022 - 2024

🅐

»

CUT: 00/10 THE FINAL CUT »

PRODUCTION: SELECTED WORKS OF CHANG XU * (INTERACTION & GRAPHIC DESIGNER) <select//2022 select//2022 — 2024 select

🅐

»

TAKE: (000) >> WELCOME TO THE FINAL CUT— WHERE EVERY DESIGN IS NOT JUST MADE TO WORK, BUT TO INSPIRE, CONNECT, AND ELEVATE.

»

THE FINAL CUT

This is more than just a collection of projects—it’s a reflection of my journey as a designer, where each piece is crafted with the precision of a film’s final cut. As an interaction and graphic designer with a background in product design, my focus extends beyond solving problems; it’s about creating a lasting impact.

In this portfolio, every project tells a story of transformation— from function to emotion, from concept to creation. It’s about shaping raw, unformed ideas into meaningful designs. Just as concrete takes form, each project evolves from an initial spark into something that not only works but also inspires. These are the spaces where connections are forged, interactions happen, and stories unfold. Through design, I aim to create moments of significance and opportunities for growth.

Whether I’m simplifying complex data into intuitive interactions or reimagining a brand’s voice to deeply resonate with its audience, my work goes beyond functionality. It’s about fostering emotional connections and driving strategic outcomes, blending practicality with meaning to engage people on a deeper level.

[01].WANDER AND WONDER //006 – 041 [02].BOUNDARIES AND BALANCE //042 – 073 [03].ECHO & ENGAGE // 074 – 117 [04].FLOW & FOCUS // 118 – 131 [05].REFRAME AND REDEFINE // 132 – 151

[06].FORM & FLOW // 152 – 165 [07].ART AND ALGORITHM //166 – 191 [08].TYPE & TASTE // 192 – 203 [09].FLOW & FOCUS // 204 – 219 [10].LIGHT &LIFE// 220 – 237

REC HDV 720p24

SELECTED WORKS OF CHANG XU

DURATION >> 15 WEEKS

R .(A001) THESIS UX/UI

TRAVEL >> MOBILE APP

PAGE + 8

PRODUCTION(PROJECT) TRAVELAB(01/10) −

'

01..02..03..04..05..06..07..08..09.. + 10

CUT: 01/10 WANDER AND WONDER »

🅐

SELECT: FALL 2022

PAGE + 9

CATEGORY: UX/UI

2022

REEL(ACADEMY): THESIS UX/UI

<select// select//fall select// //fall

INSTRUCTOR: CLAUDIA DALLENDOERFER

PRODUCTION: TRAVELAB (UX/UI) * REEL/ACADEMY: (THESIS)TRAVEL APP

REC HDV 720p24

SELECTED WORKS OF CHANG XU

SECTOR >>

OBJECTIVE

Finding travel experiences that feel personal and meaningful can be overwhelming. This project aims to simplify travel by offering curated itineraries tailored to individual preferences, helping users explore not only the world but also their own interests and aspirations.

APPROACH

By understanding user preferences and reimagining the travel experience, I designed TraveLab to craft itineraries that resonate with the traveler’s current state of mind. Each journey becomes a story, tailored to reflect both the destination and the traveler’s personal exploration of the world.

Travel & Hospitality, Technology, Consumer Experience KEYWORDS >> UX/UI & Optimization, CX Strategy, Digital Engagement

DELIVERABLES (X3) >>

Research

HiFi_Prototype

User Testing PAGE + 10

PRODUCTION(PROJECT) TRAVELAB(01/10) −

'

01..02..03..04..05..06..07..08..09.. + 10

»

🅐

INSTRUCTOR: CLAUDIA DALLENDOERFER REEL(ACADEMY): THESIS UX/UI CATEGORY: UX/UI

TAKE: (003) >>

SELECT: FALL 2022

A JOURNEY UNFOLDS THROUGH ENDLESS POSSIBILITIES, REVEALING MORE THAN JUST DESTINATIONS.

PAGE + 11

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 12

PRODUCTION(PROJECT) TRAVELAB(01/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: CLAUDIA DALLENDOERFER

REEL(ACADEMY): THESIS UX/UI

CATEGORY: UX/UI

SELECT: FALL 2022

PAGE + 13

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 14

PRODUCTION(PROJECT) TRAVELAB(01/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: CLAUDIA DALLENDOERFER

REEL(ACADEMY): THESIS UX/UI

CATEGORY: UX/UI

SELECT: FALL 2022

PAGE + 15

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 16

PRODUCTION(PROJECT) TRAVELAB(01/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: CLAUDIA DALLENDOERFER

REEL(ACADEMY): THESIS UX/UI

CATEGORY: UX/UI

SELECT: FALL 2022

PAGE + 17

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 18

PRODUCTION(PROJECT) TRAVELAB(01/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: CLAUDIA DALLENDOERFER

REEL(ACADEMY): THESIS UX/UI

CATEGORY: UX/UI

SELECT: FALL 2022

PAGE + 19

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 20

PRODUCTION(PROJECT) TRAVELAB(01/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: CLAUDIA DALLENDOERFER

REEL(ACADEMY): THESIS UX/UI

CATEGORY: UX/UI

SELECT: FALL 2022

PAGE + 21

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 22

PRODUCTION(PROJECT) TRAVELAB(01/10)

−

'

01..02..03..04..05..06..07..08..09..

02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: CLAUDIA DALLENDOERFER

REEL(ACADEMY): THESIS UX/UI

CATEGORY: UX/UI

SELECT: FALL 2022

PAGE + 23

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 24

PRODUCTION(PROJECT) TRAVELAB(01/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: CLAUDIA DALLENDOERFER

REEL(ACADEMY): THESIS UX/UI

CATEGORY: UX/UI

SELECT: FALL 2022

PAGE + 25

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 26

PRODUCTION(PROJECT) TRAVELAB(01/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: CLAUDIA DALLENDOERFER

REEL(ACADEMY): THESIS UX/UI

CATEGORY: UX/UI

SELECT: FALL 2022

PAGE + 27

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 28

PRODUCTION(PROJECT) TRAVELAB(01/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: CLAUDIA DALLENDOERFER

REEL(ACADEMY): THESIS UX/UI

CATEGORY: UX/UI

SELECT: FALL 2022

PAGE + 29

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 30

PRODUCTION(PROJECT) TRAVELAB(01/10)

−

'

01..02..03..04..05..06..07..08..09.. ..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: CLAUDIA DALLENDOERFER

REEL(ACADEMY): THESIS UX/UI

CATEGORY: UX/UI

SELECT: FALL 2022

PAGE + 31

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 32

PRODUCTION(PROJECT) TRAVELAB(01/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: CLAUDIA DALLENDOERFER

REEL(ACADEMY): THESIS UX/UI

CATEGORY: UX/UI

SELECT: FALL 2022

PAGE + 33

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 34

PRODUCTION(PROJECT) TRAVELAB(01/10)

−

'

01..02..03..04..05..06..07..08..09.. ..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: CLAUDIA DALLENDOERFER

REEL(ACADEMY): THESIS UX/UI

CATEGORY: UX/UI

SELECT: FALL 2022

PAGE + 35

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 36

PRODUCTION(PROJECT) TRAVELAB(01/10)

−

'

01..02..03..04..05..06..07..08..09.. ..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: CLAUDIA DALLENDOERFER

REEL(ACADEMY): THESIS UX/UI

CATEGORY: UX/UI

SELECT: FALL 2022

PAGE + 37

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 38

PRODUCTION(PROJECT) TRAVELAB(01/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: CLAUDIA DALLENDOERFER

REEL(ACADEMY): THESIS UX/UI

CATEGORY: UX/UI

SELECT: FALL 2022

PAGE + 39

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 40

PRODUCTION(PROJECT) TRAVELAB(01/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: CLAUDIA DALLENDOERFER

REEL(ACADEMY): THESIS UX/UI

CATEGORY: UX/UI

SELECT: FALL 2022

PAGE + 41

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 42

PRODUCTION(PROJECT) TRAVELAB(01/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: CLAUDIA DALLENDOERFER

REEL(ACADEMY): THESIS UX/UI

CATEGORY: UX/UI

SELECT: FALL 2022

PAGE + 43

REC HDV 720p24

SELECTED WORKS OF CHANG XU

DURATION >> 15 WEEKS

R .(A002)

MANAGEMENT >> WEB APPLICATION

PAGE + 44

PRODUCTION(PROJECT) TODO(02/10) −

01..02..03..04..05..06..07..08..09.. + 10

»

'

CUT: 02/10 BOUNDARIES AND BALANCE 🅐

PAGE + 45

SELECT: 2024

2024

CATEGORY: UX/UI

<select// select// select

INDIE(PERSONAL): MANAGEMENT TOOL

PRODUCTION: TODO (UX/UI) * INDIE/PERSONAL: MANAGEMENT TOOL(WEB APP)

REC HDV 720p24

SELECTED WORKS OF CHANG XU

SECTOR >>

OBJECTIVE

As work and personal life increasingly overlap, finding balance becomes a challenge. Many people struggle to manage their responsibilities without feeling overwhelmed by rigid schedules and constant demands.

APPROACH

TODO re-imagines task management as a balance between productivity and mindfulness. With the help of an AI chatbot and sharable card sorting, it creates a seamless flow between work and personal life, offering guidance and support to help users stay productive without losing their sense of wellbeing.

Ar tificial Intelligence, Productivity Tool , Consumer Technology KEYWORDS >> UX/UI & Performance, CX Strategy, Productivity Solutions

DELIVERABLES (X3) >>

Research

HiFi_Prototype

AI Chatbot PAGE + 46

PRODUCTION(PROJECT) TODO(02/10) −

'

01..02..03..04..05..06..07..08..09.. + 10

»

🅐

INDIE(PERSONAL): MANAGEMENT TOOL CATEGORY: UX/UI

TAKE: (001) >>

SELECT: 2024

FOCUS ON WHAT IS IMPORTANT, EVERY THING ELSE CAN FADE INTO THE BACKGROUND. PAGE + 47

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 48

PRODUCTION(PROJECT) TODO(02/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INDIE(PERSONAL): MANAGEMENT TOOL

CATEGORY: UX/UI

SELECT: 2024

PAGE + 49

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 50

PRODUCTION(PROJECT) TODO(02/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INDIE(PERSONAL): MANAGEMENT TOOL

CATEGORY: UX/UI

SELECT: 2024

PAGE + 51

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 52

PRODUCTION(PROJECT) TODO(02/10) −

'

01..02..03..04..05..06..07..08..09.. + 10

PHASE 3: STRATEGY AND COMPETITIVE ANALYSIS

OBJECTIVE

Evaluate commonly used task planner web apps to identify strengths, weaknesses, and opportunities for improvement.

TOOLS ANALYZED

1. Microsoft Planner: • •

Strengths: Task creation and priority setting.

Weaknesses: Limited task visibility and lack of time-specific planning.

2. Todoist: • •

Strengths: Excellent date display and task sorting.

Weaknesses: No completed task tracking, potential color accessibility issues.

2. Trello: • •

KEY TAKEAWAYS:

Strengths: Clear task categories and smooth drag-and-drop transitions.

Weaknesses: Prone to clutter with outdated tasks, lacks motivational interactions.

Task Organization: A Kanban board-style system (e.g., “To Do,” “In Progress,” “Done”) improves task clarity and tracking.

•

Engagement Features: Interactive elements like habit sharing and badges can enhance user motivation.

•

Efficiency Tools: Sorting, categorization, and prioritization are essential for effective task management.

INDIE(PERSONAL): MANAGEMENT TOOL

•

CATEGORY: UX/UI SELECT: 2024

PAGE + 53

REC HDV 720p24

SELECTED WORKS OF CHANG XU

CORE INSIGHTS FROM IN-DEPTH INTERVIEWS AND SURVEYS

OBJECTIVE

To uncover user motivations, behaviors, and pain points in task management, ensuring design decisions align with real user needs.

IN-DEPTH INTERVIEWS (4 PARTICIPANTS )

1. Approach: One-on-one conversations using open-ended questions to gain deep insights into users’ daily task planning processes and challenges.

2. Key Insights:

SURVEYS (32 PARTICIPANTS)

•

Daily Scheduling Challenges: Users face difficulties accessing and following their schedules, often due to lack of reminders or flexibility.

•

Motivation Factors: Productivity tools with visual progress indicators or small rewards encourage adherence to plans.

•

Barriers to Consistency: Distractions (e.g., social media, games) and overly rigid schedules lead users to deviate from their plans.

•

Commitment Gaps: Users struggle to stick to schedules without personalized nudges or flexible adjustments.

1.Purpose: Validate interview findings, test hypotheses, and refine the customer journey map.

2.Findings: •

Behavior Confirmation: Most users create schedules but fail to consistently follow them due to external distractions or lack of engagement.

•

Feature Prioritization: Users value flexibility, reminders, and motivational tools like habit trackers and rewards.

•

Journey Alignment: Feedback confirmed the need for a more user-friendly, engaging task management solution.

PAGE + 54

PRODUCTION(PROJECT) TODO(02/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INDIE(PERSONAL): MANAGEMENT TOOL

CATEGORY: UX/UI

SELECT: 2024

PAGE + 55

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 56

PRODUCTION(PROJECT) TODO(02/10) −

'

01..02..03..04..05..06..07..08..09.. + 10

USER JOURNEY MAPPING & CARD SORTING

USER JOURNEY MAPPING

1. Objective: To map the end-to-end experience of users interacting with the TODO app, focusing on the integration of AI chatbot features.

2. Approach: •

Chart significant touchpoints from onboarding to daily task management and habit formation.

•

Identify moments of friction (e.g., unclear navigation or insufficient customization) and delight (e.g., seamless AI chatbot assistance).

2. Outcome: The visualized journey highlights areas where AI-driven features, such as personalized task suggestions, reminders, and habit tracking, can enhance user engagement and streamline the overall experience.

CARD SORTING EXERCISE

1. Objective: To understand user perspectives on organizing the app’s content and features, capturing their mental models for intuitive navigation.

2. Approach: Participants grouped features (e.g., task creation, scheduling, habit tracking, community engagement) into categories they found logical.

•

Observed patterns in user preferences for feature grouping and naming conventions.

INDIE(PERSONAL): MANAGEMENT TOOL

•

2. Outcome: CATEGORY: UX/UI

Insights revealed user expectations for clear, intuitive categories, such as separating “Task Management”, “Habit Tracking”, and “Community”, allowing the design to reflect natural user workflows and improve accessibility.

SELECT: 2024

PAGE + 57

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 58

PRODUCTION(PROJECT) TODO(02/10) −

• • •

WANTS

•

Balance academics, extracurriculars, and personal development.

Build professional skills (fitness, coding, reading).

Maintain mental health through a healthy work-life balance.

• • •

Integrated scheduling for academics, activities, and personal tasks.

Non-intrusive reminders to stay on track.

Social features for collaboration and sharing.

Analytics to optimize productivity.

GAINS

• • • •

Better control over his schedule.

Reduced stress with proactive planning tools.

Growth through motivational tracking and rewards.

Stronger peer connections via shared platforms.

PAIN POINTS

• • •

Overwhelmed by juggling tasks.

No unified tool for academic and personal needs.

Poor work-life segmentation leads to lost personal time.

'

GOALS

01..02..03..04..05..06..07..08..09.. + 10

PERSONA 1: JASON (THE TECH-SAV VY STUDENT)

MICHELLE (THE PROFESSIONAL SEEKING WORK-LIFE HARMONY)

Boost productivity during work hours.

Synchronize task management across platforms Dedicate time to hobbies and well-being.

Separate work and personal tasks to reduce stress.

WANTS

• • • •

Distinct environments for work and personal life.

Tools for downtime scheduling and reminders.

Integration with calendars, email, and health apps.

Customizable notifications for flexibility.

GAINS

• • • •

Clearer boundaries between work and life.

Efficient task completion with tailored tools.

Peace of mind from a well-organized schedule.

Fulfillment from consistent personal time.

PAIN POINTS

• • •

Burnout from failing to disconnect from work.

Lack of tools to handle a dynamic lifestyle.

Struggles with productivity in fluctuating remote work.

CATEGORY: UX/UI

• • • •

INDIE(PERSONAL): MANAGEMENT TOOL

GOALS

SELECT: 2024

PAGE + 59

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 60

PRODUCTION(PROJECT) TODO(02/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INDIE(PERSONAL): MANAGEMENT TOOL

CATEGORY: UX/UI

SELECT: 2024

PAGE + 61

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 62

PRODUCTION(PROJECT) TODO(02/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INDIE(PERSONAL): MANAGEMENT TOOL

CATEGORY: UX/UI

SELECT: 2024

PAGE + 63

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 64

PRODUCTION(PROJECT) TODO(02/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INDIE(PERSONAL): MANAGEMENT TOOL

CATEGORY: UX/UI

SELECT: 2024

PAGE + 65

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 66

PRODUCTION(PROJECT) TODO(02/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INDIE(PERSONAL): MANAGEMENT TOOL

CATEGORY: UX/UI

SELECT: 2024

PAGE + 67

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 68

PRODUCTION(PROJECT) TODO(02/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INDIE(PERSONAL): MANAGEMENT TOOL

CATEGORY: UX/UI

SELECT: 2024

PAGE + 69

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 70

PRODUCTION(PROJECT) TODO(02/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INDIE(PERSONAL): MANAGEMENT TOOL

CATEGORY: UX/UI

SELECT: 2024

PAGE + 71

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 72

PRODUCTION(PROJECT) TODO(02/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INDIE(PERSONAL): MANAGEMENT TOOL

CATEGORY: UX/UI

SELECT: 2024

PAGE + 73

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 74

PRODUCTION(PROJECT) TODO(02/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INDIE(PERSONAL): MANAGEMENT TOOL

CATEGORY: UX/UI

SELECT: 2024

PAGE + 75

REC HDV 720p24

SELECTED WORKS OF CHANG XU

DURATION >> 12 WEEKS

R.(A003)

PODCAST >> MOBILE APP

PAGE + 76

PRODUCTION(PROJECT) SPOTPOD(03/10) −

'

»

01..02..03..04..05..06..07..08..09.. + 10

CUT: 03/10 ECHO & ENGAGE

🅐

PAGE + 77

SELECT: 2023

2023

CATEGORY: UX/UI

<select// select// select

INDIE(PERSONAL): PODCAST APP DESIGN

PRODUCTION: SPOTPOD (UX/UI) * INDIE/PERSONAL: PODCAST APP

REC HDV 720p24

SELECTED WORKS OF CHANG XU

SECTOR >>

OBJECTIVE

Podcast listeners, whether seasoned or new, often spend too much time searching for the right episode. This project aims to redesign that experience—making discovery smoother and more intuitive, so listeners can focus on what truly matters: enjoying the content.

APPROACH

By rethinking the search process, I designed this podcast app that prioritizes ease of use and connection. The app not only simplifies finding favorite shows but also builds a community where users can share recommendations and deepen their listening experiences.

Digital Platforms, echnology, Media & Enter tainment KEYWORDS >> UX/UI & Performance, CX Strategy, Community Engagement

DELIVERABLES (X3) >>

Research

HiFi_Prototype

User Testing PAGE + 78

PRODUCTION(PROJECT) SPOTPOD(03/10) −

'

01..02..03..04..05..06..07..08..09.. + 10

»

🅐

INDIE(PERSONAL): PODCAST APP DESIGN CATEGORY: UX/UI

TAKE: (002) >>

SELECT: 2023

IN A WORLD OF VOICES, FINDING YOUR STORY BECOMES A SHARED JOURNEY. PAGE + 79

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 80

PRODUCTION(PROJECT) SPOTPOD(03/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INDIE(PERSONAL): PODCAST APP DESIGN

CATEGORY: UX/UI

SELECT: 2023

PAGE + 81

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 82

PRODUCTION(PROJECT) SPOTPOD(03/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INDIE(PERSONAL): PODCAST APP DESIGN

CATEGORY: UX/UI

SELECT: 2023

PAGE + 83

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PHASE 1: PROBLEM IDENTIFICATION AND PROJECT FOUNDATION

OBJECTIVE

To define the core problem and establish the foundation for Spotpod by understanding the challenges users face when discovering podcasts, particularly for beginners.

KEY INSIGHTS

1.User Frustrations with Podcast Discovery: •

Beginners struggle to find relevant content due to overwhelming search results and lack of tailored recommendations.

•

Existing platforms often fail to match user interests, leading to time-consuming searches across multiple sources like social media and reviews.

2.Personal Experience as a Catalyst: •

•

Searching for “design” on podcast platforms yielded irrelevant results, requiring manual effort to discover shows like UX Cake and Nielsen Norman UX Podcast.

This highlighted a need for a solution that simplifies podcast discovery for new users.

3.Problem Statement:

WHY AN APP?

•

How might we help users, especially newcomers, discover podcasts that align with their interests efficiently and effectively?

1.

Podcasts, as an audio-first medium, demand a user-centric approach that prioritizes discovery and personalization.

Designing an app enables a seamless, integrated experience tailored to the unique format of podcasts.

2.

CONCLUSION OF PHASE 1:

The research in this phase clarified the core challenge and validated the need for Spotpod: an app designed to streamline podcast discovery and connect users with content they’ll love. This understanding sets the stage for Phase 2, focusing on user research and solution ideation.

PAGE + 84

PRODUCTION(PROJECT) SPOTPOD(03/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INDIE(PERSONAL): PODCAST APP DESIGN

CATEGORY: UX/UI

SELECT: 2023

PAGE + 85

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 86

PRODUCTION(PROJECT) SPOTPOD(03/10) −

To evaluate Spotify and Apple Podcasts, identify key challenges, and define core features to address user pain points in Spotpod.

COMPETITIVE ANALYSIS

1.Key Findings with Spotify • •

Strengths: Discovery features like “New Releases” and “Podcast Charts.”

Weaknesses: Overwhelming catalog organization.

No user-to-podcast interaction (e.g., comments, discussions).

'

OBJECTIVE

01..02..03..04..05..06..07..08..09.. + 10

PHASE 2: COMPETITIVE ANALYSIS AND BUSINESS OPPORTUNITIES

2.Key Findings with Apple Podcasts • •

INSIGHTS AND DESIGN FOCUS

Strengths:Comment and rating sections.

Weaknesses:Comments and ratings are hard to access.

Limited listening controls: (a.) No sorting by oldest episodes. (b.) Complex playback adjustments (3+ steps). (c.) Difficulty in managing and editing episode queues.

1. Discovery: •

Introduce a personalized landing page for users to select topics of interest. Simplify catalog browsing to reduce user overwhelm.

2. Community: Foster user engagement through features like comments, discussions, and shared playlists.

3. Listening Experience: •

Spotpod’s design will focus on three core areas: streamlined discovery, community engagement, and an enhanced listening experience. These improvements aim to address current platform shortcomings and create a seamless experience for podcast listeners.

CATEGORY: UX/UI

CONCLUSION OF PHASE 1:

Simplify playback controls: easy sorting, queue editing, and order adjustments.

INDIE(PERSONAL): PODCAST APP DESIGN

•

SELECT: 2023

PAGE + 87

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 88

PRODUCTION(PROJECT) SPOTPOD(03/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INDIE(PERSONAL): PODCAST APP DESIGN

CATEGORY: UX/UI

SELECT: 2023

PAGE + 89

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 90

PRODUCTION(PROJECT) SPOTPOD(03/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INDIE(PERSONAL): PODCAST APP DESIGN

CATEGORY: UX/UI

SELECT: 2023

PAGE + 91

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 92

PRODUCTION(PROJECT) SPOTPOD(03/10) −

'

01..02..03..04..05..06..07..08..09.. + 10

PHASE 3: UNDERSTANDING THE USERS

OBJECTIVE

Transform user insights into actionable designs through interviews, personas, wireframes, and user testing.

KEY HIGHLIGHTS

1. User Insights •

Focus: A podcast app is about more than listening—it’s about discovery, interaction, and seamless usability.

•

Pain Points: (a.) Time-consuming discovery process. (b.) Missing or hard-to-access features. (c.) Lack of community engagement.

2. Personas •

New Users:Profile: Profile: New to podcasts, seeking relevant content.

Goal: To find favorite shows quickly and easily.

•

Experienced Listeners: Profile: Experienced listener, values usability and simplicity.

Goal: A user-friendly, intuitive listening experience.

3. Prototypes •

Developed low- and mid-fidelity wireframes addressing key pain points: streamlined discovery, usability, and engagement.

•

This phase solidified the app’s core goals: simplifying podcast discovery, enhancing usability, and fostering community engagement. The insights and testing feedback shaped a clear path for refining Spotpod’s features, preparing for high-fidelity design and final implementation in the next phase.

CATEGORY: UX/UI

CONCLUSION OF PHASE3:

Feedback:Improve spacing, font size, and page hierarchy. Add podcast creator icons. Simplify listening transitions and reduce confusion.

INDIE(PERSONAL): PODCAST APP DESIGN

4. User Testing

SELECT: 2023

PAGE + 93

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 94

PRODUCTION(PROJECT) SPOTPOD(03/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INDIE(PERSONAL): PODCAST APP DESIGN

CATEGORY: UX/UI

SELECT: 2023

PAGE + 95

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 96

PRODUCTION(PROJECT) SPOTPOD(03/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INDIE(PERSONAL): PODCAST APP DESIGN

CATEGORY: UX/UI

SELECT: 2023

PAGE + 97

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 98

PRODUCTION(PROJECT) SPOTPOD(03/10) −

Deliver solutions to key user pain points with refined designs focused on podcast discovery, listening experience, and engagement.

SOLUTIONS & FEATURES

1. Personalized Podcast Discovery •

Onboarding: Category selection for tailored recommendations

•

Homepage:Curated recommendations with genre tags. Quick start episodes with “Refresh Picks.” Recently played for easy resumption.

•

Community: Discover page with top charts and discussion posts. Creator posts marked for clarity.

'

OBJECTIVE

01..02..03..04..05..06..07..08..09.. + 10

PHASE 4: HIGH-FIDELIT Y PROTOT YPING

2. Intuitive Listening Experience • •

•

Podcast Page: Category selection for tailored recommendations.

Episode Playing Page: (a.) Real-Time Comments: Foster interaction and enhance user engagement. (b.) Playback Controls: Intuitive options for play, pause, download, and queue management. (c.) Advanced Features: Timer for playback duration and promoted links for monetization.

Community: Discover page with top charts and discussion posts. Creator posts marked for clarity.

These high-fidelity prototypes streamline discovery, enhance usability, and foster engagement, addressing user needs while positioning Spotpod as a uniquely

CATEGORY: UX/UI

CONCLUSION OF PHASE3:

INDIE(PERSONAL): PODCAST APP DESIGN

3. Simplified Library Management • Library Page: Central hub for playlists, queues, and downloads.

• Favorite Page: Quick access to starred shows.

• Profile Page: Tracks listening time and discussions, enabling badge upgrades.

intuitive and interactive podcast app.

SELECT: 2023

PAGE + 99

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 100

PRODUCTION(PROJECT) SPOTPOD(03/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INDIE(PERSONAL): PODCAST APP DESIGN

CATEGORY: UX/UI

SELECT: 2023

PAGE + 101

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 102

PRODUCTION(PROJECT) SPOTPOD(03/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INDIE(PERSONAL): PODCAST APP DESIGN

CATEGORY: UX/UI

SELECT: 2023

PAGE + 103

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 104

PRODUCTION(PROJECT) SPOTPOD(03/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INDIE(PERSONAL): PODCAST APP DESIGN

CATEGORY: UX/UI

SELECT: 2023

PAGE + 105

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 106

PRODUCTION(PROJECT) SPOTPOD(03/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INDIE(PERSONAL): PODCAST APP DESIGN

CATEGORY: UX/UI

SELECT: 2023

PAGE + 107

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 108

PRODUCTION(PROJECT) SPOTPOD(03/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INDIE(PERSONAL): PODCAST APP DESIGN

CATEGORY: UX/UI

SELECT: 2023

PAGE + 109

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 110

PRODUCTION(PROJECT) SPOTPOD(03/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INDIE(PERSONAL): PODCAST APP DESIGN

CATEGORY: UX/UI

SELECT: 2023

PAGE + 111

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 112

PRODUCTION(PROJECT) SPOTPOD(03/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INDIE(PERSONAL): PODCAST APP DESIGN

CATEGORY: UX/UI

SELECT: 2023

PAGE + 113

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 114

PRODUCTION(PROJECT) SPOTPOD(03/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INDIE(PERSONAL): PODCAST APP DESIGN

CATEGORY: UX/UI

SELECT: 2023

PAGE + 115

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 116

PRODUCTION(PROJECT) SPOTPOD(03/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INDIE(PERSONAL): PODCAST APP DESIGN

CATEGORY: UX/UI

SELECT: 2023

PAGE + 117

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 118

PRODUCTION(PROJECT) SPOTPOD(03/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INDIE(PERSONAL): PODCAST APP DESIGN

CATEGORY: UX/UI

SELECT: 2023

PAGE + 119

REC HDV 720p24

SELECTED WORKS OF CHANG XU

DURATION >> 14 WEEKS

R .(A004)

SCHEDULING >> MOBILE APP

PAGE + 120

PRODUCTION(PROJECT) DOIT(04/10) −

'

»

01..02..03..04..05..06..07..08..09.. + 10

CUT: 04/10 FLOW & FOCUS

🅐

INSTRUCTOR: NIKKI KIPPLE REEL(ACADEMY): USER EXPERIENCE DESIGN

PRODUCTION: DOIT (UX/UI) * REEL/ACADEMY: SCHEDULING APP

CATEGORY: UX/UI

PAGE + 121

2022

SELECT: SPRING 2022

<select// select//spring select// //spring

REC HDV 720p24

SELECTED WORKS OF CHANG XU

SECTOR >>

OBJECTIVE

Traditional scheduling tools often feel rigid and fail to adapt to the natural flow of life. This project seeks to create a flexible scheduling experience that adjusts to users' shifting priorities, promoting both productivity and wellbeing.

APPROACH

By focusing on flexibility, I designed Flow to adjust in real time to users’ needs. The app helps users manage their day with ease, maintaining focus and energy without the pressure of strict time blocks, ensuring a smoother, more balanced approach to scheduling.

Health & Wellness, Technology, Productivity Tools KEYWORDS >> Adaptive User Experience, Optimization, Design & Performance

DELIVERABLES (X3) >>

Research

HiFi_Prototype

User Testing PAGE + 122

PRODUCTION(PROJECT) DOIT(04/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

🅐 »

INSTRUCTOR: NIKKI KIPPLE

REEL(ACADEMY): USER EXPERIENCE DESIGN

CATEGORY: UX/UI

TAKE: (004) >>

PAGE + 123

SELECT: SPRING 2022

IN THE RHY THM OF YOUR DAY, IT’S NOT ABOUT CHASING TIME, BUT FINDING FLOW.

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 124

PRODUCTION(PROJECT) DOIT(04/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: NIKKI KIPPLE

REEL(ACADEMY): USER EXPERIENCE DESIGN

CATEGORY: UX/UI

SELECT: SPRING 2022

PAGE + 125

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 126

PRODUCTION(PROJECT) DOIT(04/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: NIKKI KIPPLE

REEL(ACADEMY): USER EXPERIENCE DESIGN

CATEGORY: UX/UI

SELECT: SPRING 2022

PAGE + 127

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 128

PRODUCTION(PROJECT) DOIT(04/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: NIKKI KIPPLE

REEL(ACADEMY): USER EXPERIENCE DESIGN

CATEGORY: UX/UI

SELECT: SPRING 2022

PAGE + 129

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 130

PRODUCTION(PROJECT) DOIT(04/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: NIKKI KIPPLE

REEL(ACADEMY): USER EXPERIENCE DESIGN

CATEGORY: UX/UI

SELECT: SPRING 2022

PAGE + 131

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 132

PRODUCTION(PROJECT) DOIT(04/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: NIKKI KIPPLE

REEL(ACADEMY): USER EXPERIENCE DESIGN

CATEGORY: UX/UI

SELECT: SPRING 2022

PAGE + 133

REC HDV 720p24

SELECTED WORKS OF CHANG XU DURATION >> 15 WEEKS

R .(A005)

DeLorean >> BRAND REINVENTION

PAGE + 134

PRODUCTION(PROJECT) DELOREAN/IDENTITY(05/10) −

'

»

01..02..03..04..05..06..07..08..09.. + 10

CUT: 05/10 REFRAME AND REDEFINE 🅐

CATEGORY: BRANDING SELECT: SPRING 2024

PAGE + 135

2024

REEL(ACADEMY): THE NATURE OF IDENTITY

<select// select//spring select// //spring

INSTRUCTOR: HUNTER WIMMER

PRODUCTION: DeLorean (IDETITY) * REEL/ACADEMY: THE NATURE OF IDENTITY

REC HDV 720p24

SECTOR >>

SELECTED WORKS OF CHANG XU

OBJECTIVE

As markets and audiences evolve, brands must adapt to remain relevant while staying true to their identity. The rebranding of DeLorean represents a strategic reinvention, ensuring the brand maintains its core values while meeting new challenges.

APPROACH

By redefining DeLoreand, I focused on creating a visual identity that supports the success of the business in today's competitive landscape. Through careful strategy,development, and implementation of brand assets, I crafted a cohesive system that enhances the brand’s ability to thrive across all platforms, ensuring consistency and relevance in a rapidly changing market.

Technology/Design, Innovation Initiatives, Education & Beyond KEYWORDS >> Brand Reinvention, Consistency, Strategic Identity

DELIVERABLES (X2) >>

4 Guides

New Website PAGE + 136

PRODUCTION(PROJECT) DELOREAN/IDENTITY(05/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

🅐 »

INSTRUCTOR: HUNTER WIMMER

REEL(ACADEMY): THE NATURE OF IDENTITY

CATEGORY: BRANDING

TAKE: (005) >>

PAGE + 137

SELECT: SPRING 2024

SHARPEN THE VISION, REDEFINE BRAND WITH CLARIT Y AND PURPOSE.

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 138

PRODUCTION(PROJECT) DELOREAN/IDENTITY(05/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: HUNTER WIMMER

REEL(ACADEMY): THE NATURE OF IDENTITY

CATEGORY: BRANDING

SELECT: SPRING 2024

PAGE + 139

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 140

PRODUCTION(PROJECT) DELOREAN/IDENTITY(05/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: HUNTER WIMMER

REEL(ACADEMY): THE NATURE OF IDENTITY

CATEGORY: BRANDING

SELECT: SPRING 2024

PAGE + 141

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 142

PRODUCTION(PROJECT) DELOREAN/IDENTITY(05/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: HUNTER WIMMER

REEL(ACADEMY): THE NATURE OF IDENTITY

CATEGORY: BRANDING

SELECT: SPRING 2024

PAGE + 143

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 144

PRODUCTION(PROJECT) DELOREAN/IDENTITY(05/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: HUNTER WIMMER

REEL(ACADEMY): THE NATURE OF IDENTITY

CATEGORY: BRANDING

SELECT: SPRING 2024

PAGE + 145

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 146

PRODUCTION(PROJECT) DELOREAN/IDENTITY(05/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: HUNTER WIMMER

REEL(ACADEMY): THE NATURE OF IDENTITY

CATEGORY: BRANDING

SELECT: SPRING 2024

PAGE + 147

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 148

PRODUCTION(PROJECT) DELOREAN/IDENTITY(05/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: HUNTER WIMMER

REEL(ACADEMY): THE NATURE OF IDENTITY

CATEGORY: BRANDING

SELECT: SPRING 2024

PAGE + 149

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 150

PRODUCTION(PROJECT) DELOREAN/IDENTITY(05/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: HUNTER WIMMER

REEL(ACADEMY): THE NATURE OF IDENTITY

CATEGORY: BRANDING

SELECT: SPRING 2024

PAGE + 151

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 152

PRODUCTION(PROJECT) DELOREAN/IDENTITY(05/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: HUNTER WIMMER

REEL(ACADEMY): THE NATURE OF IDENTITY

CATEGORY: BRANDING

SELECT: SPRING 2024

PAGE + 153

REC HDV 720p24

SELECTED WORKS OF CHANG XU

DURATION >> 15 WEEKS

R.(A006)

DAY JOB >> T YPE SYSTEM EXHIBIT

PAGE + 154

PRODUCTION(PROJECT) Day Job/Exhibition(06/10) −

'

»

01..02..03..04..05..06..07..08..09.. + 10

CUT: 06/10 FORM & FLOW

🅐

INSTRUCTOR: JARRETT FARLS REEL(ACADEMY): TYPE SYSTEMS

PRODUCTION: Day Job (EXHIBITION) * REEL/ACADEMY: TYPE SYSTEMS

CATEGORY: GRAPHIC DESIGN

PAGE + 155

2024

SELECT: SPRING 2024

<select// select//spring select// //spring

REC HDV 720p24

SELECTED WORKS OF CHANG XU

SECTOR >>

OBJECTIVE

In many museums, typography is limited to functional signage.

This project reimagines its role, transforming type into a visual language that both informs and enriches the exhibit experience.

This project turns typography into a narrative tool, making it central to the visitor’s journey.

APPROACH

I designed a three-part typographic system that includes a booklet for narrative guidance, environmental signage to enhance the spatial experience, and a website for digital interaction. This system ensures visitors are not only informed but also engaged through a cohesive blend of physical and digital storytelling.

Digital Interaction, Exhibition Design, Cultural Institutions KEYWORDS >> Spatial Storytelling, Typography, Graphic / System Design

DELIVERABLES (X3) >>

Exhibition

A Booklet

New Website PAGE + 156

PRODUCTION(PROJECT) Day Job/Exhibition(06/10) −

'

01..02..03..04..05..06..07..08..09.. + 10

»

🅐 INSTRUCTOR: JARRETT FARLS REEL(ACADEMY): TYPE SYSTEMS CATEGORY: GRAPHIC DESIGN

TAKE: (006) >>

PAGE + 157

SELECT: SPRING 2024

IN SPACES WHERE STORIES ARE TOLD, FORM GUIDES THE WAY AND FLOW BRINGS THE NARRATIVE TO LIFE.

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 158

PRODUCTION(PROJECT) Day Job/Exhibition(06/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: JARRETT FARLS

REEL(ACADEMY): TYPE SYSTEMS

CATEGORY: GRAPHIC DESIGN

SELECT: SPRING 2024

PAGE + 159

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 160

PRODUCTION(PROJECT) Day Job/Exhibition(06/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: JARRETT FARLS

REEL(ACADEMY): TYPE SYSTEMS

CATEGORY: GRAPHIC DESIGN

SELECT: SPRING 2024

PAGE + 161

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 162

PRODUCTION(PROJECT) Day Job/Exhibition(06/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: JARRETT FARLS

REEL(ACADEMY): TYPE SYSTEMS

CATEGORY: GRAPHIC DESIGN

SELECT: SPRING 2024

PAGE + 163

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 164

PRODUCTION(PROJECT) Day Job/Exhibition(06/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: JARRETT FARLS

REEL(ACADEMY): TYPE SYSTEMS

CATEGORY: GRAPHIC DESIGN

SELECT: SPRING 2024

PAGE + 165

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 166

PRODUCTION(PROJECT) Day Job/Exhibition(06/10)

−

'

01..02..03..04..05..06..07..08..09..

02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: JARRETT FARLS

REEL(ACADEMY): TYPE SYSTEMS

CATEGORY: GRAPHIC DESIGN

SELECT: SPRING 2024

PAGE + 167

REC HDV 720p24

SELECTED WORKS OF CHANG XU

DURATION >> 15 WEEKS

R.(A007)

ARTISYNC >> ART & TECH BRAND

PAGE + 168

PRODUCTION(PROJECT) ARTISYNC/ART & TECH BRAND (07/10) −

'

»

01..02..03..04..05..06..07..08..09.. + 10

CUT: 07/10 ART AND ALGORITHM 🅐

SELECT: FALL 2023

PAGE + 169

CATEGORY: BRANDING

2023

REEL(ACADEMY): VISUAL THINKING

<select// select//fall select// //fall

INSTRUCTOR: SANDRA ISLA

PRODUCTION: ArtiSync (ART & TECH BRAND) * REEL/ACADEMY: VISUAL THINKING

REC HDV 720p24

SELECTED WORKS OF CHANG XU

SECTOR >>

OBJECTIVE

As technology becomes more pervasive, it risks disconnecting us from tangible experiences. ArtiSync was created to counter this trend, using technology to deepen our interaction with art.

The project addresses this gap through three products

APPROACH

By integrating interactive installations, a 3D sculptural print pen, and a digital platform, ArtiSync redefines the way audiences engage with art. The technology responds to viewer interaction, transforming passive observation into an active experience.

Creative Innovation, Ar t & Culture, Experiential Technology KEYWORDS >> Immersive Experience, Branding, Interactive Installation

DELIVERABLES (X3) >>

Exhibition

Product Set

New Website PAGE + 170

PRODUCTION(PROJECT) ARTISYNC/ART & TECH BRAND (07/10) −

'

01..02..03..04..05..06..07..08..09.. + 10

»

🅐

INSTRUCTOR: SANDRA ISLA REEL(ACADEMY): VISUAL THINKING CATEGORY: BRANDING

TAKE: (007) >>

PAGE + 171

SELECT: FALL 2023

WHEN TECH MEETS CREATIVIT Y, ART TURNS FROM WHAT YOU SEE INTO WHAT YOU FEEL.

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 172

PRODUCTION(PROJECT) ARTISYNC/ART & TECH BRAND (07/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: SANDRA ISLA

REEL(ACADEMY): VISUAL THINKING

CATEGORY: BRANDING

SELECT: FALL 2023

PAGE + 173

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 174

PRODUCTION(PROJECT) ARTISYNC/ART & TECH BRAND (07/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: SANDRA ISLA

REEL(ACADEMY): VISUAL THINKING

CATEGORY: BRANDING

SELECT: FALL 2023

PAGE + 175

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 176

PRODUCTION(PROJECT) ARTISYNC/ART & TECH BRAND (07/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: SANDRA ISLA

REEL(ACADEMY): VISUAL THINKING

CATEGORY: BRANDING

SELECT: FALL 2023

PAGE + 177

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 178

PRODUCTION(PROJECT) ARTISYNC/ART & TECH BRAND (07/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: SANDRA ISLA

REEL(ACADEMY): VISUAL THINKING

CATEGORY: BRANDING

SELECT: FALL 2023

PAGE + 179

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 180

PRODUCTION(PROJECT) ARTISYNC/ART & TECH BRAND (07/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: SANDRA ISLA

REEL(ACADEMY): VISUAL THINKING

CATEGORY: BRANDING

SELECT: FALL 2023

PAGE + 181

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 182

PRODUCTION(PROJECT) ARTISYNC/ART & TECH BRAND (07/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: SANDRA ISLA

REEL(ACADEMY): VISUAL THINKING

CATEGORY: BRANDING

SELECT: FALL 2023

PAGE + 183

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 184

PRODUCTION(PROJECT) ARTISYNC/ART & TECH BRAND (07/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: SANDRA ISLA

REEL(ACADEMY): VISUAL THINKING

CATEGORY: BRANDING

SELECT: FALL 2023

PAGE + 185

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 186

PRODUCTION(PROJECT) ARTISYNC/ART & TECH BRAND (07/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: SANDRA ISLA

REEL(ACADEMY): VISUAL THINKING

CATEGORY: BRANDING

SELECT: FALL 2023

PAGE + 187

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 188

PRODUCTION(PROJECT) ARTISYNC/ART & TECH BRAND (07/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: SANDRA ISLA

REEL(ACADEMY): VISUAL THINKING

CATEGORY: BRANDING

SELECT: FALL 2023

PAGE + 189

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 190

PRODUCTION(PROJECT) ARTISYNC/ART & TECH BRAND (07/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: SANDRA ISLA

REEL(ACADEMY): VISUAL THINKING

CATEGORY: BRANDING

SELECT: FALL 2023

PAGE + 191

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 192

PRODUCTION(PROJECT) ARTISYNC/ART & TECH BRAND (07/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: SANDRA ISLA

REEL(ACADEMY): VISUAL THINKING

CATEGORY: BRANDING

SELECT: FALL 2023

PAGE + 193

REC HDV 720p24

SELECTED WORKS OF CHANG XU

DURATION >> 15 WEEKS

R.(A008)

NEUE HAAS UNICA >> T YPEFACE PROMOTION

PAGE + 194

PRODUCTION(PROJECT) NEUE HAAS UNICA/PROMOTION(08/10) −

'

»

01..02..03..04..05..06..07..08..09.. + 10

CUT: 08/10 TYPE & TASTE

🅐

SELECT: FALL 2023

PAGE + 195

CATEGORY: GRAPHIC/PACKAGING

2023

REEL(ACADEMY): TYPE COMPOSITION

<select// select//fall select// //fall

INSTRUCTOR: JOHN NETTLETON

PRODUCTION: NEUE HAAS UNICA (PROMOTION) * REEL/ACADEMY: TYPE COMPOSITION

REC HDV 720p24

SECTOR >>

SELECTED WORKS OF CHANG XU

OBJECTIVE

This project promotes the Neue Haas Unica typeface. The goal is to introduce the typeface to design professionals, highlighting not just its aesthetic qualities, but its ability to organize, structure, and elevate content. Typography is more than just form—it shapes the way we communicate and perceive meaning.

APPROACH

While traditional type specimens like manuals and posters effectively showcase typefaces, I wanted to explore a more innovative and personal way to connect with designers.

By collaborating with Blue Bottle Coffee, I combined the promotion of Neue Haas Unica with exclusive coffee packaging.

Introduced as a thoughtful gift at a design conference, this approach integrates the typeface into designers’ daily rituals, creating a memorable and engaging experience tailored to the creative community.

Creative Industries, Brand & Packaging Design, Design Conferences KEYWORDS >> Communication Design Grid System, Typography/Visual Hierarchy

DELIVERABLES (X2) >>

Packaging Set

Promo Video PAGE + 196

PRODUCTION(PROJECT) NEUE HAAS UNICA/PROMOTION(08/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

🅐 »

INSTRUCTOR: JOHN NETTLETON REEL(ACADEMY): TYPE COMPOSITION

CATEGORY: GRAPHIC/PACKAGING

TAKE: (008) >>

PAGE + 197

SELECT: FALL 2023

WHERE DESIGN MEETS FLAVOR, DISCOVERY AWAITS IN EVERY MOMENT.

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 198

PRODUCTION(PROJECT) NEUE HAAS UNICA/PROMOTION(08/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: JOHN NETTLETON REEL(ACADEMY): TYPE COMPOSITION

CATEGORY: GRAPHIC/PACKAGING

SELECT: FALL 2023

PAGE + 199

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 200

PRODUCTION(PROJECT) NEUE HAAS UNICA/PROMOTION(08/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: JOHN NETTLETON REEL(ACADEMY): TYPE COMPOSITION

CATEGORY: GRAPHIC/PACKAGING

SELECT: FALL 2023

PAGE + 201

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 202

PRODUCTION(PROJECT) NEUE HAAS UNICA/PROMOTION(08/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: JOHN NETTLETON REEL(ACADEMY): TYPE COMPOSITION

CATEGORY: GRAPHIC/PACKAGING

SELECT: FALL 2023

PAGE + 203

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 204

PRODUCTION(PROJECT) NEUE HAAS UNICA/PROMOTION(08/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: JOHN NETTLETON REEL(ACADEMY): TYPE COMPOSITION

CATEGORY: GRAPHIC/PACKAGING

SELECT: FALL 2023

PAGE + 205

REC HDV 720p24

SELECTED WORKS OF CHANG XU

DURATION >> 5 WEEKS

R .(A009)

Chungking Express >> MOTION GRAPHIC TRAILER

PAGE + 206

PRODUCTION(PROJECT) CHUNGKING EXPRESS/TRAILER(09/10) −

'

01..02..03..04..05..06..07..08..09.. + 10

CUT: 09/10 CITY AND SILENCE

»

🅐

SELECT: FALL 2023

PAGE + 207

CATEGORY: MOTION GRAPHIC

2023

REEL(ACADEMY): MOTION GRAPHICS & VIDEO

<select// select//fall select// //fall

INSTRUCTOR: FRANK PIETRONIGRO

PRODUCTION: Chungking Express (MOVIE TRAILER) * REEL/ACADEMY: MOTION GRAPHIC

REC HDV 720p24

SECTOR >>

SELECTED WORKS OF CHANG XU

OBJECTIVE

Chungking Express by Wong Kar-wai explores the delicate balance of love, time, and fleeting connections. This project reinterprets these themes through motion graphics, crafting a modern storytelling experience that captures the emotional depth of the film in a Motion Graphic Trailer.

APPROACH

From crafting illustrations to syncing them with music, I immersed myself in every step of the creation process. The result is a motion graphic that captures the emotional rhythm of Chungking Express, blending visual storytelling with sound to evoke the film’s essence of fleeting connections.

Film & Enter tainment, Creative Ar ts, Media & Communication KEYWORDS >> Digital Video, Illustration/Motion Graphics, Visual Narrative

DELIVERABLES (X1) >>

Promo Video PAGE + 208

PRODUCTION(PROJECT) CHUNGKING EXPRESS/TRAILER(09/10) −

'

01..02..03..04..05..06..07..08..09.. + 10

»

🅐 INSTRUCTOR: FRANK PIETRONIGRO REEL(ACADEMY): MOTION GRAPHICS & VIDEO CATEGORY: MOTION GRAPHIC

TAKE: (009) >>

SELECT: FALL 2023

IN FLEETING MOMENTS OF LOVE AND LONELINESS, STORIES UNFOLD IN THE SPACES WE LEAST EXPECT. PAGE + 209

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 210

PRODUCTION(PROJECT) CHUNGKING EXPRESS/TRAILER(09/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: FRANK PIETRONIGRO REEL(ACADEMY): MOTION GRAPHICS & VIDEO

CATEGORY: MOTION GRAPHIC

SELECT: FALL 2023

PAGE + 211

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 212

PRODUCTION(PROJECT) CHUNGKING EXPRESS/TRAILER(09/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: FRANK PIETRONIGRO REEL(ACADEMY): MOTION GRAPHICS & VIDEO

CATEGORY: MOTION GRAPHIC

SELECT: FALL 2023

PAGE + 213

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 214

PRODUCTION(PROJECT) CHUNGKING EXPRESS/TRAILER(09/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: FRANK PIETRONIGRO REEL(ACADEMY): MOTION GRAPHICS & VIDEO

CATEGORY: MOTION GRAPHIC

SELECT: FALL 2023

PAGE + 215

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 216

PRODUCTION(PROJECT) CHUNGKING EXPRESS/TRAILER(09/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: FRANK PIETRONIGRO REEL(ACADEMY): MOTION GRAPHICS & VIDEO

CATEGORY: MOTION GRAPHIC

SELECT: FALL 2023

PAGE + 217

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 218

PRODUCTION(PROJECT) CHUNGKING EXPRESS/TRAILER(09/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: FRANK PIETRONIGRO REEL(ACADEMY): MOTION GRAPHICS & VIDEO

CATEGORY: MOTION GRAPHIC

SELECT: FALL 2023

PAGE + 219

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 220

PRODUCTION(PROJECT) CHUNGKING EXPRESS/TRAILER(09/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INSTRUCTOR: FRANK PIETRONIGRO REEL(ACADEMY): MOTION GRAPHICS & VIDEO

CATEGORY: MOTION GRAPHIC

SELECT: FALL 2023

PAGE + 221

REC HDV 720p24

SELECTED WORKS OF CHANG XU

DURATION >> 12 WEEKS

R .(A010)

SOON >> SOL AR-POWERED STRUCTURE

PAGE + 222

PRODUCTION(PROJECT) SOON(10/10) −

'

01..02..03..04..05..06..07..08..09.. + 10

CUT: 10/10 LIGHT & LIFE

»

🅐

SELECT: 2023

PAGE + 223

2023

CATEGORY: INDUSTRIAL DESIGN

<select// select//spring select// //spring

INDIE(PERSONAL): PUBLIC STRUCTURE

PRODUCTION: SOON (INDUSTRIAL DESIGN) * INDIE/PERSONAL: PUBLIC STRUCTURE

REC HDV 720p24

SELECTED WORKS OF CHANG XU

SECTOR >>

OBJECTIVE

As the demand for clean energy grows, many communities remain disconnected from the technology that powers sustainability. SOON tackles this by turning a solar-powered structure into an educational and interactive space, inviting the public to experience renewable energy firsthand.

APPROACH

By harnessing solar power, I designed a structure that not only serves practical needs but also educates the public about clean energy. Interactive displays visualize real-time energy data, allowing visitors to see the direct impact of renewable energy in action. This solar-powered installation transforms light into both power and a visual message, inspiring conversation about sustainability and innovation.

Industrial Design, Educational Technology, Public Engagement KEYWORDS >> Solar-Powered, Sustainability/User Experience, Interactive Education

DELIVERABLES (X3) >>

Public Structure

Solar Panel

Interactive Display PAGE + 224

PRODUCTION(PROJECT) SOON(10/10) −

'

01..02..03..04..05..06..07..08..09.. + 10

»

🅐

INDIE(PERSONAL): PUBLIC STRUCTURE CATEGORY: INDUSTRIAL DESIGN

TAKE: (010) >>

PAGE + 225

SELECT: 2023

WHERE SUNLIGHT POWERS BOTH ENERGY AND CHANGE, A BRIGHTER FUTURE BEGINS.

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 226

PRODUCTION(PROJECT) SOON(10/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INDIE(PERSONAL): PUBLIC STRUCTURE

CATEGORY: INDUSTRIAL DESIGN

SELECT: 2023

PAGE + 227

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 228

PRODUCTION(PROJECT) SOON(10/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INDIE(PERSONAL): PUBLIC STRUCTURE

CATEGORY: INDUSTRIAL DESIGN

SELECT: 2023

PAGE + 229

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 230

PRODUCTION(PROJECT) SOON(10/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INDIE(PERSONAL): PUBLIC STRUCTURE

CATEGORY: INDUSTRIAL DESIGN

SELECT: 2023

PAGE + 231

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 232

PRODUCTION(PROJECT) SOON(10/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INDIE(PERSONAL): PUBLIC STRUCTURE

CATEGORY: INDUSTRIAL DESIGN

SELECT: 2023

PAGE + 233

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 234

PRODUCTION(PROJECT) SOON(10/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INDIE(PERSONAL): PUBLIC STRUCTURE

CATEGORY: INDUSTRIAL DESIGN

SELECT: 2023

PAGE + 235

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 236

PRODUCTION(PROJECT) SOON(10/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INDIE(PERSONAL): PUBLIC STRUCTURE

CATEGORY: INDUSTRIAL DESIGN

SELECT: 2023

PAGE + 237

REC HDV 720p24

SELECTED WORKS OF CHANG XU

PAGE + 238

PRODUCTION(PROJECT) SOON(10/10)

−

'

01..02..03..04..05..06..07..08..09.. + 10

INDIE(PERSONAL): PUBLIC STRUCTURE

CATEGORY: INDUSTRIAL DESIGN

SELECT: 2023

PAGE + 239

REC HDV 720p24

SELECTED WORKS OF CHANG XU

CUT: --/-ENDLESS GRATITUDE

»

<select select// //

2024 PAGE + 240

PRODUCTION(PROJECT) ENDLESS GRATITUDE −

ýýþþ ÿÿ ~} ||{ ã[\]^ä ë_Ù ß `@?î >=<; ÄÅ:/ ¹. - ^ ,+î *) (' & % $# "¹!ú0 ÜÝ1

2 ¹3¢ 5

6

7 _Ù 89 Í5Ê6 ßA BCDE F GHIJ ¹K L^ MNOP Q[ R ST #U VWNXY Z Ía ¹3àb cdefg7h ÜÝ % ij klî mn6 .o Ê6 %pqrsÀtu %ã ävãw ä ôõx y y zw

­

TO MY INSTRUCTORS & MENTOR: With heartfelt gratitude, I acknowledge my instructors at AAU—Claudia Dallendoerfer, Jarrett Farls, David Hake, Sandra Isla, Nikki Kipple, John Nettleton, Frank Pietronigro, Mary Scott, and Hunter Wimmer (listed alphabetically). Each of you has given me invaluable guidance, sharing not only knowledge and skills but also a vision of how design can connect deeply with others and transcend function. Special thanks to my mentor, Aziza Shin from adMarketplace, whose mentorship has been a balance of professional wisdom and genuine friendship. Aziza, you’ve taught me not only the craft but also how to navigate the professional world with intention and integrity. From each of you, I have learned to strive for a design that is thoughtful, resonant, and purposeful.

INDIE(PERSONAL): ENDLESS GRATITUDE

¡¢£¤¥¦§ ¨© ª« ¬¬®¯ °± ²³ ´ µ¶· ¸ ¹º»¼½ ¾¿§À¢Á ÂÃ

TO MY LOYAL FRIENDS: Thank you for being an endless well of emotional richness. Your presence fills my life with memories and moments as vivid as they are treasured. In every circumstance, you offer unwavering trust, encouragement, and applause. Together we are a constellation, a universe of infinite dimensions that illuminates our shared journey.

'

4

TO MY BELOVED FAMILY: To my dear parents, my grandmother, my aunt: The Buddhist teaching of “interconnected emptiness” reminds me that being part of our family is the first blessing in my life made tangible. Thank you for your boundless love, your quiet strength, and for shaping me into someone capable of love and sensitivity. Your support has grounded me, and I am eternally grateful for the warmth and resilience you have given me.

01..02..03..04..05..06..07..08..09.. + 10

ûü

ÄÅÆÇÈÉÊ ËÌ Í¹ÎÏ ÐÑÒÓ ÔÕ Ö ¬× ØÙÚÛ ÜÝÞß

CATEGORY: ACKNOWLEDGMENT

àá ´ âã ä å´ âæç ã ä èéÀê ¦Ï ëìíî ïð Ê»ñ ¹Îòó ôõ Íö÷øùú ØÙ

TAKE: (---) >>

PAGE + 241

SELECT: 2024

TO ALL WHOSE LOVE, SUPPORT, AND GUIDANCE HAVE MADE THIS JOURNEY POSSIBLE.

REC HDV 720p24

SELECTED WORKS OF CHANG XU

COLOPHON// [CONTACT] >> Chang Xu changxdesign@gmail.Com +1 415-964-6063 [SCHOOL] >> Academy of Ar t University, School of Graphic Design 79 New Montgomery Street San Francisco, CA94105, USA [MAJOR] >> MA, Graphic Design&Digital Media MFA, Interaction & UI/UX Design [COURSE] >> MA Por tfolio Seminar (Instructor: Mary Scott) [BOOK TITLE] >> THE FINAL CUT [ T YPEFACE] >> PP Fragment Apercu IBM Plex Mono [BOOK DE TAILS] >> Printing and Binding: Blurb.com Paper: Mohawk Superfine Eggshell 100# Text

© 2024 All rights reserved. No par t of this publication can be reproduced without expressed permission from Chang Xu. PAGE + 242

PRODUCTION(PROJECT) ENDLESS GRATITUDE

−

01..02..03..04..05..06..07..08..09.. + 10

' INDIE(PERSONAL): ENDLESS GRATITUDE

CATEGORY: ACKNOWLEDGMENT

SELECT: 2024

PAGE + 243

cha ng x udesig n.com