Project_block-showcase.case

Block Showcase (QA)

Internal QA fixture exercising the quote, before/after, stats, timeline, and columns blocks.

Discipline
DemoUI
Date
June 04, 2026
Used Tools
Payload CMS, React, Playwright
Views
0

Overview_txt

A scratch case study used to verify the four new content blocks render correctly.

The new blocks let a case study breathe — pull-quotes, metrics, and comparisons without leaving the builder.
Showcase coverKhusan TuraevLead Designer
A plain pull-quote with no attribution should still read as a strong standalone statement.
After stateBeforeAfter
Drag the handle (or use arrow keys) to compare.

Results

+48%
EngagementVersus the previous layout.
2.1s
Load timeMedian on mobile.
12
ComponentsShipped in the system.

Process

  1. Brief

    Define the transformation

    The keyboard concept needed to feel less like a product render and more like a launch-ready visual system.

  2. Research

    Map the visual references

    I collected material, lighting, and camera references around premium desk setups, collector hardware, and dark UI surfaces.

  3. Concept

    Lock the hero angle

    The composition was reduced to one strong silhouette, a close material read, and a restrained accent palette.

  4. Production

    Build the render set

    The final frames focused on controlled reflections, keycap texture, packaging crops, and social-ready aspect ratios.

  5. Result

    Deliver a compact campaign kit

    The case resolves into a small launch package: hero visual, detail crops, comparison frame, and reusable layout rules.

Image on the right

Two-column layout pairing narrative text with a supporting image. On mobile this stacks into a single column.

Showcase cover
Supporting visual.

Image on the left

The mediaPosition control swaps the image to the left while keeping the reading order sensible on small screens.

After state