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.
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.
Other Blog Articles
- My UX Design Tools
- 24 Sketch Plugins to Improve Your Design Workflow & Productivity
- Remote User Testing Framer Prototypes With Hotjar Analytics
- Connecting Two Prototypes Using Framer Studio & Firebase
- Principle Prototype to Improve Runkeeper’s Manual Activity Logging
- User Experience & Luxury Fashion Brands: A UX Designer’s Perspective
- 12 Tips For UX Designers Who Want to Learn Prototyping
- Prototyping with Framer Studio
- iPhone 6 UX prototyping with Sketch & Framer Studio
- Improving the UX workflow for responsive design
- UX Faux Pas: Image Optimisation
- Prototyping responsive user experiences with Foundation
- Prototyping for UX Presentation
- DPD Poor Customer Experience (CX)
- O2 Poor Customer Experience (CX)