Interactive Prototypes for Travel Supermarket Comparison Website
I helped the Travel Supermarket product team better communicate their design vision by building two interactive prototypes with Sketch and Framer Studio.
The Challenge
In summer/autumn 2015 I freelanced as a Lead UX Designer at Travel Supermarket (a travel comparison website – part of the Money Supermarket Group).
The product team had an idea for an experimental feature for the website search that enabled users to search for holidays using a more engaging, map interface.
Previous development time had been invested in producing a prototype, but the developer had left the company and the codebase became obsolete.
Rather than try to communicate interactive functionality using static mock-ups, I opted to develop several prototypes that brought the design and product team's ideas to life.
My Role
- Hi-fidelity Wireframes
Framer Prototype
Sketch Pattern Library
There wasn't a single source of truth for the current user interface (various PSD's, CSS files etc), so I developed a fresh library of reusable components in Sketch (shared styles, text styles and nested symbols).
In the first instance I used these to mock-up hi-fidelity wireframes so that I could demonstrate the user journey. These were then later imported into Framer to produce two hi-fidelity prototypes.
Framer Studio
Working in Framer Studio enabled me to quickly develop an interactive prototype that demonstrated both the user flow and micro-interactions within the web app.
Final Prototype Videos
Below are two videos that demonstrate the prototype’s key interactions and transitions.
Tools
Sketching
Sketch App
Framer Studio
Deliverables
- Click-though Prototype
UI Animation/Prototype
Type
E-commerce
Web App
Responsive website
Sector
Travel
Get In Touch
If you need help with a UX Design project then I'd love to hear from you.
