Chapter 4 · Design analysis
Every page at seven aspect ratios
Signed-in member session recaptured by resizing Chromium: phone 360 and 390, phone landscape, tablet 3:4 and 4:3, desktop 1440 16:9 and 1920 FHD. Primary three widths are shown first; open “Other aspect ratios” for the remaining four. This is CSS-width evidence; the Device report uses real device agents (UA, DPR, touch).
Home
Job: Decide what to watch from trailers, new titles, and people I follow.
Signed in, trailer already playing (Harry Potter / HBO Max). After session settled, the right rail filled with real reviews (The Runner, Babita Singh Reporting) plus an honest recs empty card — earlier empty grey blocks were a loading/session miss, not a permanent empty design.
Other aspect ratios (4)
Improvements
Wait for session before painting the rail
Do not render two empty grey cards. Skeleton until recs/watchlist resolve, then either social cards or the TV-static empty copy.
Lead with the trailer
Filters + 40 language/platform chips steal the first screen on phone. Collapse Filters; keep preferred languages only.
Phone landscape (844×390) is a different product
Width 844 hits tablet CSS (≤960) with a 390px-tall viewport. Header + chips eat the trailer. Hide chips in landscape; make the player fill height.
Hide store FAB when signed in
It covers New Releases posters and the last social card.
New releases
Job: Scan titles that just landed and save a few.
Clicked three bookmark controls; My Watchlist went from 0 to 1 (Earle Meets World). Bookmarks work, but most clicks did not persist — hit targets are tiny and easy to miss.
Other aspect ratios (4)
Improvements
2-column posters on phone
3-col at 360/390 makes titles unreadable and bookmarks <44px.
Confirm save
Toast “Saved to watchlist” and fill the bookmark. Three clicks → one save is a trust leak.
Tablet 768: don’t use desktop 5–6 col
At 3:4, 2–3 columns with titles under art.
Trailers
Job: Skim latest trailers and play one.
Clicking a thumb applied a platform filter (?platforms=49) instead of opening a title. Header “Trailers” also steals in-page Trailers tab clicks.
Other aspect ratios (4)
Improvements
Thumb click = play or open title
Do not bind the first tap to a platform chip in the filter row.
Rename header vs page tabs
Header: Discover / Trailers. Page tabs: Latest / Coming soon. Same word in two places caused a mis-nav to /in/trailers/recent.
Phone landscape
2-col thumbs in 390px height show one half-row. Use a horizontal reel.
Trailers by release
Job: See trailers ordered by release date.
Visually identical to Recent except the underline — easy to think the tab did nothing.
Other aspect ratios (4)
Improvements
Change the H1 with the tab
“Trailers · coming soon” vs “Trailers · latest”.
Search
Job: Find a specific title.
Header search for “The Gentlemen” landed on /movies?q=The+Gentlemen with a populated 6-col grid (2019 film, 2024 series, League of Extraordinary Gentlemen…). Empty /movies is a dead page; search-with-query works.
Other aspect ratios (4)
Improvements
Empty /movies must not be blank
Autofocus the field. Empty q → popular. The header field already proves results work.
6 columns at 1440 is dense; 360 cannot do 6
Phone: 2 col. Tablet: 3. Desktop 16:9: 5. Label movie vs series on the card.
About
Job: Understand Nokio and start using it.
Not part of the signed-in loop. Still a navy-on-black island with no chrome.
Other aspect ratios (4)
Improvements
App chrome + contrast + CTA
White type, logo home, Sign in / Get the app.
FAQ
Job: Resolve how Circles and home actually work.
FAQ still describes friends’ watches on home. After login, home is still a public trailer catalog plus a thin social rail.
Other aspect ratios (4)
Improvements
Rewrite or rebuild
Don’t promise a friends feed the home page does not show.
Terms
Job: Read the agreement.
Legal route; FAB still covers clauses on phone.
Other aspect ratios (4)
Improvements
Hide FAB on legal pages
Or pad the article 80px from the bottom-right.
Privacy
Job: Understand data use.
Same template as Terms.
Other aspect ratios (4)
Improvements
Shared legal template
No FAB, no doodle, a maintained last-updated date.
Public profiles
Job: Find critics and follow them.
Clicked Follow three times. Following count went 1 → 4 (Dharunn, Sugil, Raunaq visible on My followings). Follow works.
Other aspect ratios (4)
Improvements
Fix 2-col minmax grid on phone
Names truncate; FAB covers the last avatar.
Follow → Following immediately
Optimistic label so the tap feels real.
Circles friends
Job: See friends and what they watched.
Still empty of friends; Featured public people still dominate the Friends tab.
Other aspect ratios (4)
Improvements
Hide Featured on Friends
CTA: Find people. Don’t contradict “No friends”.
Circles following
Job: See people I follow.
After follows, this should list the same 4 as My followings. Compare shots — if Featured still leads, the tab is the wrong surface.
Other aspect ratios (4)
Improvements
One list with My followings
Same data, same cards.
Circles followers
Job: See who follows me.
Tab exists; Friends/Following/Other chrome does not name it.
Other aspect ratios (4)
Improvements
Name Followers in the tab set
Friends | Following | Followers | Public.
Circles public
Job: Follow public profiles into my circle.
Featured row truncates names. Dual search (movies vs people).
Other aspect ratios (4)
Improvements
Two-line names; people-search is primary here
Circles other
Job: Find people who are not public critics.
Unclear vs Public. Featured still on top.
Other aspect ratios (4)
Improvements
One-line explanation + empty state
My watchlist
Job: See titles I saved.
After saving, desktop shows Earle Meets World with count “My Watchlist 1”. The loop works. Phone header still overlaps name/settings.
Other aspect ratios (4)
Improvements
Stack profile header under 960px
Avatar must not cover Profile Settings or tabs.
Add more / browse CTA even when count is 1
One poster on a huge doodle field looks abandoned.
My reviews
Job: See reviews I wrote.
Tried twice to submit a review of The Gentlemen. Text saved in the composer; Submit stayed disabled because the star rating never registered. My Reviews still 0. This is the worst job-failure in the session.
Other aspect ratios (4)
Improvements
Stars must work on click, not hover-then-click
RateInput only commits if pointermove set hoverValue. A click on a star with no prior move leaves rating 0. Use click position on the star SVG (one svg, five paths) or buttons per star.
Don’t grey “Submit Review” into looking disabled AND actually disable it with no explanation
Inline: “Tap a star to enable submit”.
First-person empty copy
“You haven’t reviewed anything yet” + Search a title.
My recommendations
Job: See recs I sent or received.
Still “No Recommendations!” with no sent/received split.
Other aspect ratios (4)
Improvements
Received | Sent sub-tabs + how to send
My friends
Job: Manage friends.
Empty; Circles Friends is the same job.
Other aspect ratios (4)
Improvements
Deep-link Find friends to Circles search
My followings
Job: See who I follow.
Now populated: Dharunn Sakthivel, Sugil SG, Raunaq… Following 4. This is the success state to copy onto Circles → Following.
Other aspect ratios (4)
Improvements
Same phone header stack as Watchlist
Following button 44px.
Edit profile
Job: Update name and photo.
Desktop form; phone still sidebar-first.
Other aspect ratios (4)
Improvements
Phone: form first, sections in a menu
Edit platforms
Job: Set streaming services I use.
Opened subscribed platforms (Theatre, Netflix, Prime…). Home still showed a long public platform strip rather than this set.
Other aspect ratios (4)
Improvements
Grid first on phone
Caption: these filter Home and New releases — and they must.
Home chips = this preference set
Not 40 services.
Edit languages
Job: Set preferred languages.
Home already showed English + Tamil after login — this is the source of truth.
Other aspect ratios (4)
Improvements
Form first on phone; caption that Home uses this
Movie reviews
Job: Decide whether to watch, and write a review.
Composer is visible on desktop (best screen in the product). Typed a full review. Could not submit without a rating, and could not set a rating. All (6) reviews from others rendered in a grid. Friends (0) / Following (0) even after following 4 people — following reviews did not appear.
Other aspect ratios (4)
Improvements
Fix RateInput click
See My reviews.
Phone: composer in the fold
Hero + synopsis currently push it down.
Following (0) after follows is a lie
Either fetch following reviews or explain “none of the people you follow reviewed this”.
Movie trailers
Job: Play a trailer for this title.
Opened Earle Meets World /trailers?trailerId=2096932 — Netflix official trailer selected (blue border) with a large still. Gentlemen /trailers had 0 YouTube iframes in the automation pass (player may be a still, not an embed). Header Trailers link intercepted an in-page Trailers click.
Other aspect ratios (4)
Improvements
In-page Trailers tab must not be the header link
More specific selector / nested tab.
Autoplay muted or a real play control
A still with a blue border is not watching.
Festival
Job: Browse an awards slate and save titles.
Opened National Awards 2026 slate.
Other aspect ratios (4)
Improvements
2-col posters on phone; fade on award scroller
Festival panel
Job: Watch a festival panel.
Empty coming-soon.
Other aspect ratios (4)
Improvements
Coming-soon card with festival name + notify
Public profile
Job: Evaluate a critic and follow them.
Follow from the grid then opened /public-profile/22582. Signed-in public profile had been empty in the previous pass — confirm this capture shows a grid.
Other aspect ratios (4)
Improvements
Never empty-doodle a public profile
Fall back to public payload.
Reset password
Job: Set a new password.
Auth utility; not used in the session.
Other aspect ratios (4)
