Using UX Design Prototyping at Every Stage of Your edTech Product

The design prototyping stage for a learning tool is exciting. You’ve designed enough of the product that you can envision how students will move through an intuitive user flow to learn new concepts, or how teachers will quickly and easily group their students in just a few clicks.

But how do you get from wireframes to a high-fidelity prototype that wows your stakeholders? And how do you make sure that new design ideas will move your products closer to the classroom without wasting time and money?

With UX design prototyping, you’ll develop a series of artifacts to help you at every stage of the design process. From directing stakeholder feedback to guiding user testing, lightweight prototypes improve usability, build consensus, and minimize business risks. 

Most importantly, building prototypes ensures that you’re delivering on the big learning goals of your product. After all, nothing should get in the way of a student’s ability to learn—especially not bad UX.

Below, you’ll find out more about what a UX prototype looks like, why edTech prototypes are different from prototypes for consumer products, and what kind of prototype to use in design meetings or user interviews.

Let’s dive in!

What’s a UX Prototype?

Prototypes can be anything from a hand-drawn sketch of a product’s interface to an interactive user flow. No matter how detailed your prototype is, it should:

• describe the functionality of the product
• demonstrate the relationship between content and design
• and provide a sense of what your user experience will be like.

Typically, UX designers make their prototypes interactive by using tools like Figma, Marvel, InVision, or Axure to simulate the way a user might navigate through a product. For every click or choice you make within your prototype, the results simulate how software will react when the product is fully built.

Because edTech products help students learn, it’s important for your user flows to be just right. Even rapidly built prototypes can help you test your own ideas, build stakeholder consensus, or generate user feedback during user testing, all crucial steps in designing an effective learning tool.

What Makes an edTech Prototype Different?

It’s particularly challenging to design effective edTech prototypes. In addition to ensuring that your users can complete tasks, you must also build prototypes robust enough to capture specific feedback from learners. Do they understand the concept on the screen? Are they able to provide accurate responses?

This goes to the heart of content design, too. After all, only by providing teachers or students with simulated content can they judge your product’s effectiveness. For example, if you’re designing a grouping tool for educators, they’ll need content that accurately and logically reflects student performance in order to complete a grouping task.

When it comes down to it, you can’t ask users to imagine too much. They’re not product designers! You may even need to push your content or editorial team to provide close-to-final copy in order to run your user testing sessions effectively. With close-to-real data, teachers will better understand the value of your tool—whether that’s a specific kind of report or a tool for assessing students.

How Rapid Prototypes Build Stakeholder Consensus

Rapidly built prototypes are lightweight representations of your product’s overall structure. They’re easy to build and won’t require a big investment in your time or resources. Crucially, they give your team a sense of how everything fits together and  help you switch into a user-centric mindset. 

This nuanced understanding of your product is especially important for building stakeholder consensus. After all, your stakeholders aren’t just thinking about how to align with the product team on business needs. They must also consider whether your designs deliver on editorial, content, and engineering needs. 

So forget meandering brainstorming sessions! A rapidly built prototype is the perfect tool for gathering stakeholder input, testing new iterations of your design, and watching your UX strategy take shape in the real world.

A few questions to ask during these conversations include:

• Is the general navigation of the product effective? Can it be simplified? Does product navigation support the overall structure of your product?
• What’s missing from the current design?
• Does it make sense for content to live in that section?
• Can your development and engineering team build this design within your timeframe?

It might be difficult to imagine your product without fully working features, but it’s ultimately more efficient to design innovative products one iteration at a time. By focusing your stakeholder conversations around a rapid prototype, your team will arrive at important product decisions more efficiently. Now that your stakeholders are aligned, your team is free to get creative as you build the next iteration of your learning tool.

When to Use UX Design Prototyping for Early User Feedback

User feedback is much more valuable when users have something to react to. Rather than getting broad feedback during a user interview or helping users generate a “user wish list,” a lightweight prototype directs feedback to specific areas, needs, or product design ideas.

For example, when we tested the Next Step Guided Reading Assessment (NSGRA) tool for Scholastic, we wanted to review report outputs with our users. The finished product is designed to help teachers input assessment data and create student groups, and we brought a black and white prototype of the product to a group of teachers to review.

During the user interviews, we wanted to understand whether teachers found the reports valuable for their classrooms. What other reports were they interested in seeing? How would they use the tool? Could they input data from an assessment to generate a report?

In order to make our feedback session valuable, we needed to generate content for the reports. Without simulating real data or including some interactivity in our prototype, we wouldn’t have received useful feedback from our users. In fact, we learned that some of our initial reporting formats weren’t valuable to teachers at all!

Thanks to this feedback, we learned quickly about user needs and were able to revise our designs. Three months later, we tested the same users with a full wireframe and user interface. We re-organized the data for classrooms, changed the placements of buttons, and added additional details. In this case, a more detailed prototype generated more focused feedback about the reports and the organization of the tool. Our users loved the new approach!

As our experience testing the NSGRA demonstrates, it’s important to be thoughtful about what kind of prototype you can reasonably put in front of users. Detailed questions about feasibility might require a more polished prototype—including realistic content. Lower-fidelity prototypes, on the other hand, may be better suited for early internal feedback or tackling big structural questions. You may even benefit from putting both kinds of prototypes in front of the same group of users at different stages of design.

Shine a Spotlight on Design with Your “Hollywood” Prototype

Unlike rapid prototypes, a “Hollywood” prototype looks like your final product. It’s gussied up with brand colors and a high-fidelity user interface that’s perfect for fine-tuning your final designs—even though it doesn’t have a real back end. 

At Backpack, we typically use these prototypes in four different ways:

1. In user testing with young learners. Thanks to hi-fi designs, it’s very easy for young users to communicate what they think about colors, characters, interactions, and more.
2. In user testing with teachers. With critical content like live data, teachers can experiment with filters to see how their choices affect reporting outcomes.
3. To build an MVP or pilot product. With enough front-end code, your Hollywood prototype becomes an essential stepping stone for the engineering team.
4. To prep the marketing team for launch. Hollywood prototypes are great for helping marketers understand the value prop of your product in a more tangible way. They can use the prototype to develop marketing videos, a full marketing site, or other launch materials.

Whether you use your Hollywood prototype for additional user testing or to collaborate with other teams, this high-fidelity tool is a signal that you’re getting closer than ever to building and launching your learning tool. 

Now What? Advice for After the Prototyping Stage

Because you’ve already gathered internal and stakeholder feedback in earlier prototype stages, you’ve minimized business risks and made more informed design decisions. If you’re still iterating your design, all your well-built prototypes mean that you won’t have to start over from scratch.

Instead, you can work on what you’ve already built to make it stronger.

If you’re still conducting user interviews or user testing, it’s important to present your findings and analysis to your wider stakeholder group for alignment along the way. In order for decision making to be most effective, the entire team must keep your product’s learning goals front and center. Is the product going to be integrated into classrooms? Is it easy enough for young learners to use on their own? Your user’s learning priorities will be a north star as you iterate based on prototype feedback.

Meanwhile, your development team might be building the product to scale as your marketing team tracks the success of their pilot narratives. And your editorial team will be busy ensuring that the content structure fits seamlessly into your designs. While you’re preparing for your learning tool to hit digital shelves, use the prototypes you designed for a team post-mortem: 

• Did you make the prototypes interactive at the right moment? 
• Should you invest in interactivity earlier in the process? 
• Did you have to backtrack too often and waste time or money? 

After all, the more you learn from these inflection moments, the better prepared you’ll be for your next project.

Hopefully, designing both lightweight and high-fidelity prototypes helped speed the entire product development process. More than any other artifact, UX prototypes help designers generate user feedback, align stakeholders, and stave off business risks. Once it’s time for your edTech tool to launch, your team will be more than ready to start the process all over again with a brand new product.

Are you planning to test your next edTech product with students or teachers? Find out how we can help you get the feedback you need with a UX design prototype. Contact us below!