Travel Website Filtering
My role in this project was to
- Conduct qualitative UX tests with the current website users
- Determine if the old matrix was working or why it was not working
- 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.
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.
Variations of the Final Product
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.
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.
Final Lessons from this Project
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.
- Make sure the filters are visible so that the user can easily adjust them
- Allow the user to add and take away as many filters as possible
- Include a reset button that is visible
- Some filters are more common than others, there has to be a hierarchy
- Show which filters are physically selected/active
- Make it interactive and fun to use
- Check your contrast for any color disability users
- Make the font readable for older eyes