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
Rapid HTML prototyping for Cobra BeerResponsive Website
UX Audit for Mulberry Responsive Website
Monthly UX Newsletter
Sign up to receive my monthly email newsletter all about UX design, prototyping and design thinking.
