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.
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:
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.
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
Enlarged version of step 4 is shown below
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.