Interactive Prototypes for Travel Supermarket Comparison Website

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.

Get In Touch

If you need help with a UX Design project then I'd love to hear from you.

Get in Touch Download CV

Monthly UX Newsletter

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

Sign Up