Module D: 30/30 Pack
1 · Where the 30 points are
Task 1 · Interactive product · Measurement (5.0, yes/no)
Submission: Published on the platform and HTML package exported [0.5 pts]
Performance: First screen ≤3 s, total ≤200 MB, 16:9 [1.0 pts]
Core function 1: "Your Youth Cultural Genes" test module exists and works [0.5 pts]
Core function 2: Registration + personalised ticket/pass generation [0.5 pts]
Pass content: Pass shows gene/mascot mark + nickname + unique registration number [0.3 pts]
Core function 3: Share poster module [0.5 pts]
Share completeness: One-click share row to social platforms + "Invite friends" entry [0.2 pts]
Opening completeness: Logo animates → slogan fades in → six mascots enter in sequence → main interface. 5–8 s. Skip and Replay [0.3 pts]
Mascot navigation: Six mascots on the hub, tap → section card (name, highlights, direct link) [0.2 pts]
Dual platform: Works on offline touchscreen and mobile (big targets, no hover-only actions, QR on kiosk) [1.0 pts]
Task 1 · Interactive product · Judgement (12.0, graded 0–3)
Opening: occasion + brand tone: Done within the time window; logo and mascot entrances feel like an event; tone is young, trendy, energetic [1.0 pts]
Gene test: fun + occasion: Options visibly map to the six sections; result reveal is a ceremony (scan → flash → mascot entrance + sound); personalised description [1.5 pts]
Narrative + emotional curve: Opening → gene test → registration → pass → share with the genecarried all the way through (colour, mascot, name) [1.5 pts]
Mascot navigation + transitions: Mascots instantly recognisable; card shows highlights + link; seamless transitions, mascot used as transition element [1.5 pts]
Feedback + sound: Pressed / success / error states everywhere; matched SFX; gene reveal has a sense of occasion [1.0 pts]
Intuitive + smooth: Zero-learning, surprise moments (hold Easter eggs), no sticking points [1.5 pts]
Fault tolerance: Back on every page, Home, Retake test, Edit before submit, inline form errors, idle reset. No dead ends [1.5 pts]
Visual + brand consistency: Brand hex codes only, 5-level type system, section colours applied correctly [0.5 pts]
Animation rhythm: Eased motion (hand-spaced keyframes), consistent durations [0.5 pts]
Pass + share card design: Pass auto-takes the gene colour/mascot; share card is customisable(pick background/pose); full share row [1.5 pts]
Task 1 · Design Specification (5.5)
Word + PDF, A4: Two files, A4 [0.5 pts]
Interaction philosophy: Clear UX approach with "Cultural Gene" as the thread through every section [1.5 pts]
Interaction logic: Per-interaction rationale + three core flowcharts that match the text exactly [1.5 pts]
Brand core concept: Connection / Integration / Co-creation, core values, slogans, product value, org culture [1.0 pts]
Brand material alignment: Table: brand-doc clause → exactly where it appears in the work [1.0 pts]
Task 2 · Optimization Plan (7.5) best points-per-minute in the module
Word + PDF, A4, ≥200 words: 2.0 pts of pure admin. Aim for 600–700 words [2.0 pts]
Strengths + improvements: Specific, honest, each tied to a screen [1.5 pts]
Risks + difficulty: Table with impact, likelihood, difficulty, mitigation [1.5 pts]
Optimization plan quality: Measure → expected effect (with a number) → implementation path [1.5 pts]
Future outlook: Phased roadmap tied to the brand's 1M sign-ups / 1B impressions / 100K community goals [1.0 pts]
3 · Build blueprint
Canvas: 16:9 landscape (Beice 960×540 logical, PS at 1920×1080). The Task sheet says "Portrait aspect ratio 16:9", which contradicts itself. The requirements doc says "Support landscape mode" and the kiosk is landscape, so build landscape and confirm with the referee in the first 5 minutes.
Page map
P1: Page: Opening · Contents: Logo → slogan → 6 mascots → "Tap to start". Skip (top right, from 0 s) · Exits: Auto/Tap/Skip → P2
P2: Page: Hub · Contents: 6 mascots in an arc, each on a disc in its section colour. Main CTA "Decode my Cultural Gene" (orange). Secondary "Register now". Small icons: Replay opening ↻, Sound on/off · Exits: Mascot → card overlay · CTA → P3 · Register → P6
—: Page: Section card (overlay ×6) · Contents: Section name, mascot pose 2, 2 highlight lines, "Explore section" link, 1 quick true/false question (the Q&A the brief asks for), ✕ close · Exits: ✕ / tap dim area → hub
P3–P5: Page: Gene test Q1–Q3 · Contents: Question + 6 icon tiles in section colours, progress "1/3". Tap tile → pressed state + chime → next page · Exits: Back (←) · Home
P6r: Page: Result · Contents: 1.5 s "gene scan" → flash → mascot entrance + gene name + description. Buttons: "Get my festival pass" · "Retake" · Exits: → P6 · Retake → P3 · Home
P6: Page: Registration · Contents: Nickname, contact (phone/email), region (dropdown), interests (6 checkboxes, gene pre-ticked), intent (Shanghai / sub-venue / online). Consent tick. Kiosk: QR "Scan to register on your phone" · Exits: Submit (disabled until valid) · Back · Home
P7: Page: Pass · Contents: Ticket with gene colour band, mascot, gene name, nickname, WYCF27-ES-48213, dates, logo. Stamp animation + SFX. "Edit details" · "Make my share card" · Exits: Edit → P6 · → P8 · Home
P8: Page: Share card · Contents: 9:16 card on left (nickname, number, mascot, slogan). Right: choose background (3) and pose (2); share row (WeChat, Weibo, Douyin, Instagram, TikTok, X); "Save image"; "Invite friends" · Exits: Toast "Shared!" · Done → Hub
Global variables (declare first, then save)
p1 p2 p3: Type / default: number, 0 · Set by: Q1/Q2/Q3 tiles set 1–6 (1 ES, 2 ST, 3 AC, 4 MU, 5 AR, 6 LS)
gene: Type / default: number, 0 · Set by: Result page on-show logic
nick, contact, region, intent: Type / default: text, empty · Set by: Form fields
regno: Type / default: number · Set by: Timer-bound random range 10000–99999 (the method you found)
bg, pose: Type / default: number, 1 · Set by: Share card choices
snd: Type / default: number, 1 · Set by: Sound toggle
Gene logic: 2 steps, no counters. Store each answer, don't add scores. On the Result page on-show, in this order: 1. gene = p3 2. if p1 == p2 → gene = p1 3. then show the result group where gene == 1…6 (6 show conditions) Why it works: any majority wins (p1=p2, p1=p3 and p2=p3 all resolve correctly), and if all three differ the last answer breaks the tie. Because answers overwrite, Back is free: going back and picking again just replaces p2. Retake = set p1, p2, p3, gene to 0 → P3. If Beice can't compare variable to variable: use 6 rules "p1 = k AND p2 = k → gene = k" (k = 1…6) after step 1. Same result.
Gene test content
1 ES: Q1: The neon arena, front row · Q2: A glowing RGB controller · Q3 · A new friend says "show me your world." You…: Challenge them to a match
2 ST: Q1: The graffiti wall by the skate park · Q2: A rainbow spray can · Q3 · A new friend says "show me your world." You…: Teach them a street dance move
3 AC: Q1: The starlight cosplay stage · Q2: A holographic sailor badge · Q3 · A new friend says "show me your world." You…: Take them into your favourite virtual world
4 MU: Q1: The main stage, glow stick up · Q2: A signed microphone · Q3 · A new friend says "show me your world." You…: Sing them your song of the summer
5 AR: Q1: The digital art gallery · Q2: A paintbrush with a rainbow tip · Q3 · A new friend says "show me your world." You…: Design them a custom sticker
6 LS: Q1: A rooftop picnic at sunset · Q2: A skateboard and a coffee · Q3 · A new friend says "show me your world." You…: Take them on a sunrise ride
Spark Gene: Mascot: Zap · You play to win and you lift the whole team with you. When someone clutches it, you're the first one cheering.
Freestyle Gene: Mascot: Kai · Your style is your signature. You take the street's energy and make it your own, cool, confident and never a copy.
Dream Gene: Mascot: Ling · You see stories everywhere. Your imagination builds worlds other people want to live in, and your kindness makes them feel at home.
Echo Gene: Mascot: Muse · You feel the beat before you hear it. Music is how you connect, and when you share a song, a stranger becomes a friend.
Palette Gene: Mascot: Hue · You think in colour. Every blank space is a chance to create something nobody has seen before.
Sunrise Gene: Mascot: Panna · You turn everyday life into an adventure. Fresh air, good coffee, good people: you make the ordinary feel like a festival.
Section cards (hub overlays)
Digital Esports Culture: Global youth tournament · RGB arena, live data wall · Q&A: "Esports teams can have players from different countries." True
Trendy Street Culture: Live graffiti wall · street dance battles · skate jam · Q&A: "Graffiti started as street art before it reached galleries." True
Two-Dimensional & Virtual: Virtual idol stage · cosplay parade · pixel art lab · Q&A: "ACG stands for Anime, Comics and Games." True
Music & Performance: Open-mic stage · global young musicians · light show · Q&A: "A song can go viral without any lyrics." True
Digital Art & Design: Digital gallery · live 3D creation · designer talks · Q&A: "You need expensive tools to make digital art." False
Youth Lifestyle: Skate & bike trails · camping zone · wellness sessions · Q&A: "The festival runs across 9 venues worldwide." True (Shanghai + 8)
4 · Motion, feedback, sound, fault tolerance
Opening (target 6.0 s, inside 5–8 s)
0.0–1.2: Beat: Logo appears · Motion: Scale 70→100%, opacity 0→100. Keys at 0 / 40 / 70 / 100% time = 0 / 70 / 92 / 100% travel. Green glow pulse · Sound: Rising whoosh
1.2–2.4: Beat: Slogan · Motion: "World Youth · Creativity Knows No Borders" fades in word group by word group, 0.3 s apart · Sound: Soft chime
2.4–4.8: Beat: Six mascots · Motion: Each pops in 0.4 s apart on a colour disc (overshoot 100→108→100%), in order ES, ST, AC, MU, AR, LS · Sound: 6 rising notes
4.8–6.0: Beat: Settle · Motion: Mascots slide into hub arc positions; "Tap to start" pulses → auto-advance · Sound: BGM starts
Skip visible from 0 s, top right, 48+ logical px. Replay ↻ on hub. Build the hub positions first, then animate the opening into them, so the handoff is seamless (judges look for "seamless transitions").
Transitions
Standard page change: fade + 20 px slide, 0.4 s, everywhere. Consistency is what reads as "rhythm".
Into the result: colour wipe in the gene's section colour with the mascot running across (the brand guide says mascots can act as transition elements, so say that in the spec doc).
Pass: ticket slides up, "stamp" drops at 1.2 s with a thud SFX.
Feedback matrix (do this on the atom before duplicating)
Pressed (touch): Visual: Scale 95%, 10% darker, 0.1 s · Sound: Tap click
Selected tile: Visual: Section-colour glow ring + tick · Sound: Chime
Disabled: Visual: 40% opacity (Submit until valid) · Sound: —
Error: Visual: Field border Youth Pink + hint text under field, gentle shake · Sound: Soft buzz
Success: Visual: Green tick + toast "Registered!" / "Shared!" · Sound: Success jingle
Hold (Easter egg): Visual: Mascot swaps to 2nd pose + sparkle · Sound: Mascot-specific SFX
No hover-only actions: the kiosk and phones have no hover. Say in the spec doc that the "hover" state is replaced by a pressed state for touch.
Fault-tolerance audit (1.5 pts, needs "no dead ends")
Every page except the opening: Home icon (top left) + Back.
Gene test: Back re-answers without penalty; Retake on result.
Form: inline errors (empty nickname, bad contact), Submit disabled until valid, nickname max 12 characters.
Pass: Edit details returns to the form with fields kept.
Overlays: close by ✕ or tapping the dim area.
Kiosk idle: 60 s no touch → "Still there?" for 10 s → reset variables → opening. Stops the next visitor landing on someone else's pass (a privacy point, worth writing up).
Performance (≤3 s first screen)
The opening page loads only the logo, 6 mascot PNGs and a flat or CSS-colour background. Keep that page under ~1.5 MB.
Backgrounds as JPG ~80 quality; mascots as PNG with the canvas trimmed tight. Nothing over 1920 px wide.
Test: open the exported HTML package offline and time it; note the number for the Optimization Plan.
Visual system
Primary: Colour: Tech Blue #165DFF · Where: Headings accents, links, progress
CTA: Colour: Vitality Orange #FF7D00 · Where: All primary buttons (one per screen)
Ceremony: Colour: Creative Purple #722ED1 · Where: Gene scan, result glow, dark gradient base
Feedback: Colour: Natural Green / Youth Pink · Where: Success / error
Section: Colour: ES blue+purple · ST black+yellow · AC silver+light blue · MU pink+gold · AR rainbow · LS green+orange · Where: Mascot discs, tiles, pass band, share bg
Type levels (logical px at 960×540): L1 36 · L2 26 · L3 20 · Body 15 · Aux 12. Logo never stretched, clear space = height of the "W".
User emotional curve (put this as a line chart in the spec doc)
Emotion: Opening: Curiosity · Hub / explore: Discovery · Gene test: Play · Result reveal: Peak: "this is me" · Register: Commitment (small dip, kept short) · Pass: Pride · Share / invite: Belonging
Energy 1–5: Opening: 3 · Hub / explore: 3 · Gene test: 4 · Result reveal: 5 · Register: 3 · Pass: 4 · Share / invite: 5
6 · Design Specification: full draft
Retype this. Replace [brackets] with what you actually built. Layout: A4, heading font bold sans 18/14/12 pt, body 10.5 pt, 1.3 line spacing, section headings with a thin Tech Blue rule, one screenshot per section. File name as instructed (ORIGIN pattern: "Design Specification.docx / .pdf"). No name, no country.
▼ DOCUMENT DRAFT STARTS ▼
World Youth Culture Festival · Interactive Experience and Registration System · Design Specification
1. Design goal
The festival needs one experience that works in two places: a touchscreen at the venue and a phone at home. It has to introduce six cultural sections, get people to register, and make them want to share. I built the experience around one idea, the Cultural Gene: every young person carries a mix of culture inside them, and this product decodes it. The gene the user discovers becomes their festival pass and their share card, so the same thread runs from the first screen to the last.
2. Interaction design philosophy
Discover, then belong. Users meet the festival through play before they are asked for any personal data. People register more willingly once they have a reason, so the registration form comes after the moment of recognition ("this gene is me"), not before it.
One finger, zero learning. Every action is a single tap on a large target (at least 48 px). There are no hover-only actions, so the kiosk and the phone behave the same way.
The mascot is the guide. The six mascots are the navigation, the feedback and the reward. Tapping one opens its section; the result is revealed by a mascot entrance; the pass carries the user's mascot.
Nothing is final until the user says so. Every screen has Home and Back. Answers can be changed, the test can be retaken, and the pass has an Edit button.
Occasion at the peaks, speed everywhere else. Ceremony is saved for three moments (opening, gene reveal, pass stamp). All other transitions are 0.4 s so the flow never drags.
3. User journey and emotional curve
Opening (curiosity) → Hub and section cards (discovery) → Cultural Gene test (play) → Gene reveal (peak: recognition) → Registration (commitment, kept to one screen) → Pass (pride) → Share card and invite (belonging). [Insert emotional curve chart.] The only dip is the form, so it is short, pre-filled with the user's gene interest, and followed immediately by the pass reward.
4. Interaction logic
4.1 Opening. The logo scales in with a green glow (1.2 s), the slogan "World Youth · Creativity Knows No Borders" fades in (1.2 s), then the six mascots appear one by one on discs in their section colours (2.4 s) and slide into their places on the main screen. Total 6 s. Skip is available from the first frame and Replay is on the main screen, because a returning visitor at a kiosk should not have to wait.
4.2 Mascot navigation. The six mascots stand in an arc on the main screen. Tap opens a section card with the section name, two highlights, a direct link and one quick true/false question, so exploration is active rather than reading. Hold triggers an Easter egg: the mascot switches to its signature pose (Zap's fist pump, Ling's heart wink) with its own sound. Cards close with ✕ or by tapping outside.
4.3 Cultural Gene test. Three questions, each with six picture options. Each option belongs to one section, so the test is also a tour of the festival. Answers are stored per question; the result is the section chosen most often, and if all three answers differ, the last answer decides. Because answers are stored rather than added up, going Back and changing an answer never breaks the result. The reveal plays a 1.5 s "gene scan" in Creative Purple, a flash, and the mascot's entrance with the gene name and a personal description.
4.4 Registration and pass. One form: nickname, contact, region, interests (the user's gene is pre-ticked) and how they plan to take part. Errors show next to the field and Submit stays disabled until the form is valid. On submit, the system generates a unique number (WYCF27 + section code + five digits) and builds a pass in the gene's colours with the mascot, nickname and number. At the kiosk a QR code lets visitors register on their own phone instead of typing on a public screen.
4.5 Share and invite. The share card is portrait (9:16) because it is made for social feeds. Users choose a background and a mascot pose, then share in one tap (WeChat, Weibo, Douyin, Instagram, TikTok, X), save the image, or use "Invite friends".
4.6 Fault tolerance. Home and Back on every screen, Retake, Edit details, inline validation, and a 60-second idle reset at the kiosk that clears the previous visitor's data.
[Insert Flowchart 1: Opening → Hub → Sections. Flowchart 2: Cultural Gene test. Flowchart 3: Registration → Pass → Share.]
5. Motion and pacing
All entrances use an ease-out curve built by spacing keyframes (fast start, soft landing), which feels lively without being frantic. Standard page transitions are a 0.4 s fade and slide. The mascot is used as a transition element into the result, as the brand guide recommends. Each mascot has its own entrance that matches its section: Zap jumps in, Kai slides in and leans, Ling floats down with sparkles, Muse spins in on a note, Hue arrives with a brush stroke, Panna rolls in on her skateboard.
6. Visual style and material use
Tech Blue #165DFF is the main interface colour, Vitality Orange #FF7D00 is used only for the main action on each screen, and Creative Purple #722ED1 marks the ceremony moments. Natural Green and Youth Pink signal success and errors. Section colours follow the brand guide exactly (Esports blue and purple, Street black and yellow, Virtual silver and light blue, Music pink and gold, Art rainbow, Lifestyle green and orange) and appear on each mascot's disc, its answer tiles, and the pass. Type follows the brand's five levels (title levels 1–3, body, auxiliary). The official logo, mascot illustrations and decorative graphics are used unmodified, in Q-version proportions, with the logo's clear space kept.
7. How the brand's core concepts are embodied
Connection: The same experience on kiosk and phone; share and invite turn one visitor into a network
Integration: The gene is a mix: the test blends six cultures and the result shows which one leads in you
Co-creation: Users customise their own share card, so every share is something the user made
Core values: diversity, innovation, equal communication, open sharing: No gene is ranked above another; picture-led options reduce language barriers; open one-tap sharing
Slogans: Main slogan in the opening and on the pass; secondary slogan on the share card
Product value / organisational culture: Turns a registration form into a personal cultural identity, matching the organisers' aim of a global youth IP built with young people rather than for them
8. Alignment with brand materials
Req. 3.1: logo → slogan → six mascots → main screen, 5–8 s, skip and replay: Opening page, 6 s, Skip and Replay
Req. 3.2: click mascot for card; click or hold for Easter egg: Hub cards and hold poses
Req. 3.3: 1–2 games or Q&A per section: Quick Q&A on each card, plus the gene test
Req. 3.4: name, contact, location, interests, intent; unique number and souvenir; QR offline: Registration form, WYCF27 number, pass, kiosk QR
Req. 3.5: share poster with nickname, number, mascot; one-click share; invite: Share card page
Req. 4.2: click feedback, clear guidance, return/undo/restart: Feedback states, Home/Back, Retake, Edit
Brand 4.1: colour system and section colours: Interface roles and section colours as in section 6
Brand 5.2: mascot entrances and mascots as transitions: Opening entrances; mascot wipe into the result
Brand 6.4: cultural inclusivity, less reliance on text: Picture options, no gene ranked higher, [bilingual key labels]
Brand 1.3 and Req. 4.2: first screen ≤3 s: Opening page kept to [x] MB, loads in [x] s
9. Two-platform adaptation
Kiosk: large targets, QR registration, idle reset, sound on by default. Mobile: the same layout in 16:9 landscape, sound off until the user turns it on, and the share card saved straight to the phone. The core experience is identical, only the entry and exit differ.
▲ DOCUMENT DRAFT ENDS ▲
7 · Optimization Plan: full draft
~650 words. Fill the [brackets] with honest facts from your build: judges reward precise self-assessment. If you cut something on the day, it goes straight into "Areas for improvement". Add 2 screenshots.
▼ DOCUMENT DRAFT STARTS ▼
World Youth Culture Festival Interactive Experience · Optimization Plan
1. Strengths
One thread from start to finish. The Cultural Gene connects the test, the pass and the share card, so users leave with an identity, not just a registration.
Registration after reward. The form appears after the gene reveal, the emotional peak, which should lift completion compared with asking for data first.
No dead ends. Home, Back, Retake, Edit, inline validation and a kiosk idle reset mean a user can always recover.
Brand accuracy. Official colours, logo and mascots are used unmodified, and every section colour maps to the brand guide.
2. Areas for improvement
Language. [Only key labels are bilingual / the interface is English only.] The festival runs in Chinese and English across 9 venues.
Test depth. Three questions keep it fast, but the result is always a single gene. Showing a mix ("62% Spark, 38% Echo") would be more personal.
Sharing is simulated. The share buttons give feedback but do not yet connect to real platform APIs.
[Anything cut on the day, e.g. Easter eggs on only three mascots.]
3. Risks and implementation difficulty
Slow first load on weak mobile networks: Impact: High: users leave before the opening · Likelihood: Medium · Difficulty to fix: Low · Mitigation: Compress images further, load later pages in the background, keep the first screen under 1 MB
Duplicate or fake registrations: Impact: Medium · Likelihood: Medium · Difficulty to fix: Medium · Mitigation: Server-side number generation and SMS/email verification
Personal data left on a public kiosk: Impact: High: privacy · Likelihood: Low (idle reset) · Difficulty to fix: Low · Mitigation: Shorter reset at busy times; QR path to the user's own phone
Cultural misreading of options or gestures in some regions: Impact: Medium · Likelihood: Low · Difficulty to fix: Medium · Mitigation: Review by the 8 sub-venue teams before launch
Peak traffic at launch: Impact: High · Likelihood: Medium · Difficulty to fix: High · Mitigation: CDN hosting, load testing at 10× expected traffic
4. Optimization measures
Full Chinese/English switch on every screen, then the sub-venue languages: Expected effect: Reach international users; target +15% overseas completion · Implementation path: Text as variables, one language toggle on the hub, translation review
Gene mix result (top two sections with percentages): Expected effect: More personal result and more shares · Implementation path: Score all three answers, show top two on result, pass and card
Real share and invite links with referral tracking: Expected effect: Measurable viral spread toward the 1 billion impression goal · Implementation path: Platform SDKs, a unique invite code on each pass
Funnel analytics (opening → test → register → share): Expected effect: Find and fix the biggest drop-off · Implementation path: Event tracking on each button, weekly review in the first month
Performance pass: Expected effect: First screen under 2 s on 4G · Implementation path: WebP images, sprite sheets for mascot animation
5. Future outlook
Before the festival: launch the gene test as a stand-alone social campaign to build toward 1 million sign-ups, with a leaderboard of which gene is most common in each country. During the festival: the pass becomes the entry ticket; scanning it at section venues collects mascot stamps, turning the six sections into a real-world quest. After the festival: the gene profile becomes the user's membership in the year-round youth community (target 100,000 core members), where users post their own creations to their gene's space. This moves the product from a registration tool to the base of a lasting youth culture IP, which is the organisers' brand objective.
▲ DOCUMENT DRAFT ENDS ▲