Added map cards to help users make decisions better and faster

Intro

VIDI’s survey finder had two views: a list and a map.

The list was the “complete” one, with full survey cards showing pay, deadline and address. The map showed only pins. To learn anything about a survey, you had to tap a pin and leave the map.

So we assumed most people used the list. Firebase showed they didn’t. Many preferred the map, even though it told them almost nothing.

Instead of pushing users back to the list, we brought the list to them.

Problems

Users preferred the map, but it showed only pins: no pay, deadline or details without leaving the view.

Solution

Added survey cards directly on the map, one at a time, combining location with the key details from the list.

Results

A map view designed around real behavior, that works at large font sizes and doubles as a testing ground for the main card.

After: the map with a card showing the selected survey's details over the pins

Before: the map with pins only, no survey details

before after

fig 1. the map with pins only vs. pins with a survey card, drag to compare

Setting the scene

The least informative view was the most used one.

Researchers choose surveys largely by place: what’s close, what’s on their way, what’s in a neighborhood they know. The map answered that question instantly. It just couldn’t answer the next one: is this survey worth it?

That meant constant back and forth: tap a pin, open the details, go back, tap another pin.

Map with survey pins, tapping one — fig 2. the old flow: every comparison meant leaving the map

Survey details screen — fig 2. the old flow: every comparison meant leaving the map

Design challenge

Product decision

One card at a time, on top of the map.

We followed a pattern users already knew from delivery apps like Uber Eats: the map stays in view, and the selected location shows a card with what matters for the decision.

The list view stayed exactly as it was. We added to the map; we didn’t take anything away.

The card

Two things changed.

We kept as much of the original list card as possible, with a different hierarchy for the map context. This also gave us a low-risk way to test a new card hierarchy before touching the original.

Added: a photo of the storefront. Surveys often happen in malls or busy streets with several stores of the same brand nearby. The photo helps researchers find the right location before they even leave home.

The whole card is tappable, with an arrow in the corner

Removed: the CTA button. The whole card became tappable, freeing up space on a small surface. We kept the arrow from the original button in the top corner as a subtle cue that the card opens.

Designing for large fonts

A card that still works at any font size.

Many VIDI researchers are older and use large system fonts or screen zoom. A card floating over a map is especially fragile in those conditions: it can grow, cover the pins and break the layout.

We adapted the card so it kept working at large font sizes and zoom levels, without hiding the map that made it useful in the first place.

fig 3. the map card at the default font size vs. a large system font

Map with the survey card at the default font size — fig 3. the map card at the default font size vs. a large system font

What I’d measure next

Shipped on observed behavior.

We shipped based on observed behavior, without a dedicated success metric. If I were to evaluate this today, I’d look at:

01
Surveys accepted from the map vs. from the list
02
Pin-to-details round trips, which the cards should reduce
03
Time from opening the finder to accepting a survey

Learnings

Pay attention to what users choose, not just to what you designed for them.

The map was never meant to be the main view. Users decided it was, and the best move was to follow them.

Next project

A rebuilt profile area that gave skipped data a second chance

Moving optional profile details out of sign-up and showing users why completing them matters.

check it out