Using UX Design Prototyping at Every Stage of Your edTech Product

The design prototyping stage for a learning tool is exciting.

You start to envision how students will move through an intuitive user flow to learn new concepts.

Or you plan out how teachers will quickly and easily group their students in your rostering tool.

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 ensure classroom adoption without wasting time and money?

In addition to using clickable prototypes for user testing, prototypes can also help you direct stakeholder feedback, build consensus, and minimize business risks.

That way, you know where to focus your time and budget, so you deliver on the learning goals of your edTech product while improving usability.

After all, nothing should get in the way of a student’s ability to learn—especially not bad UX.

Below, we outline:

• 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, so you can make the biggest impact

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
• provide a sense of what your user experience will be like.

Typically, UX designers make interactive prototypes by using tools like Figma, Marvel, InVision, or Axure to simulate the way a user navigates 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.

Even rapidly built prototypes can help you test your own ideas, build stakeholder consensus, or generate user feedback during user testing.

Because edTech products help students learn, it’s important for your user flows to be just right. Taking the time to prototype at any level is a must.

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.

Can learners understand the concept on the screen? Are they able to provide accurate responses to prompts?

This goes to the heart of content design, too.

Teachers or student can only judge your product’s effectiveness with accurate sample content.

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 collaborate with your content or editorial team to provide close-to-final copy in order to run your user testing sessions effectively.

With real enough content, teachers will better understand the value of your tool and provide you with helpful feedback.

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, rapid prototypes give your team a sense of how your user flows fit together and help your stakeholders adopt a user-centric mindset. 

This process 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.

What to Ask Stakeholders During Prototype Review

A few questions to ask during prototype reviews with your stakeholders include:

• Is the general navigation of the product effective?
• Can navigation 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 our development and engineering team build this design within our timeframe?

It might be difficult to imagine your product without fully working features.

However, 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, so we put a rapid prototype in front of a group of teachers.

During our user interviews, we wanted to understand whether teachers found the reports valuable for their classrooms.

We asked questions like:

• 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.

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.

After you put a prototype in front of stakeholders, you’ll likely move through different phases of product design. These include:

• Iteration and refinement
• Stakeholder presentations & alignment
• Collaborating with content and development teams

Iteration and refinement

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.

Stakeholder presentations and alignment

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.

Collaborating with content and development teams

Meanwhile, your development team might start 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.

Final Thoughts

Hopefully, designing 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!