Experience Design: CarTrawler: Wire Flow

Summary

A wire flow is a diagram that combines wireframes and user flow charts. They can communicate to stakeholders and team members the flow between screens and the visual design of screens, when there are few pages that change dynamically. How a wire flow was used as a UX deliverable to communicate with CarTrawler's stakeholders is explored below.

CarTrawler wire flow
A wire flow diagram showing actual screens from the app. Arrows indicate interactions between screens, information is updated contextually depending on the users' path

Introduction

A wireframe is used to show screen layouts and a user flow chart displays complex work flows, user tasks and represents the interactions between screens.

CarTrawler connects their customers with ground transportation options. CarTrawler most frequently appears on travel sites after flights are booked. They allow customers to reserve a hire car as part of the booking process. There were usability issues with their current booking process as the steps were not clear to users. I was tasked with devising a solution that best solved this problem.

Before spending time working on the visual design and to get buy in from key stakeholders, the solution needed to be presented in an easily understandable format.

A wire flow was the most appropriate deliverable for CarTrawler's stakeholders and team members as:

  • The majority of the screens did not change radically as the users progressed through the task
  • Stakeholders can understand the relationship between interactions by seeing actual screens and not abstract shapes
  • Booking information changes contextually, depending on the path taken by the user

Wire flows combine the best of both worlds (wireframe & user flow); they provide context by showing the actual screens users will see when completing tasks and document complex work flows, branching of paths or steps that occur when users interact with the system.

Diagnosing the Problem

The problem with CarTrawler's current booking flow is that it's not flexible enough to meet users needs. It doesn't give users' the freedom to complete their tasks. Users would like the ability to add extras, like a sat nav or an additional driver. It's also not clear what the system is doing, the flow needs to show the user the price of any additional extras, along with the cost of their flights.

The redesign of the current flow will address these problems, the wire flow will demonstrate how they are resolved and clearly show the path the user can take while completing their task.

User goal: Book flights and hire a car for their holiday

User tasks: 1. Book flights, 2. Choose a car, 3. Payment

Wire flow

Enlarged version of step 4 is shown below

CarTrawler wire flow
Step 4 of the redesigned flow, address the problems with the old design. The new design is much more flexible, allowing users to add or remove extras with ease. The price is much more clearly shown, both in the top right corner of the app and on the “Book Car” button

Conclusion

Wire flows are useful for collaboration with key stakeholders, as they show each screen in the process and also shown the interaction between screens depending on the path the user takes. They're also good for ideation, for teams to think through user work flows and tasks and to think thoroughly about each step in the process so nothing gets over looked or left out.