Skip to content
← All work

How do you turn scattered interaction inspiration into a structured library people can actually study and apply?

A centralized video-driven resource for discovering, studying, benchmarking, and applying modern digital interactions.

Project
Interaction
Domain
UI/UX Design · Interaction Design · Design Resources
Role
Product Designer
Duration
To be added
Status
High-Fidelity Concept
  • Figma
  • After Effects
  • Lottie
Interaction project visual

Outcome summary

A high-fidelity concept with a defined content structure and browsing model. Not shipped — no usage outcomes claimed.

01 — Overview

What this project is

A centralized video-driven resource for discovering, studying, benchmarking, and applying modern digital interactions.

  • Interaction Design
  • UX Research
  • Information Architecture
  • Prototyping
  • High-Fidelity UI

02 — History

What was happening before

What was happening before?

Interaction references live across social feeds, portfolio sites and screen recordings with no shared taxonomy.

Why did the problem matter?

Inspiration is easy to find and hard to learn from. Without structure, patterns are copied rather than understood.

Who was affected?

Designers and developers studying and benchmarking digital interactions.

What triggered the project?

A personal need for a structured interaction reference while designing product motion.

03 — Geography

Where this product lives

Target users
Designers and developers
Environment
Global digital design / development environment
Market / domain
Design resources and education
Device
Desktop and mobile web
Digital comfort
High
Age / demographics
Not documented

04 — Physics

How the product works

The main journey, the tasks that matter, and the friction that had to be designed out.

  1. 01

    Discover

    Browse interaction library

  2. 02

    Explore

    Filter by pattern and context

  3. 03

    Study

    Watch and break down

  4. 04

    Benchmark

    Compare approaches

  5. 05

    Apply

    Use in real product work

Top user tasks

  • Find interactions by pattern or category
  • Watch an interaction in detail
  • Understand why it works
  • Save and revisit references

Information architecture

  • Library / browse
  • Categories & patterns
  • Interaction detail
  • Collections

Friction points

  • No shared vocabulary for interaction types
  • Video-heavy content that is hard to scan
  • Inspiration without explanation

What was simplified

  • Defined a category and pattern taxonomy
  • Designed scannable video cards with consistent framing
  • Paired each interaction with its design rationale

05 — Chemistry

How the experience feels

Before

  • Scattered inspiration
  • Surface-level copying

After

  • Curiosity
  • Inspiration
  • Discovery
  • Confidence

06 — Biology

How people actually behave

  1. 01Need inspiration
  2. 02Discover interaction
  3. 03Watch
  4. 04Analyze
  5. 05Apply
  6. 06Return

Loop repeats from the last step.

Observed behaviors & workarounds

  • Saving screen recordings with no context
  • Re-searching the same references repeatedly
  • Learning by imitation rather than analysis

07 — Mathematics

Evidence, honestly stated

Only what is actually documented is shown here.

Research sample
Not documented
Usability testing
Not documented
Task completion
Not formally measured
Time saved
Not formally measured
Errors reduced
Not formally measured
User confidence
Not measured
User quote
Not documented

Metrics to be validated

  • Task completion rate
  • Workflow completion time
  • Usability score
  • User satisfaction
  • Feature adoption

08 — Design Engineering

The process

  1. Research

    Research artifacts — to be added

  2. Problem framing

    Framing notes — to be added

  3. Information architecture

    Taxonomy — to be added

  4. User flows

    Browse & study flows — to be added

  5. Wireframes

    Wireframe set — to be added

  6. Design system

    Concept component set — to be added

  7. High-fidelity UI

    Concept screens — to be added

  8. Prototype

    Prototype — to be added

  9. Iteration

    Iteration log — to be added

  10. Final product

    Concept only — not shipped

09 — STAR Story

Situation, Task, Action, Result

Situation

Interaction references were scattered and hard to study systematically.

Task

I explored the problem as a self-directed product concept: research, structure, flows and high-fidelity UI.

Action

I defined an interaction taxonomy, structured the browse and study experience around video, and designed high-fidelity screens and prototype interactions.

Result

A high-fidelity concept. It has not been released, so no usage or usability outcomes are claimed.

10 — Before / After

What changed

Before

  • Scattered references
  • No shared structure or vocabulary

After

  • Structured taxonomy
  • Consistent study format
  • Clear browsing model

11 — Final Screens

Screens and decisions

Each visual is captioned with the design decision behind it.

  • Designed the library grid so motion is scannable without opening every item.

  • Paired each interaction with rationale so the page teaches, not just inspires.

  • Kept filtering visible on mobile, since discovery is the primary task.

  • Reserved for an interactive prototype walkthrough.

12 — Learnings

What I take forward

What I learned

  • A taxonomy is the product in a resource platform; the UI just expresses it.
  • Video-first content needs strong scanning affordances.

What I would improve

  • Validate the taxonomy with practising designers.

What I would test next

  • Whether users can find a specific interaction pattern quickly

Future opportunities

  • Community contributions
  • Code-level references

13 — Next Project

Super Fitout SaaS Marketplace

Next case study

Super Fitout SaaS Marketplace

Interior Design & Fit-out / B2B Marketplace