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.

Travel Supermarket Project Hero

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.

 

Travel Supermarket Sketch Pattern Library
Travel Supermarket Framer Studio

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

Get In Touch

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

Download CV

Monthly UX Newsletter

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

Sign Up