Travel Website Filters

Travel Website Filtering

Write a detailed report explaining where the problems lived in the old design

Sketch out possible product solutions for an updated matrix with the Tallwave team

Create a prototype in Sketch and Invision for the client to see the solution

Please note that this was a Tallwave team effort and that all photos belong to Tallwave and I! 🙂

Our design team was given the task of recreating an already existing and difficult to use filter matrix. The website was being rebuilt for a company that finds cheap flights, car services and hotels for business trips. Unfortunately I have been asked not to use their actual name in this explanation.

Overall this is your typical flight booking website however their matrix was confusing. My manager and I lead several UX interviews testing the old matrix and we found that the individuals were having a difficult time finding the filters and clicking on several airlines at once which is important for price comparison.

Project Details

Share:

The Sketch Phase

Filters Filters Everywhere!

These are a few of the examples of sketches I made while we were brainstorming for solutions. During this process I was able to sit down and spend a few hours drawing out the problems of the old matrix and then fixing them in the following sketch. We also played around with the idea of using pills and rectangles with and without the airline logos.

I actually ended up animating some of my sketches and posting them up on Invision! One of the best tips is to draw on paper, take a photo of your sketch with your iPad and then write down your notes in ProCreate the app. This will allow you to create animated note gifs that are easy to share and are self explanatory.

The Evaluation Process

We took the most user friendly sketches and shared them with the client. The client had great feedback such as making sure certain filters were visible first or certain airlines could be favorited during the selection process. This really allowed us to get a better sense of the user even though we conducted tests before creating these sketches. From here we were ready to jump into creating actual wireframes and comps.

The Renders/Comps

Variations of the Final Product

Accessibility

The filters are always accessible and visible to the user, they remain sticky as the user scrolls down the page. These filters can always be expanded and collapsed depending on the user’s needs.

Recognition

We cleaned up and organized the filters however we kept the filters in similar locations as the old version so the learning process for the user would be simple and less frustrating than having to learn a whole new matrix.

Results

Final Lessons from this Project

Client Response

The clients were very pleased with the final comps. They thought the designs and interactions were simple and helpful for the user. This new filtering process has been introduced in Spring 2018.

As of yet we have not heard of any complaints and have only gotten more work from the client. We will revisit the filtering system and test it again soon to see if the product works the way it should.

Lessons Learned

Make sure the filters are visible so that the user can easily adjust them