In a private adult community, a vague state is a trust failure: members need to know who can see them, when access begins, what expires, and how to recover.
Enterprise software UX case study · 2026
VipKorner
VipKorner clarifies private social participation from invitations and access through media, messaging, and moderation.- Role
- Product Engineer · UX Lead · Frontend Architecture
- Product
- Private progressive web app for adults
- Read
- 2 minute scan · 14 minute deep read
The privacy contract, in 90 seconds.
Led lifecycle mapping, the responsive product system, and privacy controls across React, APIs, data, media, and release verification.
A production ready PWA with clear privacy rules, responsive task continuity, operating guidance, and automated regression coverage. Live adoption metrics are not yet available.
01 / Lifecycle01 02 03 04 05 06
Six transitions define the product.
VipKorner is a private social PWA for adults. The challenge was making a complex privacy system predictable as content, access, messaging, and moderation changed state.
Join
Can I enter safely?
Invite, server age check, email confirmationDiscover
Who is here?
Public summaries, location choice, profile access stateConnect
What does follow mean now?
Direct follow or pending request lifecycleShare
Who will see this moment?
Posts, carousels, Shorts, saves, reactionsConverse
Is this exchange available and private?
Text threads, blocks, unread stateGovern
What happens when something goes wrong?
Reports, suspension, explicit recovery
02 / Roles
Access changes with role and relationship.
Applicants, members, private profile owners, and administrators share the product but not the same permissions.
Applicant
Join with a valid invitation and understand why personal data is requested.
Access must feel selective without becoming opaque or invasive.Member
Discover people, publish moments, and manage a clear social boundary.
Visibility differs by profile, relationship, content type, and block state.Private profile owner
Remain discoverable while approving exactly who sees private media.
Discovery value and media privacy must coexist without accidental disclosure.Administrator
Issue invitations, review reports, and intervene without breaking member trust.
Operational authority needs boundaries, auditability, and predictable states.
03 / Risk field
The constraint map shaped the solution.
Invitation access
An invitation could be consumed before identity is confirmed or held indefinitely.
Reserve pending registration for 48 hours; claim the invitation only at confirmation.Adult community
Browser validation can be changed, while storing birth dates creates unnecessary risk.
Verify on the Worker and store eligibility instead of birth dates.Private profiles remain discoverable
Pending access could leak private content or connection lists.
Treat approval as a separate state; only a follows row unlocks media.Mixed photo and video
Partial uploads, invalid types, abandoned objects, and carousel inconsistency.
Multipart R2 upload with signature inspection, size limits, abort, cleanup, and ordered media rows.Out of scopeAlgorithmic ranking, public virality, live media messaging, and AI moderation decisions.
Journeys + systems14
Mobile task states16
Regression tests16
Role lenses6
04 / Evidence14 journey, sequence, data, and state diagrams 30 captured mobile and desktop interface states Auth, social, upload, story, messaging, moderation, D1, and R2 paths 210 selectors and 175 distinct className values
The system revealed what mattered.
No moderated study is being claimed. Lifecycle reconstruction, responsive audits, architecture review, and coverage analysis built the current evidence base; moderated research is next.
Lifecycle reconstruction
The product is a linked state system, not a collection of independent screens.
Organize both product logic and case study around lifecycle transitions.Responsive interface audit
Navigation and task context change shape across breakpoints, especially Messages.
Preserve task continuity while allowing layout composition to change.Architecture + API review
Trust language is only credible when the data query enforces the same promise.
Pair every privacy claim with a server eligibility rule.Design system coverage audit
Visual modernization could destabilize responsive geometry if appearance and layout moved together.
Separate tokens, layout, and reskin layers before changing the surface language.
05 / Strategy01 02 03 04
Four rules kept the system coherent.
Make access observable
Show whether a relationship is public, pending, approved, declined, canceled, or blocked.
Store less sensitive data
Verify eligibility at the edge and retain only what the product needs.
Preserve task, adapt composition
Mobile and desktop can rearrange, but the member must not lose context or control.
Design the failure path first
Uploads abort, requests cancel, reports resolve, and empty or offline states speak plainly.
Three consequential choices, unfolded.
Decision 01
Discovery without disclosure
How can a private profile be findable without granting access?
EvidenceMembers need enough identity context to recognize a person, while private media and connection lists must remain protected.
OptionsHide private profiles entirely · Expose the full profile with a private badge · Separate identity discovery from media permission
ChoiceReturn a public profile summary and aggregate counts, then gate posts and Shorts by ownership, public status, or an approved relationship.
TradeoffThe system carries a second request state and more UI copy, but avoids turning discovery into accidental consent.
ValidationPrivate profile request testing plus automated coverage for pending, approved, declined, and canceled states.
Decision 02
A media pipeline that can fail safely
How should one to ten media items reach storage without corrupting a post?
EvidenceImages may reach 10 MB, videos 50 MB, and a carousel can be abandoned midway on a mobile connection.
OptionsSingle request through the app server · Direct unverified object upload · Validated multipart upload with explicit completion
ChoiceInspect media metadata, create a multipart R2 upload, stream parts directly, complete into ordered post_media rows, and delete the object if persistence fails.
TradeoffMore orchestration and recovery states in exchange for bounded memory, progress, cancellation, and data integrity.
ValidationResponsive carousel testing, one to ten item limits, object cleanup, and upload cancellation handling.
Decision 03
Modernize the surface without breaking the product
How can a dense social interface change visual language without regressing proven behavior?
EvidenceThe app held 210 legacy selectors, 175 distinct className values, and unique navigation patterns at each breakpoint.
OptionsRewrite markup and CSS together · Replace tokens in the existing stylesheet · Separate geometry, tokens, and surface layers
ChoiceFreeze responsive geometry in a layout layer, map semantic tokens, then apply the visual layer against the same selector coverage.
TradeoffThe bridge layer adds temporary debt, but creates a reviewable migration instead of a risky rewrite.
Validation210/210 selector coverage, 175/175 className coverage, WCAG token review, and no horizontal overflow from 360 to 1920 px.
01 / 05
07 / Architecture24hShort lifecycle 1 to 10Media items per post 15sVisible state refresh interval 48hPending registration reservation 6 / 37 / 9Seed profiles / posts / active Shorts
Explicit state at the center.
One edge application coordinates React, authentication, product state, media objects, and release checks. Every privacy claim has a server eligibility rule.
01 / 10
08 / Validation
Verified, unknown, next.
Verified
✓ 16 automated repository regression tests across theme, terminology, privacy, messaging, carousels, stories, profiles, and media viewers.
✓ Private profile, messaging, Shorts, carousel, safety dialog, profile personalization, feed, and media viewer release tests.
✓ No horizontal overflow at 360, 390, 768, 960, 1024, 1440, and 1920 px in the cinematic marketing surface.
✓ Text and surface token pairs checked against WCAG AA. Active states do not rely on color alone.
Not yet measured
○ Live invitation completion rate
○ Time to approve or abandon a private profile request
○ First post and first conversation activation
○ 30 day member retention and report resolution confidence
Next plan
→ Five moderated sessions across roles covering invitation, private access, publishing, messaging, and reporting.
→ Measure state transitions, not just page views, with privacy preserving event names and no content payloads.
→ Set release thresholds for task completion, critical error rate, trust comprehension, and support escalation.
Impact without inflated claims.
Privacy contract
Pending follow requests never unlock media. Connection lists remain private to each member.
Release confidence
Sixteen automated regression tests plus focused release checks cover critical product states.
Responsive continuity
Navigation and Messages adapt across desktop, compact, and mobile layouts without dropping the active task.
Design system migration
210/210 selectors and 175/175 className values remained covered while layout and surface styling were separated.
User behavior
Adoption, retention, and trust comprehension require live analytics and moderated research.
Every artifact remains inspectable.
01 / 19
01 / 14
- 14 lifecycle, sequence, data, and state diagrams
- 16 mobile task captures
- 14 desktop/mobile UI review captures
- 10 production release shots
- 6 fictional persona evidence boards
- Marketing before and after captures with composer source media
- Architecture, operations, schema, API, design system, and seed documentation