UI/UX workCase study

Orion

UI/UX Design, Creative Development, Motion Design

Orion wanted a product experience that made premium audio feel visual. We built a world above the clouds where sound, movement, and product storytelling become one continuous journey.

FigmaFramerAfter EffectsSpline

About the project

With Orion, sound, movement, and product storytelling become one continuous journey above the clouds.

The brief

Orion wanted a product page that made premium audio feel visual. We built a world where the headphones float, rotate, and travel through a single unbroken sky as the story unfolds.

Orion landing experience, floating above the clouds

A weightless, continuous experience

Problem

A static product page cannot convey how Orion sounds or feels. Disconnected sections break the sense of immersion, and heavy visuals risk making a premium product feel slow.

Solution

One sky, one journey. Products float and travel through the page as the story unfolds, and every cloud and transition was tuned to stay cinematic without feeling heavy.

Orion product story unfolding down the page

The product moves. The experience flows.

Orion products floating and rotating through the scroll

Project timeline

The work followed a clear path, from framing the problem and researching the experience to prototyping the motion and delivering a polished build.

Discovery

1 week

Problem & goals
Research

Design

2 weeks

Wireframing
Visual design

Delivery

3 weeks

Motion prototype
Handoff
Orion listener profiles and product detail

Colour palette

Calm. Weightless.

A soft sky-led palette built on contrast, air, and a single bright accent.

AccentPrimarySurfaceText

CFE4F5

Sky

F4F7F4

Cloud

C9D2D8

Silver

0C2B28

Ink

Typography

Modern. Readable.

A type system focused on clarity, hierarchy, and a premium feel.

Bricolage Grotesque

#0C2B28

Bricolage Grotesque is the display face — expressive, contemporary, and confident. It carries the headlines and the big statements through the scroll.

Albert Sans

#8FD0FF

Albert Sans is the body face — clean and highly legible at every size, keeping the supporting copy calm and easy to read.

Orion closing scene

Let's make the next move clear.

Bring the problem, the brief, or the rough idea. We will help you decide what comes next.

Frooxi