FACTUAL ACTIVITY RECORD · An activity record based on work that took place
Aligning profiles and publication boundaries across four Home screens
Bringing Japanese and English desktop and mobile views into one display design
Purpose
Home already had Japanese desktop and mobile views, but profile-card heights differed by person and body copy overflowed the Stories & Records panel on mobile. English views were also needed, while English profile prose for nine people remained undefined and could not be filled through speculative translation.
The work therefore established a first-pass design that consistently showed the Hero, AI Talent, disclosure, profiles, locale state, and unverified destinations across four screens while preserving approved wording and photo references. The aim was to make both the visible choices and the held-back information clear before implementation, in the design and its handoff notes.
Implementation
Home was designed in Japanese and English at 1440px desktop and 390px mobile sizes. The information order remained Hero, Wiroh, AI Talent, current experiments, Stories & Records, Product, experiment principles, Transparency, and Footer. Multi-column desktop sections became single columns on mobile without changing reading order.
- The Japanese Hero used the approved two-beat headline, while the English Hero preserved its corresponding meaning and rhythm.
- Locale state showed Japanese selected and English available on Japanese screens, with the inverse on English screens, making the current view and alternative visible together.
- Calls to action without a confirmed destination were not links; a lock icon and unavailable label communicated their state.
Profiles separated the photo, display name, Role, and role value, with shared AI-persona and AI-generated-image disclosure before the first person image. Public wording did not fix a profile count, leaving the list able to represent whichever profiles were available. Only defined English prose was shown; the other nine profiles used an explicit pending state instead of invented public copy.
- All Japanese desktop profile cards were standardized to a 402px outer height, 220px image, and 182px body.
- English cards used 530px on desktop and 610px on mobile, retaining a shared structure that contained the longer pending state.
- Stories & Records headings and body copy on mobile used fixed-width wrapping, removing overflow beyond the panel.
The handoff mapped design tokens to CSS custom properties and recorded component structure, responsive behavior, interaction states, and accessibility conditions. Implementation checks included controls at least 44px square, a 3px focus indicator, state labels that did not rely on color alone, heading hierarchy, image alternatives, DOM reading order, and behavior at 200% text scaling.
All four screens were exported from the same saved design, with stable mappings among frame name, viewport width, and image. Layout checks ran for every screen, followed by visual inspection of the Hero, disclosure, every profile, Stories & Records, locale state, and unavailable destinations. Adding the evidence images did not change the underlying design, so the reviewed state and its evidence remained aligned.
The primary diff was checked line by line to confirm that the behavior described above matched the change at the cutoff.
Rendering diagram…
What was confirmed
Verification results
All four Japanese and English desktop and mobile screens returned No layout problems.; no clipping, collapse, overflow, or unexpected hidden content was detected.
The Hero, AI Talent, AI-persona and AI-generated-image disclosure, every profile card, Stories & Records, selected locale, and unavailable destinations were visible across the four screens.
Profile-card dimensions were consistent within each screen, and Stories & Records wrapped within its panel on Japanese mobile.
Undefined English profile prose and unverified destinations were not invented; pending and unavailable states preserved the publication boundary.
At the cutoff, the four-screen first-pass design, implementation handoff, and evidence images had been applied to the target. Browser keyboard use, 200% text scaling, screen readers, runtime contrast, locale and legal checks, site implementation, and publication remained unverified.
Basis for completion
This Activity's first-pass UI-design scope was complete when the saved four-screen design and implementation handoff were available and the same evidence images verified layout, visible content, card sizing, locale states, and boundaries for unconfirmed information on every screen.