Designing a Trip Card

This was originally written in April 2016 — just discovered it in my drafts and figured I might as well hit publish.


Background

One of the products I work on is in a B-B-C model, where we build an app for an insurance company and they sell/provide it to their customers. The app is installed on a customer’s phone and tracks their driving. Their driving is scored and used to give the customer a discount on their car insurance.

In this case, we were working on a major re-design of our standard app while adding in new features and doing a large amount of customization for a very large insurance company. For this reason, that insurance company was sometimes involved in design reviews.


The Trip Card is a brief overview of a trip that, when selected, will take the user to the Trip Details screen, where they can view more information about the trip.

Example of the final design:

Left: Trip Cards | Right: Trip Details

Process

Premise/Goals:

  • We need to display lists of trips in our Logbook (sort of like a news feed), driver profiles, vehicle profiles and other places.
  • Give a snapshot overview of the trip, so that the user can decide whether or not they need to engage further with the trip (see more details, edit trip information, etc.)
  • Each trip should be easily distinguishable from other trips appearing around it.
  • These lists of trips could appear in many different places and may or may not be grouped by date.
  • Trips could be taken by users other than the main policy holder (family member, friends, etc.)
  • Bonus: If possible, it would be good if the design could be reusable for our responsive web app.

Information Architecture:

  • User
  • User’s role (driver/passenger)
  • Vehicle or Mode of Transportation
  • Private trip: Yes/NO
  • Time (start and end)
  • Date
  • Overall Score of the trip
  • Display start and end locations (could be displayed as a map)
  • Distance of the trip
  • Duration of the trip

Sketches:


Initial UI Concepts:


Curveball 1:

At this point there was a lengthy design review with the large insurance company. A person on their end of things didn’t like the bar scores, he wanted circle/donut scores instead. There was more discussion and some politics.

Back to the drawing board…


Curveballs 2 and 3:

2. The same person from the insurance company also didn’t like the maps in the trip cards, he wanted the start and end locations displayed as text.

3. He also had his own team of designers working on wireframes. Their wireframes looked pretty, but:

  • they were lacking a lot of context
  • weren’t accounting for information variants
  • didn’t have the right hierarchy and focus.

To illustrate this, I took their designs, swapped in real data, colors, images, etc. and then allowed them to compare with our designs.

Left: Our design | Middle: Their design with real content | Right: Their wireframe

In the end, for this insurance company, no maps are displayed in the trip cards — like the bottom-left card above.


Bonus:

Here are the initial concepts of what the trip cards might look like in the new responsive web app. The one at the bottom is feeling the best so far. (There were a ton of sketches before these concepts were created, I just don’t have a photo of them)

Like what you read? Give Dave Poore a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.