How to direct users through a multi-step payment process?

Question

I'm trying to develop a payment process for my users. Here are the steps that are required:

1. User views the page that outlines all the awesome features that you get if you pay for the premium service.
2. The hit the 'upgrade' button on this page.
3. They need to be either already logged in or prompted to create a new account.
4. The first need to select an 'event' that they have created in their account or, if one doesn't exist, they need to create a new one.
5. They then need to be directed to the payment form where they input their credit card details.
6. After the payment is successful, we want them to have some instructions about what to do next, and where to go from here.
7. We also want a prompt to invite their friends, as this is a social service (what are your thoughts on inviting friends as part of the payment process?)
8. We then want to redirect them to the part of the website that they have paid for.

So far, I haven't been able to find of/think of a viable pattern to be able to do this. I've seen this pattern on bitbucket which I really like, which steps users through each step of the process:

Does anyone know what this is called or if there are anything anyone has already written that I can go off or should I be looking at some other way to guide users through this process?

Answer 1

This is a "Steps Left" pattern:

The Steps Left pattern is used when it is critical to maintain the user’s focus throughout the process of filling in data to the system. This is for instance critical in web-shops, where the checkout process is often guided by this pattern. In web-shops, the checkout process is the most critical part of the site, as this is the part that captures the customer’s money. The Steps Left pattern provide the user with a great overview of how far in the process the user has gone: it provides a visible end to the process, which the user can aim for.

This pattern is similar of Wizards known from especially desktop applications, which lets the user make his choices step by step.

It is meant to:

This pattern is widely implemented when users have to fill in data in multiple steps. The purpose of this pattern is to:

• Guide users,

• Explain the scope of the process by clearly stating how many steps are needed to complete it,

• Show the user’s current position in the process by visually highlighting the current step.

Source

It is related to the "Wizard" pattern:

Wizard: Lead the user through the interface step by step to do tasks in a prescribed order.

You are designing a UI for a task that is long or complicated, and that will usually be novel for users—not something that they do often or want much fine-grained control over (such as the installation of a software package). You’re reasonably certain that the designer of the UI will know more than the user does about how best to get the task done.

Tasks that seem well suited for this approach tend to be either branched or very long and tedious—they consist of a series of user-made decisions that affect downstream choices. Wizard pattern versus "Steps Left": The user wants to achieve a single goal which consists of multiple dependable sub-tasks.

The Wizard pattern is very similar to the Steps Left pattern. The difference between the two is the focus. Where Steps Left is focused only on explaining the steps of a process, the Wizard pattern is about parting dependable sub-tasks needed to perform a complex goal into separate steps.

The Wizard pattern is also different from the Steps Left pattern in that the steps needed to perform a goal can vary depending on the information inputted in earlier stages. In this way, the Wizard pattern separates itself from being merely an visible aid for the user.

Read the linked resources above for more information about the how/why for each approach and then reflect on how these two approaches may apply to your case.