Clarifying Twenty’s map cards
Overview
I redesigned Twenty’s map cards to make a friend’s status and the available response clearer.
The map card did not clearly explain a friend’s status or how to respond. We redesigned its content and interactions to make the core experience easier to understand.
Client
The Twenty App's purpose was to enable and enrich the product by bringing people together in real life. The app helps people see if their friends are down for something and make it happen.
UI content structure concept with 5W 1H method
Problem
People did not always understand what a map card meant or what they could do with it. Testing showed confusion around status labels, tagged friends, and responses. We needed to make those relationships clearer without adding more steps.
Brainstorm wireframe sketches
We thought it might be helpful to reconsider the card structure we have now. It doesn't quite communicate purpose or value as well as it could.
- Our user testing has pointed out the confusion around card layout statuses.
- Connecting tagged friends to status
- Combining responses to status
High-level interaction screens overview
Solution
I explored several card layouts and focused each one on a single, coherent story: who was involved, what was happening, where, and when. Clearer tagging and response options helped people act on that context.
Silent Twenty phone prototype showing a map and a card for seeing and responding to a friend’s activity.
High-level screen preview
User journey contextual map user card
Result
After release, the data team reviewed how people used the updated status experience.
The reported conversion rates were 10% for the automatically shown status sheet and 32% for a status set by the user.