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.
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
Select Projects
Avios ‘Do More’ MicrositeResponsive Website
Monthly UX Newsletter
Sign up to receive my monthly email newsletter all about UX design, prototyping and design thinking.
