Hip Awareness — Interactive Station

Overview

Zimmer Biomet — Hip Awareness Interactive Station is a Unity experience designed to present a curated selection of posts, testimonials, and articles related to the hip portfolio. It turns heterogeneous editorial material into a visual journey suitable for self-guided use at congresses, trade shows, and other exhibition settings.

The interface fills a 4K canvas divided into two equivalent areas. Each area has its own filters, cards, and detail panel, preparing the display for two side-by-side browsing points within the same application. Visitors can explore the full selection or focus on ROSA Hip, Revision, and Resurfacing.

Each item is introduced through a visual card. Selecting it opens a high-resolution rendering of the article or post in a scrollable viewer, together with a QR code that lets visitors continue reading on a personal device. After a period of inactivity, the experience closes any open detail views and automatically returns to a stand-by video.

The project is self-contained and does not require remote services for its main journey: the database, thumbnails, detail images, QR codes, and video are packaged with the build. This reduces reliance on venue connectivity and makes the station predictable in event environments with unstable networks.

The goal was to turn heterogeneous editorial content into an immediate touch journey: two autonomous stations, thematic filters, and a direct handoff to smartphones through QR codes.

Project snapshot

Item	Detail
Type	Full-screen interactive application with two touch areas
Usage contexts	Congresses, trade shows, booths, and medical events
Documented release	1.0; UWP package `1.0.0.0`
Engine	Unity 6 (`6000.2.8f1`)
Experience format	4K landscape, 3840 × 2160 px reference, split into two side-by-side areas
Content	18 local cards including posts, testimonials, and articles
Interface language	English; content retains the language of its original source
Project platform	Windows / Universal Windows Platform (UWP)
Development	TopTouch for Zimmer Biomet

Context and goals

At a medical booth, articles, social posts, press coverage, and testimonials must be reachable within seconds, without asking visitors to browse printed material or search the web. The source content should also retain its visual impact and remain available for personal follow-up after the visit.

The project addresses four complementary goals:

Build awareness: surface cases, news, and conversations related to Zimmer Biomet hip solutions.
Guide discovery: organize content into ROSA Hip, Revision, and Resurfacing while keeping an unfiltered view available.
Support follow-up: display each item in its original layout and connect it to a dedicated QR code.
Serve more visitors: distribute the same experience across two autonomous touch areas in a single 4K output.

Technology remains in the background: visitors see a coherent editorial selection, use a small set of familiar controls, and can transfer content they want to keep to their own phone.

User experience

The journey is organized into four main moments:

Stand-by: a looping video fills the display while an animated “Tap to Start” prompt communicates that the station is interactive.
Browsing: each side shows three cards at a time, with previous/next controls and circular navigation through the available groups.
Topic filtering: ROSA Hip, Revision, and Resurfacing narrow the selection; tapping the active filter again restores the complete view.
Detail view: the selected content opens locally on the side in use, with two-direction scrolling, touch inertia, a close button, and a QR code.

Both areas share the same editorial database but have separate controllers and detail panels. Opening an item on the left, for example, does not replace the content shown on the right. The inactivity timer and screensaver are global because they belong to the operating lifecycle of the complete installation.

Short transitions, fades, horizontal slides, and subtle popup overshoot provide feedback without slowing the journey. At startup, a fade from black prevents intermediate states from appearing while the layout initializes.

The experience supports touch, mouse, pen, and service-keyboard input. Its simple flow helps in a public space, but does not by itself constitute accessibility certification: contrast, raster-content readability, target sizes, and physical reach must be verified on the final device.

Experience flow

The application opens with a short fade and prepares both areas in browsing mode. After 120 seconds without input, it closes any detail views, restores the card grids, and starts the stand-by video from the beginning.

The first input stops the video and reveals the experience again. A short raycast block prevents the wake gesture from accidentally selecting a card underneath the overlay.

On either side, visitors can move through groups of three items or activate a filter. Selecting a card temporarily hides that side's grid and opens its detail view. Content keeps its native size inside a viewport: long articles can be explored vertically, while wider assets can also be scrolled horizontally. The QR code remains available next to the material.

Application start
        ↓
Startup fade → dual content grid
        ↓                    ↓
Left area                 Right area
  ├── All                   ├── All
  ├── ROSA Hip              ├── ROSA Hip
  ├── Revision              ├── Revision
  └── Resurfacing           └── Resurfacing
        ↓ select card             ↓ select card
Detail view + QR          Detail view + QR
        └──────────────┬──────────────┘
                       ↓
             120 seconds of inactivity
                       ↓
          Close details + stand-by video
                       ↓ first input
                  Resume browsing

Value delivered

For visitors

Provides immediate access to a curated content set without requiring a manual web search.
Moves from overview to complete article with a single tap.
Makes the main subject areas recognizable through persistent, consistent filters.
Lets visitors continue reading on their own device through QR codes.

For the brand and booth

Turns existing editorial material into an interactive touchpoint aligned with Zimmer Biomet's visual identity.
Gives prominence to testimonials, articles, and social content while preserving their original layout.
Prepares one display for two side-by-side browsing journeys.
Keeps communication active between sessions through stand-by video content.

For operations

Runs on local content and does not depend on venue network quality.
Automatically returns the interface to a suitable state for the next visitor.
Centralizes the experience in one scene and one Windows/UWP package.
Keeps editorial data separate from visual logic through Unity-configurable assets.

My role

Designed and implemented the dual-station architecture inside a single 4K Unity scene.
Developed two independent touch journeys with cards, topic filters, and three-item group navigation.
Created the ScriptableObject-based editorial model, with a shared database linking thumbnail, detail artwork, QR code, and category.
Implemented the detail viewer for variable-size content, including horizontal and vertical scrolling, inertia, and consistent initial positioning.
Integrated QR codes to extend discovery beyond the physical station.
Developed open, close, filtering, and navigation animations together with the application's initialization fade.
Implemented the inactivity lifecycle with looping video, animated prompt, multi-input detection, and wake click-through protection.
Configured the Unity project and Windows/UWP target for deployment on exhibition hardware.

Application architecture

The solution is contained in one production scene and divides responsibility into focused components:

Presentation: 4K canvas, two visual areas, cards, filters, arrows, popups, viewports, and TextMesh Pro labels.
Content: a TopicData database links each entry to an identity, category, thumbnail, detail image, and QR code.
Navigation: two TopicsSideController instances maintain filters, page position, and transitions for their respective sides.
Detail: two TopicDetailPanel instances configure the content, scroll area, QR code, and open/close animation dynamically.
Operating lifecycle: ScreensaverManager monitors input, manages the global timeout, and controls stand-by video; AppStartupFade stabilizes the first visible frame.

┌──────────────────────────── 3840 × 2160 canvas ────────────────────────────┐
│                                                                           │
│  ┌────────────── Left touch area ─────────────┐  ┌──── Right touch area ──┐│
│  │ filters · 3 cards · navigation · detail   │  │ matching structure     ││
│  │ TopicsSideController + TopicDetailPanel   │  │ independent controller ││
│  └──────────────────────┬────────────────────┘  └──────────┬──────────────┘│
│                         │                                  │               │
│                         └──────────────┬───────────────────┘               │
│                                        ↓                                  │
│                            Shared TopicDatabase                            │
│                    thumbnail · detail · QR · category                     │
│                                        ↓                                  │
│                           Local assets in the build                        │
├───────────────────────────────────────────────────────────────────────────┤
│          Global screensaver · VideoPlayer · activity detection            │
└───────────────────────────────────────────────────────────────────────────┘

This structure keeps the two stations symmetrical without duplicating the catalog. Views receive content from the database and report selections through application interfaces, while each controller stores only the state required by its own area.

Operational continuity and session lifecycle

Content is distributed with the application: the 18 database entries reference local thumbnail, detail, and QR assets. The stand-by video is also included in the project and played through VideoPlayer. The main browsing experience therefore remains available without network access.

The inactivity manager detects mouse, touch, pen, and keyboard input. After 120 seconds without activity, it closes detail panels on both sides, restores the grids, and restarts the video from its first frame in loop mode. The “Tap to Start” prompt remains visible, breathes through a subtle scale animation, and periodically changes position.

On wake, the video stops immediately and the overlay disappears. The current version preserves the previous filter and navigation position while clearing open detail views. If the installation requires a completely new session for each visitor, filter and pagination reset can be added to the same lifecycle.

Security and privacy

The reviewed version does not include user accounts, data-entry forms, microphones, application analytics, or calls to remote services. Interaction takes place on local content and does not ask visitors to enter personal information.

QR codes move the follow-up journey outside the station and may open an external resource on the visitor's device. Before release, each destination, HTTPS configuration, availability, expiration, and tracking behavior should therefore be verified, together with any applicable notices on the destination page.

Articles, screenshots, logos, and testimonials may include medical or third-party material. Editorial, medical-legal, and usage-rights approval remains the content owner's responsibility. This document describes the software experience and does not certify the clinical accuracy of the material presented.

Design decisions and trade-offs

Decision	Benefit	Aspect to manage
Two autonomous areas in one 4K scene	One executable and two consistent browsing points	Shared performance and dependency on final resolution
Local `ScriptableObject` database	Simple, typed configuration available offline	Editorial updates require asset changes and a new build
Articles represented as raster images	Immediate fidelity to the original layout	Memory cost, readability, accessibility, and very long content
Three cards per page with circular navigation	Predictable, touch-friendly interface	No direct indication of absolute catalog position
Single-select filters with toggle	Few actions and quick return to the full view	Taxonomy limited to categories represented in code
Pre-generated QR code for each item	Immediate phone handoff without typing	Links must be maintained, checked, and regenerated over time
Global screensaver and timeout	One operating lifecycle for the whole display	Activity on one side keeps the other side awake

Design challenges

Providing two readable side-by-side experiences without visual or interaction conflicts.
Presenting articles with widely different proportions and lengths inside a consistent viewport.
Keeping high-resolution image scrolling smooth on continuously operated hardware.
Making the relationship between card, category, detail, and QR code clear with very few controls.
Preventing the wake gesture from accidentally activating underlying content.
Balancing visual fidelity, build size, and memory use for raster material.
Ensuring video, overlays, and both interactive areas remain stable across many consecutive sessions.

Quality and acceptance criteria

The following criteria make the experience verifiable on the final installation:

Startup without flashes or intermediate panel states, followed by a correct fade into the main view.
Correct rendering at 3840 × 2160, center split alignment, and verification of both touch areas.
Loading of all 18 entries with the correct thumbnail, detail, category, and QR mapping.
Three cards initially visible per side and consistent previous/next navigation, including wrap-around behavior.
Correct activation and deactivation of ROSA Hip, Revision, and Resurfacing filters.
Detail opening only on the selected side and restoration of that side's grid after closing.
Complete scrolling of the longest and widest articles, without unreachable areas or excessive elastic movement.
Scanning of every QR code and verification of its destination page.
Video activation after 120 seconds of inactivity, detail closure, and playback restart from the first frame.
Wake by touch without click-through, with correct mouse and pen response during testing.
Long-run checks covering memory, temperature, frame rate, and video playback on exhibition hardware.

Tech stack

Engine: Unity 6 (6000.2.8f1)
Language: C#
Rendering: Universal Render Pipeline 17.2 with 2D Renderer
UI and text: Unity uGUI and TextMesh Pro
Input: Unity Input System 1.14.2 and Enhanced Touch
Data: ScriptableObject and a local editorial database
Media: raster images, Render Texture, and Unity VideoPlayer
Interaction: filters, grouped pagination, touch scrolling, coroutine-based animation, and unscaled time
Output: full-screen 4K landscape with two side-by-side areas
Target: Windows / Universal Windows Platform

Potential evolution

The following items are a proposed roadmap and are not presented as currently available features:

Connect the catalog to a CMS or versioned remote manifest while retaining a local offline cache.
Introduce a full filter and pagination reset when the screensaver activates.
Add title, source, date, language, alternative text, and editorial status to the TopicData model.
Generate QR codes from configurable URLs and automatically validate every link before a build.
Enable controlled detail zoom and pan by connecting the infrastructure already available in the project.
Optimize image delivery through atlases, Addressables, or deferred loading of heavier detail assets.
Add anonymous, aggregate analytics for filters, openings, and scans, subject to the required privacy review.
Add automated tests for filtering, pagination, asset mapping, inactivity reset, and panel opening.
Run an accessibility audit on the physical display, focusing on contrast, touch sizes, and text alternatives for raster content.

Highlights

One 4K output organized as two autonomous browsing points.
A direct journey from card to article and from QR code to a personal device.
Three topic filters dedicated to ROSA Hip, Revision, and Resurfacing.
Content and media available locally, with no network dependency during browsing.
A viewer that adapts to articles with different sizes and proportions.
Transitions and visual feedback designed for touch use in a public environment.
Automatic stand-by with video, animated prompt, and protection from accidental wake taps.
A reusable editorial structure that keeps data separate from interface logic.

Credits and rights

Project developed within TopTouch for Zimmer Biomet.
Trademarks, logos, articles, testimonials, images, and proprietary content belong to their respective owners.