Craft Meets Code: Upgrading the JioCinema Carousel
medium.com
Get an in-depth look behind the scenes.
Crafting the JioCinema Carousel
Scroll
The carousel artwork was covered by several UI elements, making the artwork hard to observe and unpleasant to look at.
Content logos were not separate from the artwork, making them difficult to scale across platforms.
Artwork layouts did not have guidelines and were wildly inconsistent and crowded.
The small size of artwork undersold the content.
The portrait orientation, large size, and beautifully composed artwork makes its presence felt.
We designed the UI to adapt to the colour scheme of the active card, resulting in an immersive visual experience.
The carousel features delightful interaction design, including a slick parallax animation and autoplaying video.
To preserve the richness of posters, we automatically pick the dominant colour and use it throughout the system.
We built a playful parallax animation to delight users and inject personality into the app.
We autoplay the content's trailer when the user dwells on a card for a short duration.
Design detail: note the gradual fade-in of the progress bar.
We introduced strong artwork guidelines and initiated a project that separated logos from artwork. The result was beautiful, clear and consistent artwork.
Our new guidelines required logos to be separated from artwork — a first for the platform. This allowed us more flexibility for future projects.
We visually balance logos automatically using a clever "logo classes" system. No humans required.
New carousel
Old carousel
New carousel
Old carousel
New carousel
Old carousel
I blend design leadership with hands-on execution to enable design teams to do their best work.