Daft.ie / auto-complete

At Daft.ie I was part of a responsive web and desktop website squad. Together we were working to solve a user pain while selecting the areas on a Search page. We followed the UX Design Process that I created. The main goal was to ensure that, what we create will improve life our users. The process supports team collaboration and user validation. 

Lead UX Designer

Discovery - UX analysis

Based on user feedback and ux evaluation we listed problems of a current design:

  • Too much scrolling to find the area. 
  • No functionality to select areas from different cities/counties. 
  • User can’t see what areas are selected if there are more than 3 areas selected.
  • User can’t see what property types are selected if there is more than 3 selected. 
  • To deselect area, the user needs to scroll the list to find it and is very annoying. 
  • Main CTA Search and Reset are hidden.
  • There are no labels on the filters after user select the value.

Discovery - competitors research

Our competitors are using the auto-complete function instead of a drop-down list.

Workshop

We organized a team workshop to find a solution to user’s problems. To get views of the problem from different perspectives we invited colleagues from customer support, marketing, dev, design, and product.

Workshop - ideas

There have been few ideas around auto-complete with creating of tags, use of map and funnel search

Design - iteration 1

We focused on the auto-complete solution to improve current search and leave map as the next step. The first option is to show auto-complete on a new page along with checkboxes.

PROS

  • Allow type of location
  • List of results adjust as typing
  • Full screen allows maximizing space
  • Visibility of CTA

CONS

  • Extra page is needed
  • Need for extra Apply/Cancel buttons
  • Losing context of a search page
  • Not possible to delete tags from search page

Design - iteration 2

The second option is to show auto-complete on the same page with no checkboxes. The tags are displayed inline.

PROS

  • Allow type of location
  • List of results adjust as typing
  • Full screen allows maximizing space
  • Visibility of CTA
  • User stays on the same page

CONS

  • Have to scroll tags to see them all

Design - iteration 3

The third option is to show auto-complete on the same page. The tags are displayed under each other.

PROS

  • Allow type in location
  • List of results adjust as typing
  • Full screen allows to maximise space
  • Visibility of CTA
  • User stays on the same page
  • User can select areas from different cities/counties
  • User can see all selected areas
  • User can easily deselect areas
  • Labels are added

Prototyping

We decided to build a more complex prototype using option 3. Based on framework Jobs to be Done I listed user’s tasks. Around them, we created a story for user testing.

Screen Shot 2018-02-28 at 16.24.08Screen Shot 2018-02-28 at 16.24.08

Team validation / user testing

Each of users was asked to rate the importance of each task. After performing a test on current touch site users were asked to rate satisfaction. Then they performed the same test on the prototype and asked again about satisfaction. I also measured the time that took to complete tasks.

Screen Shot 2018-02-28 at 16.30.24Screen Shot 2018-02-28 at 16.30.24

Results

I tested 8 users form tech, product, sales, customer support. Average results show 50% improved satisfaction on the main two tasks of multi-select and deselect of areas.

Screen Shot 2018-02-28 at 16.30.40Screen Shot 2018-02-28 at 16.30.40