Case study: Trovit

UX / UI Designer Test2018

Introduction

On March 20, 2018, I was given a UX / UI Designer test by Trovit as part of the recruitment process.

Overview

At Trovit, we simplify the search for flats, cars and work adding ad miles from other pages web in a single search. We are present in more from 50 countries with a volume of about 100 million users a month.

Value Proposal

Our product helps people who want to find a flat, car or work by reducing the search effort and offering the best content based on the user's preferences.

Topics to consider

  • We are an aggregator, so we do not have our own content.
  • The solutions have to be scalable (more than 50 countries).
  • Part of the effort is focused on research to detect new opportunities and ensure that we offer users what they want.
  • We are present on several platforms (web desktop, web mobile, apps native).
  • The solutions at the design level have to be consistent in all the platforms

Exercise

Based on a collection of user feedback:

  1. Detect what problems exist
  2. Define and select which problems are more relevant
  3. Propose a solution at the usability and interface level (only for web mobile).

* We attach the main funnel as a reference but the proposal can be free, include more screens, reduce existing ones, ...

User feedback

"I'm trying to publish a flat for rent, but it will not let me"

"There are ads that have very few photos"

"I am looking for a 3 bedroom apartment for less than € 750"

"I would like to know more information about the attic to rent in Monzón of 140m2 in the mill zone. Thanks and best regards"

"I would like to have a contact phone number where I can call when the ad is shown"

"Why when I go to see an ad, another web page opens with ad information"

"I look for flats to rent and show me flats to buy"

"The ads have nothing to do with the search, I have searched for land and it shows me houses!"

"I would like the location of the property to be included"

"Can you tell me where I see the price of the property? Thank you very much"

"How can I contact the owner"

“The prices are too high. I just need one room.”

“You ask for payment to look for apartments, that is not good.”

“If I am paying a subscription fee - then CANCEL immediately”

"I have not found anything that matches my needs. Mission Impossible."

“Thanks for everything but you guys don't have what I am looking for”

Funnel principal

When a search result is selected, the user is redirected to the corresponding website.

Analysis

I analysed the provided "Funnel principal" focusing on the key issues which stood out in the design of the user interaction.

Analysis of the "Funnel principle"

Support data

The first task was to take the support feedback and complete the UX research applying relevant context. I did this using Excel with the following tasks:

  • I defined the 6 primary persona's for the application
  • I defined the user's behaviour
  • I outlined the root problems
  • Specified which views were failing
  • Estimated the cost of the user's failure
  • Prioritised the issues

Download analysis

Analysis results

Combining the analysis of both the "Funnel principle" and user feedback data, the following became apparent:

  • The search and filtration functions were confusing the users.
  • Once the user had found a result which was of interest to them, the next step (contact) was not made clear to them.
  • The visual display of information (typography) is not following the user's information priorities.

Design

The first task in the design process was to look at the user flow. The "Funnel principle" did not provide a complete interaction map. So I decided to design a basic application flow to allow for the designs and thoughts to be placed inside a predefined system.

User interaction

I designed a number of low/medium fidelity views to show possible user interaction improvements.

Search view

Clear header for navigation and title

The proposed header would focus on two things. Firstly as a consistent area for navigation. Secondly, it would explain where the user is in the flow of the application.

Clear filter

The proposed filter section would focus on two things. Firstly as a definition of the configured filter being applied. Secondly as a way of quickly going back to the filter to make adjustments.

Clearer result

The result displays the required information for the user to make a match selection.

  • The photo will follow the DSLR aspect ratio rules of 3:2
  • The photo will display an icon which shows to the user how many photos have been uploaded to this result. By using an icon with a non-transparent background, the numbers are clear and the icon is more visible.
  • The title "Piso en venta en Vila de Gràcia" is defined and used as the name (elsewhere). The font is bolded to give better typographic context.
  • The price "430,000 €" will use the standard "€" which needs to be used in all views on the application. The font size and color need to be prominent as it is a primary key to the decision-making process (assumption).
  • Location information "[icon] Vila de Gràcia, Barcelona" provides the user with a better understanding of where the result is located.
  • The result attributes e.g. "70 m²" are displayed to provide better matching and aids in comparison of results.

Result view

Clear header for navigation and title

The proposed header would focus on two things. Firstly as a consistent area for navigation. Secondly, it would explain where the user is in the flow of the application.

Clearer photo

  • The photo will follow the DSLR aspect ratio rules of 3:2
  • The photo will display an icon (Larger that the search view) which shows to the user how many photos have been uploaded to this result. By using an icon with a non-transparent background, the numbers are clear and the icon is more visible. Scrolling photos would be ideal as most users prefer visual details (Assumption).

Clearer details

The result displays the required information for the user to make a match selection.

  • Strong title
  • The price "430,000 €" follows the standard "€". The font size and color need to be prominent as it is a primary key to the decision-making process (assumption).
  • Location information "[icon] Vila de Gràcia, Barcelona" provides the user with a better understanding of where the result is located. This could like to the/a map.
  • The result attributes e.g. "70 m²" are displayed to provide better matching. I would like to see more attributes such as airconditioning, as there is not enough key information here.

Hide advertiser comments

The long comments, even though they are important, should not stop the user from reaching the bottom of the view. It should be their choice to go deeper.

Include a map

The importance of location should not be underestimated. As most advertisements do not show a full address, the map can add some further indication that the result is in the right location for the user's requirements.

Request contact (CTA)

The request contact (CTA) is the primary KPI of success (Assumption). Having a clear action which is fixed to the bottom of the screen, the user always has the options to proceed. The prominent color would need to be A/B tested.

"Hover over the screen to see animation"

Summary

The exercise was challenging for a number of reasons.

  • My history with the user base is limited to the small feedback data and my own experience.
  • The limited time available for analysis and design.
  • My desire to keep doing more for the user and the product (I did not want to stop!!!)

I took a very "Lean" approach to the data analysis and UI design, focusing on only the two views provided in the "Funnel principle". The importance of the filter became very clear early on, and I would have liked to spend more time considering a solution. But the filter was clearly outside the scope of this exercise.

As always, as a designer, I would appreciate all the feedback you can give. I really enjoyed the challenge and am looking forward to the next.

Assets

Download analysis Download sketch