Dealchecker

UX Design and Development

    Dealchecker is one of the leading online travel booking services in the UK. Initially I joined dealchecker as a UI Designer & Developer to work directly on the webapp.

    My role was to design and develop new features for the web app while making the app responsive and improve conversion. Our project was fully based on user needs and business goals.

    Usability matters: The first issue that we solved

    Basically the main task that the user needs to perform when they visit dealchecker’s website is to search for the best and cheapest flights, hotels, holiday deals, cruises or car hire.

    I needed to discover why the search form was frustrating users. In other words, I had to define the problem.

    This is why the first thing to do was to organise a user test section with some participants. We set up a camp in a local coffee shop next to the office and asked few people to use the old dealchecker’s web app. I needed to observe how they interacted with the search form in order to make design decisions.

    I gave each participant a different scenario:

    1. Search for a flight ticket to São Paulo, Brazil and buy a return ticket.
    2. Book a holiday to Sardinia, Italy.
    3. Book a hotel room for 7 nights in Barcelona, Spain.
    4. Buy a 4 days French Riviera cruise
    5. Rent a car for 3 days in Milan, Italy

    Debrief

    One of the main problems that came during the test is that users couldn’t realise that the form had 5 different categories – Flights, Holidays, Hotels, Cruise and Car hire – since they were all being presented by sections in an unique form. They could search for flights, but didn’t find the option to search for hotels or holiday deals.

    Another problem with the old design is that it was quite busy and cluttered, making it difficult for users to find what they’re looking for. That was causing a lot of confusion and most users were simply giving up.

    Like most booking and travel systems, dealchecker’s search is organised by categories. However that was not being clearly showed on the old design.

    wireframe

    My approach was to sketch out how we would separate each category on the form.

    Redesigning dealchecker’s search form

    Based on what we could learn from the user testing sections I could also redesign dealchecker’s main page, including Real Travel Deals and Inspiration sections.




    dealchecker desktop

    Search flights

    Development is also part of the art

    I also took charge of Front End development, collaborating directly with developers, delivering responsive, semantic and accessible code ready to be implemented on the application.

    The results

    Before releasing the new design, we A/B tested design variations and reduced bounce rate of key pages by 30% and improved customer satisfaction.


    dealchecker showcase

    dealchecker mobile
    Back To Top