I helped the Travel Supermarket product team better communicate their design vision by building two interactive prototypes with Sketch and Framer Studio.
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.
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.
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.
Below are two videos that demonstrate the prototype’s key interactions and transitions.