Designing for Flow: What Kinetix Learned from Lightroom

When building Kinetix, particularly the mobile /create experience, we stand on the shoulders of giants. There is perhaps no better example of complex creative capability successfully condensed into a mobile form factor than Adobe Lightroom Mobile.

Lightroom takes a desktop-class photo editing engine (hundreds of parameters, curves, color grading) and makes it usable with a single thumb. As we refine the Kinetix Bottom Dock, we looked closely at Lightroom’s “Bottom Deck” to understand why it works so well.

Here is our analysis and how we are applying it to Kinetix.

1. The Hierarchy of Tools (Categorization over Scrolling)

The most striking feature of Lightroom’s interface is its refusal to overwhelm.

The Analysis

In Lightroom, you are never presented with a vertical scroll of 50 sliders. Instead, functionality is strictly bucketed into high-level categories: Light, Color, Effects, Detail.

• State: The bottom strip is constant (the navigation).
• Action: Tapping a category (e.g., “Light”) reveals a horizontal panel of specific tools (Exposure, Contrast, Highlights).
• Result: The user builds a mental model: “I want to change how bright it is -> Light -> Exposure.”

Applying to Kinetix

In our early prototypes, the “Properties Panel” was a long vertical list of everything: Width, Height, Color, Shadow, Animation, Border. We are now moving towards the Context Dock model:

• Style Tab: Holds Color, Border, Shadow (The “visuals”).
• Layout Tab: Holds Position, Size, Rotation, Layering (The “structure”).
• Motion Tab: Holds strictly animation presets. This reduces cognitive load. You don’t hunt for a property; you navigate to it.

2. Precision Meets Touch (The Slider)

Creative tools require two modes of input: “Explore” (dragging wildy to see what looks good) and “Refine” (setting it to exactly 50%).

The Analysis

Lightroom’s sliders are masterful:

• Visual Feedback: The slider track shows the effect (e.g., the Temperature slider goes from Blue to Yellow).
• Numerical Readout: The value (-15, +45) is clearly displayed.
• Reset Zone: Tapping the icon resets the slider.

Applying to Kinetix

We have implemented our own Slider component, but we can do better.

• We’ve added: Numerical readouts next to sliders (e.g., Font Size: 120px).
• We need: Live visual gradients on color sliders and “snap-to-zero” haptics for rotation.

3. Deep Dive Context (The “Sub-Mode”)

Some tools are too complex for a slider. Lightroom handles this with “Sub-Modes”.

The Analysis

When you tap Color Mix, you leave the main “Lightroom” UI and enter a focused “Color Grading” UI. The bottom deck changes entirely to show color pucks (Red, Orange, Yellow…).

• Focus: Everything else fades away.
• Return Path: There is a clear “Done” or “Back” button to return to the parent context.

Applying to Kinetix

This is exactly the pattern we just implemented for Code Blocks and Text Editing:

• Normal Dock: Text, Shapes, Code.
• Code Selection: The deck transforms. “Edit”, “Theme”, “Settings”.
• Back Navigation: We added a explicit Chevron/Back button to the left of the dock. This acts as the “Done” button, signaling “I am finished with this specific object, take me back to the workspace.”

4. Visual Presets (Don’t Tell, Show)

The Analysis

For “Profiles” and “Presets”, Lightroom doesn’t list names (“Modern 01”, “Vintage 03”). It shows Thumbnails of the actual image with the effect applied.

Applying to Kinetix

Our Motion Tab currently lists animations by name (Fade In, Slide Up).

• The Goal: Moving to a horizontal scrolling list of preview cards.
• The Dream: The preview card actually plays a mini-animation of the effect. If it’s Typewriter, the thumbnail should show text typing out.

Conclusion

The lesson from Lightroom isn’t just “make it dark mode and sleek.” It’s about respecting the screen real estate. Every pixel in the bottom deck is expensive property.

By grouping tools logically, providing deep-dive modes for complex tasks, and ensuring precision is always accessible, we can make video creation on Kinetix feel as intuitive as editing a photo on Lightroom.