The Framer X Challenge — Edition 2

Label A
Label A
Oct 5, 2018 · 4 min read

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

Image for post
Image for post

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: https://store.framer.com/package/maikleenards/movie-posters

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.

Image for post
Image for post

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!

Image for post
Image for post

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.

Label A

Label A develops intuitive and sexy apps, websites and…

Thanks to Oscar Kolthoff

Label A

Written by

Label A

Label A is the technical brain behind successful online businesses, brands & products.

Label A

Label A

Label A develops intuitive and sexy apps, websites and online platforms. Dummy-proof and high-tech, with a focus on mobile and cloud technologies. We have everything in- house to be able to design, develop and support web and mobile applications. Visit us at www.labela.nl.

Label A

Written by

Label A

Label A is the technical brain behind successful online businesses, brands & products.

Label A

Label A

Label A develops intuitive and sexy apps, websites and online platforms. Dummy-proof and high-tech, with a focus on mobile and cloud technologies. We have everything in- house to be able to design, develop and support web and mobile applications. Visit us at www.labela.nl.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store