In UX design, wireframes are considered a product “blueprint.” Think about a traditional blueprint for a building. Outlined on that bright blue paper, you might see the footprint of a magnificent house. You’ll get a sense of how big each room is and where all the doors and windows are placed. But you won’t, for example, get a sense of what anything looks like inside the house.

Wireframes are no different. They give product designers a sense of structure, layout, and navigation. User interface (UI) and visual design are the next-to-final touches that provide wireframes with visual appeal. (To continue with our metaphor, they’re more like interior design!)

So don’t be surprised if the wireframes you receive are simple, black and white documents. We all want to get to the slick and fancy designs we’ve come to expect from marketing sites and final edTech products. But if you’re still in the wireframing stage of product design, you’re not there yet.

There are many benefits to working with wireframes before you get to the “interior design” phase of product design, too. They’re often quicker to make than a high-fidelity UI, and they allow designers to describe the overall structure of a product before getting into the time-consuming, “pixel-pushing” polishes of a final deliverable. 

As a stripped-back depiction of structure and interaction, wireframes also help your stakeholders focus in a deep way on functionality and site or product architecture. In fact, you can use UX design wireframes to solve many creative problems in edTech—from capturing big ideas to solving specific user pain points. Below, we’ll show you how!

Helping Your Stakeholders Find Value in Wireframes

Early in the design process, wireframes help multiple teams solve complex creative problems. This can be notoriously difficult for people who aren’t part of visual product teams to understand. 

Whether you’re a product owner or a creative director, it’s never too late to help your stakeholders understand the value of holistic or iterative design. By laying out a pathway for stakeholders to follow, you’ll help stakeholders manage their expectations throughout the process—and find value in the problem solving that happens during the wireframing stage. 

One version of this process might look like:

1. Holding discovery and stakeholder discussions
2. Sketching or co-designing in real time with the product owner
3. Creating a wireframe that reflects the priorities from co-design meetings
4. Turning the wireframe into a clickable prototype
5. Testing your prototype with users or stakeholders
6. Addressing feedback from your user tests or stakeholder interviews
7. Transforming the clickable prototype into a high-fidelity, full color user interface

From this outline, you can see how far away UX design wireframes are from a final UI. But, all too often, there’s pressure on UX designers to speed up visual design decisions or representation early in the process. 

When wireframes become too precious or detailed, everyone on the team risks feeling boxed in to early designs. Throughout the wireframing stage, it’s important to maintain the ability to step back, reassess, and make big changes. 

This flexibility helps your team find more creative solutions. It also helps your stakeholders align on high-level UX strategy before designers incorporate the finishing touches. 

Just imagine asking a poor visual designer to completely overhaul the UI because you’ve identified a new user flow or prioritized a different feature. It would be a huge waste of time, energy, and resources—especially when those decisions can be made using simpler tools like the wireframe!

Using Wireframes to Communicate a “Big Idea”

Early wireframes may begin as sketches and gestures, but they’re crucial for creative problem solving and design thinking. Even if your product owner has already developed a list of feature requirements, wireframes help your entire team define the most important problem to solve.

Wireframes support “big idea” moments further along in product design, too. While designing Listening to Learn, for example, we incorporated realistic draft content into our wireframes in order to communicate our creative solutions to stakeholders. 

Listening to Learn supports teachers as they assess students’ numerical reasoning skills through oral interviews, which meant that even the content in our wireframes needed to be precise and accurate. If we had input “Lorem Ipsum” into our wireframes, stakeholders wouldn’t have been able to make crucial decisions about content sequencing or product strategy. 

By including realistic copy in our wireframes, stakeholders were also able to decide whether the UI served the overall user experience. With real video, real copy, and a realistic content sequence, stakeholders could confirm whether our design decisions and direction would truly help teachers assess student process skills.

Even at the wireframe stage, precision of language can help you refine the user experience. This is especially true in edTech products because UX copy impacts your user’s overall understanding of a learning concept or a pedagogy.

It’s exciting to use wireframes to test out the navigational or content sequencing solutions that arise in early strategic discussions. Because wireframes allow product teams to develop, test, and validate creative ideas quickly, the resulting solutions are always more supportive for users—and more reflective of your edTech brand. After all, if you don’t bring creativity to the initial wireframing stage, you’re not really doing product design!

When Wireframes Unlock New Business Opportunities

UX design wireframes can also unlock new product ideas or help you identify new business opportunities. In fact, recent research from McKinsey suggests that the more you integrate your creative departments with the rest of the company, the stronger your business will be. Design and product are crucially linked to how your brand innovates, uncovers new audiences, and takes advantage of opportunities for growth.

We see this happen all the time as our clients work through ideas in the wireframe stage. During the height of the pandemic, this often meant uncovering opportunities to design for parents in products that primarily served students and teachers. From teacher-parent communication features to parent support videos, edTech brands rushed to serve the needs of a rapidly developing persona.

When viewed as an opportunity for exploration, wireframes allow your product teams to uncover and identify new ideas—and make sure these ideas make sense for your brand or existing edTech products. For example, your team might begin with a basic outline or idea for a new product. You already know what your product needs to do—but you don’t necessarily know how to achieve that outcome. 

In the process of roughing out your feature ideas, you might discover exciting relationships between your existing products, uncover a new audience, or identify ways to tell a more powerful story using student performance data. You might also find ways to meaningfully incorporate learning science and SEL, giving students more agency over their learning goals along the way.

No matter what the opportunity might be, wireframes are the perfect tool for testing out new, broad, or risky design directions. Because wireframes are intentionally not precious, this is a wonderful stage to be experimental and explore out-of-the-box thinking that can lead to unexpected results. 

Even if you don’t identify your final direction, your team will bring something worthwhile to the solution. After all, you can always refine your designs later, as you continue to discuss the realities of executing this direction with your product stakeholders. Without the freedom of the wireframing stage, however, you would have never discovered your exciting idea in the first place!

Using Wireframes to Solve Specific Challenges or User Pain Points

If your users are currently struggling with specific elements of your UI, you might not have a design problem on your hands. You might have a larger structural issue to solve. Stepping back and using wireframes to solve the issue is the perfect opportunity to examine why your UI no longer serves user needs.

Instead of pushing pixels around, take the time to reimagine your user flow. While this might sound overwhelming at first, UX design wireframes can help you tackle user flow issues in smaller, more refined ways, too. What if a specific user interaction happens at the level of navigation, instead of with a button? Do you need a full-screen module, or a directed onboarding experience?

Structural challenges can also arise over time because the scale of your product has changed since launch. For example, perhaps you launched a professional development product for teachers with 10 lessons or modules. A year later, you have 50 or 60 lessons to contend with. Now, you need UX features like pagination, search, and filtering.

If you try to address this need in your current design files, you might make an incremental improvement. But if you back all the way up to wires, you’ll likely identify a better UX pattern for your new needs—and choose a solution that can accommodate future growth. 

No matter what kind of design challenge you’re solving for, wireframes help both designers and stakeholders identify and align on priorities. Rather than focusing intently on design specifics, you can get to the root of the problem and find the best possible solution for your brand—and for your users.

Are you about to kick off a new phase of design work for your edTech product? Contact us below to find out how we can help!

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!