How UX Design Wireframes Solve Creative Problems in edTech

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!