person — social media

TennisAtom

An AI film crew turns an amateur player's clip into a film they'd dare to post.

Year: 2026, May to June
Role: Design lead: project framework, research, interaction design, design system, prototypes; vision pipeline co-built with one teammate
Team: Me and two teammates.
Institution: Information Visualization 2026, College of Design and Innovation, Tongji University · for Orange Lion Sports, Alibaba's sports company, the client
Status: Best Creation Award, Information Visualization 2026 · given by Alibaba and the Qualia Intelligence & Innovation Lab (Q LAB), Tongji University

01Threshold

Where do recording and sharing break down for amateur players?

Background

1Where it came from

Orange Lion Sports, Alibaba’s sports company, wanted to use the venue’s existing vision algorithms to make post-match highlights for amateur tennis players automatically.

2Our first idea: a one-tap film for social media

We had a pipeline that reads a player’s body from video, and a plan to turn any clip into a film for social media in one tap. Before building it, I asked four players what actually happens to their footage.

User research

P01–P04 semi-structured interviews, 3 June → open codes → 3 themes thematic analysis (Braun & Clarke, 2006)

P01–P04 → six stages → 3 breaks critical incidents (Flanagan, 1954)

venue talk → records: speed, in/out, the longest rally

Where the four players’ footage went

Interviewer: me with each of the four, at the partner venue, 3 June 2026.

P04 · expression type

Vivian

sports creator · names changed

“If you play badly, you really do get flamed.”

P01 · record type

Lao Chen

judges a day by the result · names changed

“Mostly I just watch it myself. I rarely share it, because honestly, we all look terrible.”

P02 · review type

Lin Xi

improver, takes lessons · names changed

“I don’t have what it takes yet to make tennis my content niche.”

P03 · growth type

Xiao Yang

student · names changed

“I didn’t post it. I hadn’t made a video I was happy enough with yet.”

3 of 4

players had footage they chose not to post.

the dare-to-share threshold

Public feed

posts some, keeps the rest to watch

Break 03 · feedback gap no resonance, or fear of criticism

WeChat Moments

shown to friends, rarely

Xiaohongshu

posted, then taken down

Break 02 · no narrative language the core design opportunity

Camera roll

kept it

Break 01 · expectation gap recorded, opened, disappointed

Venue stakeholder · no photo

Hawk-Eye measured speed and in/out well. Highlights: the longest rally or the fastest ball.

Theme 1

No personal visual language

open code: footage and posts all look alike

P01You’re only filming on a phone, so your camera angles are limited.
P03says creators’ tracking shots look better, and as a viewer would rather watch those

Theme 2

The tool takes away authorship

open code: auto-tools take over the story

P01The auto-highlights get the rallies wrong, so I fix them by hand. Then I’d rather edit the whole thing myself.
P02edits by hand, by choice

Theme 3

Emotional narrative over data narrative

open code: identity claims, not skill claims

P03It isn’t really about skill. I think it’s more about a kind of quality.
P02I’d want people to see someone who really keeps at it, even though I play badly.
P04Personally, it isn’t about how good I am. What I do is outfits and photos.
cf. iBall, CHI 2023: feeling before reading

where their footage went
the theme their words support
the three who kept footage back

Insight

Filmed, but never posted

A phone with the footage as filmed — the footage they have

the gap

A phone with the finished film — a film they’d be proud to post

Three of the four players we interviewed had filmed their play but never posted it. How to get across the gap between saving the footage and wanting to share it is the core of this project.

Concept

1Design lens

Record

How well did I play?

for the analyst, the spectator

Trophy

How impressive do I look?

for the content consumer

Portrait

Who is this, playing?

for the player themselves

The venue’s system made records, and our own first idea, a one-tap blockbuster, made trophies. The players wanted to be seen as themselves.

2The portrait of the body: keep the player’s real movement and body data

AI does the editing and the visual packaging, but the rhythm of the swing and the way the player moves all come from their real motion data. The system only heightens what is already there in their tennis; it changes nothing and replaces nothing.

What a portrait is made of

33 points on the body in every frame, smoothed over five
14 kinds of event such as swing start, swing end, impact and jump, and the shot: serve, forehand, backhand or volley
Effects timed to those events by an ADSR envelope

A skeleton at the finish of a forehand, mid-hop — Pose read from our practice footage by the pipeline’s own model; an image model drew the bones over it. “Let the data be more than the body’s report card. Let it be a portrait of the body.”

02Journey

Vivian’s session: the low point is deciding whether to post

We set out to make a one-tap film for social media. The interviews turned the aim into something you’d dare to post.

User journey

AS-IS · Vivian’s session, scored 0–10 by the team from the interviews TO-BE · the same session with our prototype; testers rated each step aloudthe gap: what the design had to close

01
Set out to play

↑7 anticipation
Heads to court hoping to keep something from today.

after the game

The home screen goes straight to the fear of posting: “However ordinary your play, it deserves a good-looking video. No need to edit, no need to dare to post: make it first.”
- S1 too shy to post publicly · P01 P02 P03 → copy about daring to post
home
02
Highlight moment

↑9 excitement
One shot feels special: the high point.

↑8 the moment, found

Pick a style (“athletic character” by default), then upload and choose “this film” or “my progress montage”. The style reaches the film only in the stand build.
- S4 wants to see progress, and a report · P02 → “this film / my progress”
- S5 wants to show a quality, not skill · P03 P02 → the athletic-character style, as default
upload
style
03
Review footage

↓4 letdown
Flicks through the auto-highlights. It all feels flat.

Break 01 · expectation gap

↑8 a narrative style, picked

Six crew members review the clip in a group chat, in the pipeline’s order: pose, then ball and events. The Talent Scout asks which moments to keep.
- S2 auto-highlights: slow, and still wrong · P01 P02 → a one-tap fix on any claim with data
“Wrong data? Fix it”
@you, 1 of 2
04
Try editing

↓3 confusion
Tries a template, deletes it, can’t find the feel.

↑9 effects, generated

Writer, VFX and Editor then work in parallel. The crew asks once more, about the tone. You can skip either question.
- No interview signal: the crew came in v2, to show the work a progress bar hid.
@you, 2 of 2
05
Give up or settle

↓2 frustration
Posts something half-hearted, or nothing.

Break 02 · no narrative language the core design opportunity

↑9 sent out rated aloud; nobody posted for real

Three exits, archive first. Going public is up to you.
- S1 too shy to post publicly · P01 P02 P03 → three exits, archive first
06
After posting

↓3 disappointment
Few reactions. Nothing much happens.

Break 03 · feedback gap

↑10 resonance rated aloud; nobody posted for real

A report in three parts: highlights, what to fix, what to practise next. The coach says which answers come from your match and which are general.
- S4 wants to see progress, and a report · P02 → a report in three parts
- S5 wants to show a quality, not skill · P03 P02 → a cover about keeping at it
report
coach

Design opportunity

How might we help amateur players who can’t edit and fear being judged dare to post a clip of their tennis that lives up to what they hoped for?

Break 01 · expectation gap

1The AI finds the moments, you choose

Why Theme 1 · No personal visual language
P01“You’re only filming on a phone, so your camera angles are limited.”

TO-BE ↑8 the moment, found
The Talent Scout marks the highlight rallies itself and says it may have some wrong. You can take the starred clips as they are, or mark the key rallies yourself.
Break 02 · no narrative language

2Preset visual styles, skippable at any time

Why Theme 2 · The tool takes away authorship
P02“The auto-edit is out in a minute, but it isn’t accurate. Cutting it myself takes thirty or forty minutes.”

TO-BE ↑8 a narrative style, picked
“Athletic character” is the default style. Twice while the film is made, you are asked to confirm the shots and the copy; if you’d rather not, skip both in one tap.
Break 03 · feedback gap

3Less pressure to go public: keep it private by default

Why Fear of criticism on social media
P04“If you play badly, you really do get flamed.”

TO-BE ↑9 sent out
Keeping it is the main action; sending it to friends and posting in public are second choices. That fits how amateur players really share.

03System

Open the pipeline to the user

Vision models can’t be 100% accurate, so we broke the black box into steps where a player can check and correct it. Each crew member stands for one stage of the pipeline, in the order it runs. That is where TennisAtom gets its name: an AI director puts the atoms together into a film.

System design

1Roles: two groups of three agents, and three ways for you to step in

Reading the body puts out pose, ball and event data, with what each reading rests on, for you to check

Skeleton tracks 33 points on the body to rebuild the swing and the footwork
Ball Scout follows the ball’s flight and works out its speed and where it lands
Talent Scout finds key events such as serves and winners, and makes a first pick of highlights

Making the film works on the script, effects and render in parallel; you set the overall look

Writer writes the shot script, with captions and hashtags to match, such as #tennis #keepplaying
VFX adds freeze frames, ghost trails and other effects on key frames, in the style you chose
Editor puts picture, effects, captions and sound together, and exports the film and a data report

You three ways to step in

Fix the data a wrong ball speed or rally can be corrected by hand
Steer the choices pick the highlights and the tone of the copy, or take the defaults
Choose where it goes three ways to keep or share it; the archive on your phone comes first

2How one film is made

Pose
MediaPipe Pose: 33 points a frame, 5-frame smoothing
Skeletonruns
Ball
TrackNetV2: detection, trajectory and bounces
speeds not usable: one export tops out at 11,673 km/h; nothing measures spin
Ball Scoutpartly
Events
A 14-type event detector, swing start to shot type
highlight ranking has no scoring yet
Talent Scoutpartly
Effects
Freeze frame, ghost trail, four more; ADSR timing
VFXruns
Render
OpenCV and Remotion
the video composer and publishing are stubs
Editorpartly
Adapters
Video: MiniMax, HappyHorse · report: Seede · copy: MiMo
Writerin the repo

One state machine runs every film in the same order: read the video, assemble the prompts (YAML templates filled with the match data), generate in parallel, then composite. The order in which the agents speak in the chat follows the pipeline’s real data dependencies.

External generators sit behind adapters: changing the model underneath means swapping one adapter, not the main pipeline. Python 3.11 · Pydantic · FastAPI · asyncio

The chat is scripted in the pipeline’s order. Its demo numbers are covered on every screen here.

Events → effects

How a swing sets the timing, from the pipeline’s effect director.

swing peak → comic speed lines
fast attack, slow decay: a comic burst
high speed + displacement → pixel ghost trail
sustained, following the speed
swing start → outline particles
always on low, bursting at the start of a swing

04Outcome

Ten prototypes: how I worked out where the person steps in and where the AI takes over

Iteration

v1: One progress bar: a black box makes the film — v1 One progress bar: a black box makes the film

v2: The pipeline taken apart, shown as a group chat of AI agents at work — v2 The pipeline taken apart, shown as a group chat of AI agents at work

v3: Changed after the interviews: six points where you step in, such as fixing data, picking highlights and a private archive — v3 Changed after the interviews: six points where you step in, such as fixing data, picking highlights and a private archive

stand build: Changed after the tests: one focus per screen, and the style wired through to the render — **stand build** Changed after the tests: one focus per screen, and the style wired through to the render

Turn 3: two tests, three changes

A · cognitive walkthrough
12 peers, classmates and teammates, in four groups; each group walked through as one persona. Twice: 24 sessions.
B · usability test
12 amateur players used the hi-fi prototype and thought aloud.

“Find every point where the interaction feels off, not prove the design is right.” From our test plan. We logged breakdown points, mis-taps, how long tasks took, and frustration.

Buttons of equal weight, too many of them: people hesitated
→ one main action per screen, on a single orange button
In every earlier prototype, the style you picked barely showed in the film
→ rebuilt so the choice reaches the render; otherwise the tool takes the story again, as in theme 2
Coach advice was generic: “nice shot, smooth out the follow-through”
→ each answer tagged “based on your match” or “general advice”

We didn’t record which test found which. Neither test was controlled, and no tester used their own footage or had to decide whether to post.

Final review, June 2026: me presenting the three problems the tests exposed.

Results

1Five films, all played at the stand

01 athletic character 0:32
02 hot-blooded 0:45
03 cinematic 1:33
04 home screen 1:00
05 playful 0:48

Film 01’s player, and the same frame read by our pose model — Film 01’s player, read by our pose model.

4fewer steps to a finished film, by the team’s count

The five finished films, mostly straight out of the pipeline; the stand played all five.

2Shown · a public exhibition

01 Connecting Lines
Four questions, left or right at each pin, lead a visitor to the persona closest to them.
02 Digital Twin
The build on a tablet. Its last screen hands it to the next person.
03 Physical Layer
The players’ words on cards, held in sawn wood rounds.

The parts: wooden figures, wood rounds, the printed path

Setting up 01 Connecting Lines: wire and pins

The stand; its film was subtitled with the three exits

Visitors at the journey board, faces blurred

Value

1Alibaba: an award, and a team taking it on

Alibaba and Q LAB, Tongji University, gave the project the Best Creation Award, and Alibaba handed the related product to Orange Lion Sports, its sports company, to develop further.

Best Creation Award
Information Visualization 2026 · Alibaba × Q LAB, Tongji University

2Three of the players, after using it

Vivian P04 · expression type
Before posted some on public feeds
After posted quite a few videos with style and effects; their social media grew richer
Lao Chen P01 · record type
Before shared on WeChat Moments now and then
After began to send finished films to tennis friends, but still isn’t keen to post on the open web
Lin Xi P02 · review type
Before posted on Xiaohongshu, then took it down
After found the simple scripts and edits handy; it saved much of the time spent working out how to post

Before: where their footage went, in act 01. After: phone calls once the project’s full output was done, in our words.

Reflection

At first we set out to make a tool that turns out flashy highlights in one tap. The interviews turned that around: amateur players don’t need a filter that shows off for them; they want control over what goes into the film.

The tests bore this out. Every choice a player ticks has to really change the render underneath; interaction that stays on the surface only weakens their trust.

In the follow-up calls, Lao Chen had started sending films to tennis friends but still kept them off public platforms. It made us see that the wish to share comes in degrees of privacy, from reviewing alone to a circle of people you know to public social media, and that a tool should respect where each person draws that line.

Next step · Sept 2026

After the project, a redesign answers break 03: light interactions and positive feedback within a circle of fellow players. It also gives TennisAtom its mark, an atom; the three exits are its states.

archive
friends
public

References

Sporthesia TVCG 2022 · an emotional cue can be placed in the video like an object
iBall CHI 2023 · amateurs feel their footage before they read it
SportsBuddy arXiv 2025 · several AI roles, object by object, for basketball; we found nothing like it for tennis
Braun & Clarke 2006 · thematic analysis
Flanagan 1954 · critical incidents

What this record can't say

The ball tracker's speeds were not usable, and nothing in the pipeline measures spin.
The numbers in the crew chat are scripted.
The composer, publishing and highlight ranking are unfinished.
Neither evaluation track was a controlled study, and no tester used their own footage or had to decide whether to post.
The four personas are composites synthesised from the interviews, not an empirical typology.
The September 2026 redesign was made after the project. Nobody tested it and it was not exhibited.

AI use

Parts of the code, the vision pipeline among them, were written with AI coding assistants, and AI assisted the data analysis. The five films were rendered with generative video tools, and the drawings on this page were made with an image model.

Details

Title: The Portrait of the Body. TennisAtom is the app the team built.
Medium: An app concept with an AI film crew · a computer-vision pipeline · a public exhibition
Skills: User research · interaction design · design system · prototyping · computer vision
Tools: Figma, Photoshop, Illustrator · HTML prototypes · MediaPipe Pose, TrackNetV2, OpenCV, Remotion, Python

Exhibition photographs with venue marks and visitors' faces blurred. The prototype's scripted numbers are covered on every screen. The drawings were made for the portfolio with an image model; the atom mark and its states are the project's own.