Blog

UI Design Hack

Millions of people interact every day with design elements produced by Malmö studios such as ustwo, TAT, Color Monkey and Topp for companies like Google, Sony and Samsung. With this in mind, we decided to host an after hours 'design hack' in our studio as a part of The Conference. For two hours, designers and developers joined forces to make a simple UI element using the motto 'create something magical'. We were super excited to see what the outcome would be, and to share the result with the world – open source.

lineup

Our Design and Tech Directors – Toke Barter and Måns Adler – kicked off the design hack with a short presentation about ustwo, outlining how we work and the purpose of the event. The key question was: 'What is a magical moment and how might it look in digital form'? We focused the scope of the hack on creating a small UI element – for example a button, a scroll indicator or a loading bar. We then divided the participants into small groups and left them with just 4 simple rules: Have fun, don't take yourselves too seriously, make mistakes and be yourselves. To mix things up we also added an element of disruption halfway through the hack by integrating a few smaller teams into larger ones, compelling them to adjust to new ideas and concepts.

With lots of people having never met each other before, coming together and getting creative opened up some very interesting discussions and idea creation. The groups first mapped out and decided on what makes a magical moment, following this by choosing which technology and platform to focus on, and of course defining a problem to solve. All the ideas were presented at the end of the hack and we judged which one was most magical, which most surprising and which had been a 'failure'. We learned a great deal from all the ideas presented, whether they worked or not, and failure was not necessarily a bad thing.

Most magical

watch-smallClock face lock-screen. The lock-screen is mostly used for checking the time, so why not use a clock face as the main element? With this innovation, the analogue time face not only tells the time but also lets you set the hands of the clock to act as your passcode.

Most surprising

Random tab plugin. Opening a tab in the browser should be like walking outside your door, not knowing what will happen next. Instead of an empty window or 'most visited', this plugin gave you a random site when opening a new tab.

Failure

Eclipse animation. Although this was a nice 2-step loading bar animation, it ended up winning the 'failure category'. No bad thing – it just didn't really turn out the way they wanted, and became a little messy. It might have been better presented on another platform instead of desktop. This was all about learning. It was amazing, and truly inspiring, to see what everyone came up with in such a short period of time. Both working prototypes and concepts were introduced to us, ranging from full responsive experience Chrome plugins, to animated chat fields that decay and wither the longer they go unanswered. A full list of the solutions with material will be provided shortly, free to use in your own projects. Keep an eye out!