The battle of the prototypes — first blood

Prototypes are important. They test the extent to which our ideas solve a particular design problem. Being good at prototyping is an essential part of my job.

There are many prototyping tools available but if you want to produce high fidelity work the two big hitters are Framer and Principle. Both of these applications are capable of producing rich, detailed, interactive work.

Framer uses code (coffeeScript) to define interactions. Because of this a lot of designers find the learning curve too steep. However, once you start to ascend the learning curve Framer allows you to connect to web APIs, build VR applications, work with sound and video to produce pretty much anything you can imagine. Yes, you guessed it, I’m a fan.

Principle, on the other hand, takes a visual approach. It uses chained tweens to build animated interfaces. It works well with Sketch, so is much more ‘designer friendly’. You can achieve a lot very quickly with Principle, although it does ultimately have limits.

Here at Designit London the strengths and weakness of different prototyping software are often under discussion. Okay, that’s an exaggeration. That conversation happens between a tiny minority. However, let’s ignore this detail and move on.

I wanted to find out which applications performed best given the same set of inputs. Today, I organised a contest in an attempt to find out the answer.

Designing a fair contest

As I wanted to stress-test the tools, not discover who could devise the most innovative design solution it was important to frame the challenge in the right way. As we only had 60 minutes spending time ‘solutionizing’ would not give useful results — in contrast to Einstein’s quote about saving the world.

So, I attempted to remove as many opportunities for design as I could; everyone used the same UI kit, and everyone had a very specific application flow to prototype.

I picked the beautiful DO UI kit from InVision for the screen assets. The kit has 10 visual themes made up of the following page types; Login, Signup, Walkthrough, Home, Calendar, Overview, Groups, List, Create, Profile, Timeline, Settings, Navigation

With these page types you can easily model Calendar, and To-do list applications. InVision has made a great job structuring the Sketch file. The object names are logical, and the page hierarchy is well defined by the groups (download it and have a play).

The format of the contest was pretty simple:

1. Choose one of the visual themes
2. Choose an application or part of an application to model
3. Pick a prototyping tool
4. Build, test, and iterate your design

5 minutes before the contest began I uploaded the DO UI Sketch file to a shared Dropbox — so everyone started from the same point. Contestants had 60 minutes to complete the challenge. All prototypes were then presented to the group. Each contestant cast a single vote for their favourite prototype. The Prototype with the most votes would be the winner.

We had six contestants, including myself. Two for team Framer, three for team Principle, and one for team Mirr.io.

Unlike the other tools — and maybe unfairly — this was the first time anyone of us had tried Mirr.io. Unfortunately it wasn’t up for the challenge. So after an unfruitful 20 minutes it was dropped in favour of Principle. Sorry Mirr.io.

Outputs

From left to right then left to right; Principle, Principle, Framer, and Principle

And the winner is…

As it turned out two prototypes tied for first place, one Framer and one Principle. So what did we learn?

Principle, as expected, allowed all three (well four actually) people to produce great looking results. And for this reason I’m going have to say that Principle won the day.

Although Framer produced a winning prototype with some beautifully detailed interaction, the other half of team Framer (me) wasted a lot of time attempting to get a plugin working correctly — not a fault of Framer, but in this instance a deal breaker.

Insights from the challenge

Don’t waste time polishing a single detail, instead focus on interactions that help to tell a larger story.

The Brief: Overall we found the format of the contest worked well. Potentially we could have focused the task even more tightly to get a better comparison.

Using DO: It’s a simple well thought out piece of design and was perfect for the challenge. It was built for InVision, so time was spent preparing it for use with other prototyping tools.

Final thoughts: I learnt a lot from this contest, one thing being that my colleagues are amazingly talented and extremely good at making prototypes. However, my big lesson was to take Einstein’s advice and spend more time planning my solution rather than executing it. As it turned out building redundancy into my plan would have saved me a lot of energy.

As one contestant so eloquently put it “don’t waste it polishing a single detail, instead focus on interactions that help to tell a larger story”.

Like what you read? Give Matt Byrne a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.