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.- Product / domain
- Private progressive web app for adults
- Role + dates
- Product Engineer · UX Lead · Frontend Architecture · 2026
- Confidentiality
- Public production architecture with fictional seeded community identities and generated media.
- Reading time
- 2 minute scan · 14 minute deep read
One page snapshot
What a hiring manager should know in two minutes.
Invited applicants, members with public or private profiles, creators, conversation participants, and administrators.
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.
I treated every sensitive moment as a product contract. Private profiles remain discoverable without exposing media. Access starts only after approval. The server verifies age without storing birth dates. Every key flow includes a recovery path.
Enterprise context, stakes, problem
Private social software fails when state is unclear.
Context
VipKorner coordinates invitation eligibility, identity, visibility, content access, media, Shorts, conversations, reports, and administration in one PWA.
Criticality
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.
Opportunity
How might we keep the community expressive while making every access and safety boundary clear?
Assumption
Members will accept selective access when each state explains what is happening and what comes next.
Role, ownership, team
I connected product, interface, and implementation.
Lifecycle framing, interaction states, responsive systems, frontend direction, API and data review, quality evidence, and release documentation.
Making privacy promises enforceable in both the interface and data query.
Product strategy, UX, React, authentication, APIs, relational data, media storage, and release operations.
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.
Lifecycle, ecosystem, workarounds
The product lives between roles and states.
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 recoveryEcosystem
React and Vinext on Cloudflare Workers · Supabase Auth · D1 product state · R2 media storage · confirmation email · installable PWA.
Workarounds eliminated
Browser age checks, pending access treated as permission, large uploads through app memory, hidden failures, and layout rewrites disguised as visual updates.
01 / 05
Constraints + risk register
Constraints guided the design.
ConstraintProduct effectFailure riskResponse
Invitation access
Every registration must coordinate invitation validity, username reservation, and email confirmation.
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
Age eligibility is required at entry.
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
Identity summary and media visibility follow different permissions.
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
Large media must cross an edge runtime without blocking the application.
Partial uploads, invalid types, abandoned objects, and carousel inconsistency.
Multipart R2 upload with signature inspection, size limits, abort, cleanup, and ordered media rows.Discovery, research, synthesis
Evidence came from the whole operating product.
Lifecycle reconstruction
FindingThe product is a linked state system, not a collection of independent screens.
DecisionOrganize both product logic and case study around lifecycle transitions.
Responsive interface audit
FindingNavigation and task context change shape across breakpoints, especially Messages.
DecisionPreserve task continuity while allowing layout composition to change.
Architecture + API review
FindingTrust language is only credible when the data query enforces the same promise.
DecisionPair every privacy claim with a server eligibility rule.
Design system coverage audit
FindingVisual modernization could destabilize responsive geometry if appearance and layout moved together.
DecisionSeparate tokens, layout, and reskin layers before changing the surface language.
Journeys + systems14
Mobile task states16
Regression tests16
Role lenses6
Principles, strategy, information architecture
Evidence became four operating rules.
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.
Strategy statementImprove trust comprehension by exposing relationship and content states at the point of action, while protecting discoverability and member agency, because architecture evidence shows that hidden transitions carry the greatest risk.
Decision stories + tradeoffs
Three consequential choices, shown with alternatives.
How can a private profile be findable without granting access?
Discovery without disclosure
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
DecisionReturn 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.
How should one to ten media items reach storage without corrupting a post?
A media pipeline that can fail safely
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
DecisionInspect 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.
How can a dense social interface change visual language without regressing proven behavior?
Modernize the surface without breaking the product
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
DecisionFreeze 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.
Validation, delivery, rollout
Build evidence is explicit; behavior evidence is 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 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
Research 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.
01 / 19
Outcomes, reflection, roadmap
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.
The hardest design work lived between screens: identity confirmation, access transitions, upload recovery, and the moment a block changes what remains visible.
A privacy promise is only copy until the server query makes it true. Connecting interface language to data eligibility was the most valuable product engineering contribution.
I would add moderated research across roles earlier. The system is testable and consistent, but implementation evidence cannot replace observed behavior.
Evidence inventory + domain rules
A reviewable trail, not a gallery dump.
E0114 lifecycle, sequence, data, and state diagramsPublic / fictional identities
E0216 mobile task capturesPublic / fictional identities
E0314 desktop/mobile UI review capturesPublic / fictional identities
E0410 production release shotsPublic / fictional identities
E056 fictional persona evidence boardsPublic / fictional identities
E06Marketing before and after captures with composer source mediaPublic / fictional identities
E07Architecture, operations, schema, API, design system, and seed documentationPublic / fictional identities
01 / 08
A single use entry credential claimed only after email confirmation.
A request state, not permission. Media remains gated.
An expiring media object with a 24 hour visible lifecycle.
A safety relationship that changes discovery, conversation, and visibility.