The Framer X Challenge — Edition 2

Hi! We all love watching Netflix on a lazy Sunday, but what if its interface got a makeover? We put our designers to the test. After the great success of our first Framer X Challenge, we proudly present you Edition 2!

For the ones that missed the first edition: we are Label A, a digital product development company based in the Netherlands. Every week, 3 designers make a concept in Framer X in just 1 hour. The one with the most original, creative and useful design, wins. Jury? The whole Label A team.

This week’s challengers

Netflix-like interface

We asked our challengers to come with a Netflix-like movie exploration interface. As always, we didn’t give them any guidelines, as we try to spark their creativity. So without further ado, let’s take a look at their creations!

Maik — Movie posters

When thinking about the ideal interface, I came up with something different. An issue I have been running into for a while is easily finding movie posters. Instead of redesigning an interface I took a deep-dive into Code Components!

The Movie Posters package is an easy to use component which uses the OMDb API to easily find the movie poster of your favourite movie or series. Searching can be either done on Name or IMDb ID. I’m very excited that I managed to make my very first React Component! If you have any feedback or ideas, feel free to let me know!

Download here:

Rick — Mood-based watching

A lot of times when I want to watch something on Netflix, I run into the same problem. I don’t know what to watch. There’s so much content on it, that I end up hours of scrolling and not watching anything at all. Even when I select a certain genre, there’s still a lot to navigate through.

To me, it really depends on some different things. How is my mood? Do I want to binge a serie alone all weekend, or do I just want to laugh with my roommates? Suggestions can be way more personal and specific for a certain moment.

My design takes that problem away and does the scrolling and searching for you. Based on genre, mood, when and with who you’re watching, Netflix will do a couple of suggestions for you to watch!

Components used
Video player by Krijn Rijshouwer
Icon Generator by Benjamin den Boer

Syara — Revising the home screen

Browsing through options for me is a secondary action, so I came up with a simplified home screen so you can you see exactly where you left off and can jump right back in, no extra steps.

I also want to be able to see the selected profile, so I don’t have to wonder why my content looks different. The section titles also change depending on the watch status, so you finally have a warning when you’re headed into that season finale!

Notes on Framer
The stacks option came in handy for rearranging the content however it got a bit complicated when I tried to size up the selected card. I did however enjoy swapping images! It goes very smoothly since Framer remembered that the previous time I selected a card, I was editing the image fill.

This week’s winner.. 🎉

Label A came together and came to a conclusion. The winner of the second Framer X Challenge is Rick! Congratulations Rick with your mood-based watching concept!

➡️⚽️ Next week: Sports standings

Next week we’ll leave the couch and become more active! Our challengers will create a sports standings interface for their favourite team, sports and anything related. See you next week!

Do you want to work with the latest design tools? Do you want to keep developing yourself and the products you make? You might be a good fit for Label A! Check out our vacancies here.