6 Lessons from Designing a Wizard

Hold on, what’s EdTech?

Technology has long been an essential part of education, from the ancient abacus to pocket calculators, from overhead projectors and whiteboards to modern projectors and e-learning. These tools help people learn in simpler, faster, more effective, and cost-efficient ways.

"Education is the most powerful weapon which you can use to change the world" - Nelson Mandela

Nowadays, education technology (EdTech) is an umbrella term covering not only online learning, but a whole suite of digital services and products that help facilitate learning. In other words, EdTech includes all software, hardware, and tools such as online learning applications, curriculum management software, digital textbooks, communications, and administration platforms for students, teachers, and parents.

OK, so what’s a wizard?

When it comes to inputting data in web and mobile applications, the two most common user experience (UX) patterns are forms and wizards. Wizards can be considered mini-applications that guide users through a sequence of forms that they need to complete to accomplish a goal. As the Nielsen Norman Group puts it, „A wizard is a step-by-step process that allows users to input information in a prescribed order and in which subsequent steps may depend on information entered in previous ones.“

Now, what’s the eduwo education finder?

Eduwo’s education finder helps users identify the education program best-suited to their needs. After completing the wizard, the system makes intelligent recommendations based on their educational and professional experiences, needs, and preferences. Think of it as a digital school counselor that asks you specific questions to find your ideal education options.

Here’s a quick peek at some of our work, plus 6 important lessons this project taught us along the way.

1. Make the purpose of the wizard clear

If users don’t understand the purpose of a user interface (such as a wizard) right away, they’ll quickly leave. Therefore, we ensured that users easily comprehend the overall purpose of the education finder. We added the wizard’s title to the navigation panel, which stays there during the entire wizard. Additionally, users see a personal greeting at the beginning of the wizard, as well as the wizard’s purpose.

Once a user has begun the wizard, it’s crucial to keep them engaged by making every step clear. Therefore, we placed a concise title at the top of every step.

2. Logical order of the steps

A wizard consists of multiple steps. By completing a step, a user reaches the next step. As part of designing a wizard, you need to define the optimal step order.

In some cases, the user inputs logically depend on each other, limiting the degree of freedom in which the steps can be ordered. In our case, the user inputs did not have many dependencies and, therefore, could be freely arranged to a large extent. We structured the steps according to two principles.

The first principle was to start with easy questions and slowly progress towards questions requiring more time to answer due to additional selection options, or because users have to think about their needs and desires. The wizard starts by asking for their birth year – nothing users have to think hard about – and moves on to questions about the fields they would like to study. Once users invest some time answering several easy questions, they are less likely to abandon the wizard midway and are more likely to keep going due to the sunk cost bias.

The second principle was to structure questions chronologically along people’s mental timelines. The wizard starts by asking questions about a person’s past, such as the already mentioned birth year, as well as previous qualifications and work experience. It then continues by asking what they are currently doing, such as requesting them to enter their current job title. After that, the wizard wants to learn about their future, such as which field they would like to study, their budget, and ideal start date.

3. Explain why you’re asking for the information

A variety of personal information is required to determine each person’s most suitable education options. However, users are (rightly) cautious about sharing such information, especially on the internet.

Explaining the reason why you’re asking for specific information, especially if there’s a benefit for the user by sharing it, establishes trust and increases their willingness to provide personal details.

4. Keep the cognitive load low

Dividing the inputs and placing them in individual steps, and displaying only the most relevant elements, keeps the user interface light and doesn’t seem overwhelming. However, this segmentation increases the number of wizard steps. Users perceive a wizard with many steps as tedious and time-consuming, causing them to abandon it at the beginning or midway when they lack the feeling of making real progress. There’s a fine line between not overdoing individual steps and, at the same time, keeping the number as low as possible. As an overall goal, we tried to keep the wizard at a maximum of 10 steps and only focus on the most critical questions.

5. Don’t design in isolation

When the task at hand is to design a wizard, you obviously need a UI/UX designer. Involving other specialists is less obvious and therefore often gets neglected. Which leaves a lot of potential off the table.

Teaming up with various experts brought the education finder design to the next level. It also prevented issues that the development team would have encountered later when implementing the design.

Interviewing potential users to understand how they make decisions when choosing education programs, and where current solutions‘ pain points are, led to valuable insights. We used these in the ideation process and later involved potential users again to get feedback on our ideas, with the intent to refine the wizard’s design.

Eduwo’s engineers were involved early on to let us know about all available data that can be used in the wizard. If you omit involving engineers, you risk designing an interface that can’t be implemented because the necessary data is not available at all or not in the form you need for the interface. Moreover, you might even miss an opportunity because you don’t know about some valuable data you could use to build a better wizard.

A UX writer improved the microcopy of the wizard by using words that keep users engaged and verbally guide them through each step of the education finder. They made these changes at the wireframe stage, where it is relatively cheap compared to later stages.

Viewing the product owner not only as a project sponsor but actively involving him proved to be extremely valuable. In addition to informing us about the project’s goals, he shared deep knowledge about the users‘ needs.

6. Invest in a pattern library

Specifically for the education finder, we designed a pattern library with reusable components and interactions, such as buttons, input fields, and navigation elements.

Creating a pattern library costs time and money. But it’s a worthwhile investment: it accelerates the overall design process and subsequent development. A pattern library not only ultimately saves time, but also ensures a consistent user interface, which improves the user experience and makes a product look more professional. Moreover, the created pattern library can be reused later to build further wizards.

In an ideal world, you would create a pattern library before starting the wizard’s design. But the more natural way to create a pattern library is to start with the wizard design and build the library as you go. Whenever you can’t build an interface with existing library elements, you add or extend the required components to the library.

Wrapping up

Here’s a summary of the 6 takeaways from designing the education finder:

1. Ensure that users understand the wizard’s purpose as a whole and its individual steps. Users will abandon the wizard if they don’t understand what they get in return for completing it.
2. Present wizard steps in an order that makes sense for users. Don’t cognitively overwhelm them by starting with hard questions.
3. People are cautious about sharing personal information – explain why you ask for it and what’s in it for them if they provide the information.
4. Don’t overload the wizard’s steps; keep the number below 10.
5. Gather a team of experts — UX/UI designers, potential users, engineers, UX writers, product owners — and you’ll be better equipped to deliver a great product experience.
6. Invest in a pattern library — the returns will be manifold