Challenging our design team with a monthly Framer Challenge
Three years ago we discovered Framer at Label A. The first two years we mainly used it to make it easier to explain complex interactions to the development team and to our clients, but since a year we have been doing more advanced stuff with it.
Using Framer really upped the design game of our entire team. From creating static designs for our clients, we went to creating working prototypes that have the same look and feel as the real thing. Framer also allows us to fiddle around with code more often, which gives us a better understanding of what our developers have to deal with. Lastly, Framer lets us create tools we’d love to have ourselves.
The Framer Challenge
Our love for experimenting with Framer and creating new tools sparked our idea for a monthly in-house Framer challenge among the design team. It allows us to challenge ourselves to find the boundaries of prototyping. Plus we get to really push our creativity. We recommend it to every design team that wants to do more with Framer!
Each month someone else from the team gets to think of a new challenge. The first challenge we did was: Improve the office
It’s a fun challenge because it is quite broad and everyone can relate to it. After the challenge is announced, we get to work. We find some time in between projects, after hours or during breaks, etc. We keep each other in the loop and organize feedback moments. After one month, we evaluate our prototypes and document the results in Confluence.
An eDivision Leader Board
The results of the first Framer challenge set the bar quite high. We now have a leaderboard for our yearly eSports tournament –which we call eDivision– in which the whole team can keep track of the rankings.
It uses the REST API of Challonge.com, which delivers the data live to the prototype. By checking what matches are played, won and lost by the players a live dashboard is created which will be shown on all screens in the office.
A Label A book tracker
At Label A we like some food for thought. That’s why we have our own book wall!
People can borrow these books and we keep track of who has which book. Books are common to lay around here and become MIA (Missing in Action). To solve this problem, our former colleague Bart created an iPad tool for an iPad stand next to our book wall to easily see what books are borrowed, by whom and when they are returned. This way everyone is aware of the whereabouts of the books and no books will end up missing.
Bart made this tool by using Framer Design and the Cloudstitch module. The module links a Google Docs spreadsheet to the prototype, which updates in real time.
Using Data and Modules in Framer
Data is used in digital design all the time, in every process. So why not use it in our prototypes as well? Since Framer is based on JavaScript we use APIs from clients to power-up our prototypes.
Next to using real data, we use modules to extend what can be done in Framer. Modules work just like libraries; they are extensions that make things easier to handle in code. Think of making it easy to use a Playstation controller to control a prototype, for example.
These were two of the prototypes we built during our first Framer challenge. We will share the results from the second challenge with you next month.
Framer became our number one tool to quickly bring our ideas to life. It’s fun and easy, but at the same time challenging and rewarding. Currently our Framer Challenges are in-house only but we are exploring ways to challenge everyone on the web to explore their ideas with Framer, modules and real data.
If you are inspired to start your own Framer Challenge, let us know! What do you think our next challenge should be?
