Shopora

This project solves common e-commerce usability challenges by delivering a seamless shopping experience focused on higher sales conversions.

Title

Shopora

Shopora

Role

E-commerce

E-commerce

Date

2014

2014

Shopora is an e-commerce app for browsing, cart management, secure checkout, and fast product delivery designed for modern shoppers. Shopora is an e-commerce app for browsing, cart management, secure checkout, and fast product delivery designed for modern shoppers.

Motion Principles

Motion is how the brand performs in time. It is the most visible proof of how seriously we take craft, and the fastest way a viewer reads what Instant stands for. These four principles guide every animated decision the Instant brand makes.

Tempered

Elements subtly ease in and then move fast with conviction, landing with weight, never floating into place. Our movement is quick but always calculated and intentional, showing Instant is built for brands that move at speed.

Tempered

Elements subtly ease in and then move fast with conviction, landing with weight, never floating into place. Our movement is quick but always calculated and intentional, showing Instant is built for brands that move at speed.

Tempered

Elements subtly ease in and then move fast with conviction, landing with weight, never floating into place. Our movement is quick but always calculated and intentional, showing Instant is built for brands that move at speed.

Distilled

Complex product workflows are translated into clean, stylized motion that tells a story that anyone can follow. Sophistication shows in what we choose to leave out, not in how much we cram in.

Distilled

Complex product workflows are translated into clean, stylized motion that tells a story that anyone can follow. Sophistication shows in what we choose to leave out, not in how much we cram in.

Distilled

Complex product workflows are translated into clean, stylized motion that tells a story that anyone can follow. Sophistication shows in what we choose to leave out, not in how much we cram in.

Perpetual

Instant is never idle, and our motion shows it. Underneath every hero moment, small details quietly run in the background. These details are evidence, not decoration. They tell the viewer the system is thinking even when no one is watching.

Perpetual

Instant is never idle, and our motion shows it. Underneath every hero moment, small details quietly run in the background. These details are evidence, not decoration. They tell the viewer the system is thinking even when no one is watching.

Perpetual

Instant is never idle, and our motion shows it. Underneath every hero moment, small details quietly run in the background. These details are evidence, not decoration. They tell the viewer the system is thinking even when no one is watching.

Measured

We choose deliberately and sparingly when to be loud to highlight important moments. An expressive, explosive moment of motion must have a juxtaposing quiet, restrained moment before it.

Measured

We choose deliberately and sparingly when to be loud to highlight important moments. An expressive, explosive moment of motion must have a juxtaposing quiet, restrained moment before it.

Measured

We choose deliberately and sparingly when to be loud to highlight important moments. An expressive, explosive moment of motion must have a juxtaposing quiet, restrained moment before it.

Motion Behaviour

Where motion principles define how we think, motion behaviours define how we execute. Each behaviour is a practical application of one or more principles.

Sophisticated expression

We use very intentional moments of loudness and expression. We avoid messy maximalism or motion becoming too playful/juvenile.

Sophisticated expression

We use very intentional moments of loudness and expression. We avoid messy maximalism or motion becoming too playful/juvenile.

Keeping it simple

We simplify UI and translate long and complex processes into stylized sequences. Avoid showing every step of a long workflow, dense UI dumps and too much text animating on screen.

Keeping it simple

We simplify UI and translate long and complex processes into stylized sequences. Avoid showing every step of a long workflow, dense UI dumps and too much text animating on screen.

Dimensional UI

When showing product focused UI, we split layers in 3D Z space to create visual interest and stylize our product in an easy to follow way.

Dimensional UI

When showing product focused UI, we split layers in 3D Z space to create visual interest and stylize our product in an easy to follow way.

Details that matter

Use ambient breathing UI elements like subtle pixel flickers, micro node-tree animation or low-opacity glass sheens to hit home that the Instant machine is always on and evolving. Avoid background motion that pulls focus, decorative loops with no logic and idle frames where nothing is happening.

Details that matter

Use ambient breathing UI elements like subtle pixel flickers, micro node-tree animation or low-opacity glass sheens to hit home that the Instant machine is always on and evolving. Avoid background motion that pulls focus, decorative loops with no logic and idle frames where nothing is happening.

Logo

The Instant logo is the most concentrated expression of the brand. Use the animated marks below for product, films, and end frames.

Endcards

The Instant endcard is the final beat of any sequence. Use these designed, animated cards to close films, ads, and product moments, they replace a floating logo with a fully resolved end state.

Transitions

The Instant transition is the connective tissue between moments. Use these animated wipes and reveals to move between footage, graphics, or any combination of the two.

Projects

Explore more like this one

View All Projects

View All Projects