INTERACTIVE UX CASE STUDY
CASE FILE #371
THE BLACKWOOD EARRINGS
Designing a one-page interactive detective experience where users inspect evidence, uncover hidden clues, and solve a fictional jewelry theft through visual storytelling.
CONFIDENTIAL
CASE SOLVED
UX CASE NOTES
Blackwood Earrings
interactive desk preview
A detective story told through objects, pacing, and visual feedback.
01
PROJECT OVERVIEW
The Blackwood Earrings is a single-page interactive portfolio concept designed as a noir detective desk. Instead of presenting information through a standard scroll-based layout, the project invites users to participate in a short investigation. The user opens a case folder, reads the crime report, inspects suspect photos, discovers a hidden cigarette butt under a coffee cup, and identifies the guilty suspect.
The goal was not to create a complex game, but to design a focused interactive experience that demonstrates visual UI, storytelling, microanimations, state-based interactions, and clear UX logic within one atmospheric interface.
02
THE CHALLENGE
Most portfolio projects are passive. Users scroll, look at screens, and leave. This concept explores how a portfolio project can become an experience instead of a static presentation. The main challenge was to balance atmosphere and usability: the interface needed to feel mysterious, but never confusing.
The experience had to guide users through a clear investigation without relying on long instructions, complex inventory systems, timers, or game mechanics that could distract from the design itself.
Make interaction feel natural
The user should understand what can be clicked, opened, inspected, or moved without needing a tutorial.
Preserve the noir atmosphere
The interface had to feel cinematic and mature, not cartoonish or overly playful.
Keep the story short
The full experience should be completed in under three minutes.
Make the evidence logic readable
Each clue had to lead clearly toward the final suspect.
03
DESIGN GOALS
Encourage curiosity
Use physical objects, hidden clues, and progressive discovery to make users want to explore the scene.
Minimize instructions
Replace long explanations with visual feedback, hover states, object movement, and clear interaction cues.
Build a cinematic mood
Use warm lighting, old paper, shadows, dust, red strings, and imperfect textures to create a noir detective atmosphere.
Keep the flow simple
Limit the experience to one screen, one case, five suspects, one hidden clue, and one final decision.
Reward observation
The user should feel clever for discovering the cigarette butt and connecting it to Emily.
Showcase UI craft
Use hover effects, flip cards, lightboxes, drag interaction, typing effects, and animated case-solving feedback.
04
USER FLOW
- Open Case Folder
- Read Crime Report
- Inspect Crime Scene Photo
- Close File
- Review Suspect Polaroids
- Flip Suspect Cards
- Move Coffee Cup
- Discover Cigarette Butt
- Choose Guilty Suspect
- Case Solved
The flow uses progressive disclosure. The user receives only the information needed at each stage. This keeps the experience focused and prevents the interface from becoming overloaded.
05
INFORMATION ARCHITECTURE
- Desk Scene
- Case Folder
- Crime Report
- Earrings Photo
- Crime Scene Photo
- Suspect Photos
- Emily
- James
- Olivia
- Thomas
- Claire
- Hidden Evidence
- Coffee Cup
- Cigarette Butt
- Evidence Card
- Final Decision
- Wrong Suspect Feedback
- Emily Selected
- Case Solved Result
- Case Folder
The information architecture was designed around physical storytelling. Every piece of content appears as an object on the detective desk, making the interface feel like a scene rather than a standard website layout.
06
INTERACTION DESIGN
Block 01
Case Folder Opening
The closed case folder acts as the entry point into the story. The hover state subtly lifts the folder corner, while the click animation opens the file and zooms the user into the investigation. This creates a sense of commitment before the first document appears.
UX purpose:Introduce the story through a physical action.Block 02
Polaroid Inspection
Suspect information is hidden on the reverse side of each polaroid. This creates a natural investigation pattern: the user must inspect every person instead of receiving all facts at once. Each card has a unique rotation to make the desk feel imperfect and realistic.
UX purpose:Turn reading into discovery.Block 03
Hidden Coffee Cup Evidence
The coffee cup is intentionally designed as part of the scene first, not as an obvious button. It becomes interactive only after the user has inspected at least three suspects. This prevents users from discovering the key clue too early and supports the intended investigation flow.
UX purpose:Control pacing without forcing the user.Block 04
Evidence Reveal
When the cigarette butt is revealed, an evidence card appears with a typewriter animation. The red lipstick mark and mint cigarette detail directly connect the hidden clue to Emily's suspect profile.
UX purpose:Make the deduction understandable.Block 05
Final Suspect Selection
The final choice is made by clicking a suspect photo. Wrong selections create a small shake animation and a short "Not enough evidence" note. Selecting Emily triggers red strings, a CASE SOLVED stamp, and the final explanation.
UX purpose:Give immediate feedback and emotional closure.
07
NARRATIVE LOGIC
The mystery was designed around a simple clue chain. The crime scene starts with a burn mark but no cigarette. Later, the user discovers a cigarette butt with red lipstick under the coffee cup. The suspect facts help eliminate everyone except Emily.
Conclusion:
The burn mark led to the cigarette.
The cigarette led to the lipstick.
The lipstick led to Emily.
08
VISUAL LANGUAGE
The visual system is built around noir cinema and old detective case materials. The interface uses a dark wooden desk as the main stage, aged paper for readable content, muted gold for premium details, and dark red for evidence connections. The design avoids bright colors to preserve the serious, cinematic mood.
Color
Almost black, dark wood, aged beige, dirty white, dark red, muted gold.
Typography
Elegant serif headings, typewriter body text, handwritten polaroid labels.
Texture
Paper grain, dust overlay, coffee stains, cigarette burn, worn edges.
Lighting
Soft warm lamp glow, strong shadows, subtle vignette.
Mood
Private detective office, late night, expensive theft, quiet tension.
09
UI COMPONENTS
The interface components are designed as physical objects rather than standard web elements. Buttons, cards, modals, and feedback states are disguised as case materials, which keeps the experience immersive while still maintaining functional clarity.
Case folder
Crime report document
Polaroid card
Polaroid reverse side
Evidence card
Coffee cup
Cigarette butt
Red string
Push pins
Rubber stamp
Lightbox photo
Final result card
10
MICROINTERACTIONS
- Folder hover
- Subtle glow and lifted corner.
- Folder click
- Smooth opening animation and slight zoom.
- Document reveal
- Slide and fade transition.
- Polaroid hover
- Lift, straighten, and shadow increase.
- Polaroid click
- Flip animation to show suspect notes.
- Coffee cup interaction
- Grab cursor, slight movement, drag or click-to-move.
- Evidence reveal
- Cigarette appears from shadow, evidence card types out text.
- Wrong answer
- Suspect photo shakes and displays "Not enough evidence."
- Correct answer
- Emily photo highlights, red strings connect clues, CASE SOLVED stamp appears.
- Restart
- Scene resets with a short reverse animation.
11
ACCESSIBILITY & USABILITY
Although the project is highly visual, the experience must remain usable and readable. Interactive objects need clear feedback states, large clickable areas, and enough contrast between text and paper backgrounds.
- Readable type sizes
- Strong contrast on documents
- Large clickable targets
- Visible hover and focus states
- Keyboard support for major actions
- Reduced motion option
- No essential information hidden only in color
- Short text blocks
- Clear final feedback
The noir style should never reduce usability. Atmosphere supports the experience, but clarity controls it.
12
TECHNICAL STRUCTURE
The project can be built as a single-page front-end experience using HTML, CSS, and JavaScript. The logic is based on simple state changes rather than complex game systems.
HTML
Scene structure, documents, polaroids, evidence cards, final result.
CSS
Layered desk composition, transforms, shadows, textures, responsive layout, animations.
JavaScript
Opening and closing the case folder, tracking viewed suspects, enabling the coffee cup, revealing evidence, validating suspect choice, restarting the case.
State logic
folderOpened
fileClosed
viewedSuspectsCount
coffeeCupUnlocked
evidenceFound
caseSolved
Do not build
inventory system timer score counter multi-page game complex dialogue system
13
KEY DESIGN DECISIONS
One-screen detective desk
The entire experience takes place on one desk to preserve immersion. Instead of navigating between pages, the user moves through the story by interacting with objects in the same physical space.
Progressive disclosure
Information appears only when it becomes relevant. This keeps the interface clean and makes each discovery feel intentional.
Delayed hidden clue
The cigarette butt is locked until the user inspects enough suspects. This protects the narrative structure and prevents the solution from appearing too early.
Physical UI instead of standard UI
Buttons and cards are represented as folders, photos, documents, stamps, and evidence notes. This makes the interface feel like part of the story.
Subtle guidance
The design uses hover feedback, shadows, movement, and cursor changes instead of direct instructions. The user is guided visually without breaking the atmosphere.
Short interaction loop
The mystery is intentionally short. The goal is to demonstrate interaction design and UX thinking quickly, not to create a full detective game.
14
FINAL EXPERIENCE
At the end of the investigation, the user selects Emily as the guilty suspect. Her photo becomes highlighted, red strings connect the cigarette butt, crime scene, and suspect profile, and a CASE SOLVED stamp appears on the folder.
Emily took the earrings while cleaning the bedroom.
The burn mark led to the cigarette.
The cigarette led to the lipstick.
The lipstick led to Emily.
15
REFLECTION
This project explores how interaction design can become part of storytelling. The main value of the concept is not the mystery itself, but the way the user uncovers it through objects, motion, visual hierarchy, and controlled information flow.
The biggest challenge was keeping the interface atmospheric without making it confusing. Every interaction needed to feel like part of the detective scene while still behaving like a clear digital interface.
If expanded further, the project could include multiple endings, optional clue notes, accessibility testing, improved keyboard navigation, and adaptive hints for users who do not discover the hidden evidence quickly.