Interactive Prototypes for Travel Supermarket Comparison Website

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.

Monthly UX Newsletter

Sign up to receive my monthly email newsletter all about UX design, prototyping and design thinking.

Sign Up