Chapter 4

Design analysis

Production UX on nokioapp.com, not Figma. Scores are for the job a visitor can finish on that screen — not visual polish alone. Phone layouts are cramped but mostly intentional. The broken range is tablet. Signing in unlocks profile chrome and a write-review composer; it does not deliver the social home the FAQ describes.

Playwright Chromium · https://nokioapp.com · 4 September 2026 · signed-out 24 routes × 2 viewports · signed-in 22 routes × 2 viewports · 175 loads across 5 widths · 7 device-agent profiles · 203 device shots, 0 load errors. Credentials are not stored in this report.

Screenshot galleries

Every capture from the production audit is linked here. This page keeps the scores, breakpoint analysis, and a session preview. Zip the report folder so the shots/ directory travels with the HTML.

Used as a member — session filmstrip

Desktop 1440×900 while actually using the product: trailers, watchlist, search, follow, review composer, profile. Watchlist went 0 → 1. Following went 1 → 4. Review submit stayed disabled.

All 33 frames, with the action log, are on Member session.

Cross-cutting UX findings

• Persistent store FAB covers posters, FAQ, and legal text on phone. Hide it when signed in; put Get the App in the menu.
• Bookmark everywhere, watchlist nowhere for guests — saving is offered on every thumb; /my-profile/my-watchlist is blank until login, with no sign-in prompt on the empty shell.
• Search is hidden — header icon on phone; the Search page itself has no field and no results unless a query is already in the URL.
• Sign In vanishes on phone — main nav (New, Trailers, Circles, Awards) and Sign In hide when isMobile. Guests must hit a gated action to authenticate. There is no bottom nav equivalent.
• About us is a dead end — one sentence on black, navy-on-black contrast, no header, no links, no CTA (score 1.0).
• Followers / following for a public profile rendered an empty patterned shell — no list, no empty state (score 1.0 signed-out).

Signed-out page scores

Scale: 1 = broken promise, 5 = job done without friction. Discovery and movie pages are usable catalogs. Social and account pages break the product story.

What signing in actually changes

• Unlocks: My Profile (watchlist / reviews / recs / friends / following), Edit profile / platforms / languages, write-review composer, Friends/Following filters on movie reviews, header avatar.
• Does not unlock: a friends feed on Home, working empty-state for recs (empty/clipped cards until session settles), Search page results without a query, a populated Circles friends list when the user has no friends.
• Gets worse on phone: my-profile header — avatar covers name and Profile Settings; some settings pages show the sidebar instead of the form (SidePanel min-width 320px, height 740px, no mobile stack).

Responsive: JS and CSS disagree on every breakpoint

Header, search, and several page layouts branch in useBreakpoints (pixel comparisons, no media query). CSS uses @custom-media in globals.css. Until useEffect runs, width defaults to DEFAULT_WIDTH = 1600, so the first paint on a phone is the desktop header.

Tap targets below 24px

Where overflow lives

Document scrollWidth never exceeded the viewport — pages set overflow hidden (home uses 100vw). Content is clipped instead of causing a page scroll.

Page-by-page layout

Discovery

Home CSS stacks the 2/3 + 1/3 columns only under 640px. At 768 and 1024 the trailer carousel is undersized next to a full-height recommendations column. Platform and language chips clip with no fade. New releases at 375 uses a 3-column poster grid — stamps, unreadable titles, bookmark icons on tiny art, filter FAB plus store FAB on the right edge. Movies search at 375 showed sort pills over an empty patterned body.

Movie

At 375 the hero truncates title, year/language, and genres. JustWatch “POWERED BY” is 0.52rem (8.3px). CreateReview YouTube field is min-width 25rem (400px) inside the mobile breakpoint. Recommend ContactList stays mounted off-canvas with min-width 350px. Best page in the product once signed in (score 4.0) — the composer works if the star rating registers.

Social

Public profile grid overflows 375 by 96px and gets clipped. Names ellipsize. Store FAB covers the bottom-right avatar. At 768 the public-profile header never stacks (690px min-width only yields at 480). Circles featured names truncate. Followers/following routes for a public profile were empty shells.

Marketing and legal

About us: full-viewport black, one sentence, 0 anchors, failing contrast. FAQ questions are the right ones; copy does not match signed-out (or signed-in) home; store FAB overlaps body; no accordion. Privacy effective date 23 Dec 2020 looks stale. Reset password close X is a sub-24px target; a mobile keyboard will cover the vertically centered submit.

Device agents — not resized desktop

Every route loaded with a real device descriptor: iPhone 14 Safari, Pixel 7 Chrome, iPad Pro 11 Safari, Galaxy Tab S9 Chrome, those devices in landscape, Desktop Chrome as control. That sets user agent, touch, DPR, and CSS viewport together.

Phone landscape (844×390) is a different product: width 844 hits tablet CSS (≤960) with a 390px-tall viewport. Header + chips eat the trailer.

Interaction bugs found while using the product

Responsive fix order