Annonce responsive wireframing

The biggest classified ads newspaper in Czech Republic went through a much needed website redesign. We were in charge of usability testing (via FatDUX), SEO analysis, wireframing in responsive resolutions (from mobile 320px up to big screens 1330px) and web layouts.

User testing findings

Annonce old homepage

20 people were tested, each taking 60-90 minutes of tasks and questions.

Their overall impression of the site was: old, clunky, text based, hard to use.

Wireframes

It was crucial to solve two things.

  1. Make the site intuitive and easy to use.
    The main goal was to make the inputting of the ads as simple as possible. And make the search/category obvious so everyone can use it and it behaved as expected. The main improvement of the advert input was the automatic categorization based on ad text. Basically as you typed the advert content, the script listened to the text searching for keywords. It then suggested a few of the most logical categories for you to put the ad in. This had a huge improvement on the number of ads added as well as reducing the user drop off during the process.

  2. Posting new ad on Annonce.cz website

    Posting new ad. With automatic category sorting and live preview of the ad.

    Car ad detail

    Car ad detail page including the strip with similar offers.

  3. Design for mobile and tablet users.
    We opted for 5 resolutions: 320px - mobile portrait, 480px - mobile landscape, 768px - tablet portrait, 1024px - tablet landscape, 1330px - desktop with big monitor. Before the redesign it was extremely frustrating using the site on a tablet, let alone a mobile phone. Most people just gave up.
    We had to design 5 different resolutions for each template. That meant more than 250 wireframes. Here are just a few of them.
Annonce homepage in responsive resolutions

Homepage in responsive resolutions.

Capco usability study

Car search results page in responsive resolutions.