Prototyping with Framer Studio

Following on from my previous post about using Sketch and Framer Studio for the first time. I thought I would share my experience of using it in a commercial environment.

Travel Supermarket

I spent three months in the autumn of 2015 working as a Lead UX Designer at Travel Supermarket (a travel comparison website - part of the Money Supermarket Group).

Previously, UX design work had been done (with varying success) in Sketch and InVision. But I was told by other members of staff that often key interactions, transitions or the look and feel were often 'lost in translation' somewhere between the product manager, designer and development teams.

I decided to trial out Framer Studio to see if it could help me bridge the communication gap between the different teams and produce a better end user experience for Travel Supermarket customers.

Workflow

I had already transitioned to Sketch a few months previous, so I was happy using it as my primary tool for wireframes, mock-ups and (sometimes) UI design.

Over the course of a weekend (and on the morning and evening commutes) I watched the Framer Studio website tutorials and the O'Reilly course by Kenny Chen. This gave me enough knowledge of the App and CoffeeScript to get started.

Sketch is a great App, but when you are trying out different (UX) design ideas I found it can encourage you to be a bit messy with your layer names, groups and artboards. If you are importing your artwork into Framer Studio then you need to be a bit more disciplined i.e group layers properly and use a consistent naming convention  lowercase and hyphens or camel case).

I'll write another post about my tips for Sketch and Framer, but for now I just wanted to share some of the Framer prototypes I put together.

Framer Studio Prototype Videos

Below is a selection of videos that demonstrate some simple (and not so simple) transitions and interactivity for various projects I worked on whilst at Travel Supermarket.

Notification & Modal Window Overlay Prototype

This is a simple prototype that I developed using Sketch and Framer Studio. It demonstrates a notification and modal window overlay.

Simple Login/Sign-Up Page Prototype

Another prototype that I developed using Sketch and Framer Studio. It demonstrates a simple slide out panel triggered by a log-in or sign-up link.

Web App Search Form Prototype

A prototype showing how a holiday search form could be launched as an overlay by the user clicking/tapping on a 'faux form' field.

Web App Navigation Prototype

This is a slightly more involved prototype (from a code point of view), that demonstrates several interactions involved with using a simple travel web app.

I worked alongside the in-house digital designer to help him bring some of his static screens to life.