All Posts in

July 22, 2020 - No Comments!

Are Your Products Remote Learning-Ready?

The data is in.

According to The New York Times, the last four months of at-home learning have only highlighted the steep divides in American education.

"New research suggests that by September, most students will have fallen behind where they would have been if they had stayed in classrooms, with some losing the equivalent of a full school year’s worth of academic gains," writes national correspondent Dana Goldstein.

We've always known that the most important dynamic in the classroom is the relationship between teachers and students. While edTech isn't the solution to the systemic inequality exacerbated by at-home learning, it can give teachers better tools for reaching students at home, collecting work created offline, and tracking student performance.

When edTech designers understand the technological ecosystem of teachers and students, we are better able to identify the challenges of unevenly distributed technology and anticipate the unpredictability of learning at home. We can design remote learning solutions that are lightweight and easy to use, with robust online and offline capabilities.

What's a Remote-Learning Ready Tool?

When we say a tool is "remote-learning ready," we're not talking about self-guided learning tools students use on their own.

"Remote-learning ready" tools work effectively, even with uneven infrastructure. They provide teachers with features that augment how students interact in real classrooms, helping students to develop SEL skills and engage directly with content and concepts. "Remote-learning ready" tools are interactive and adaptive tools for teachers and students alike.

Whether you're redesigning tools for fall or creating new tools that are remote-learning ready right out of the box, here's why you should leverage features that support the challenges of teachers and students learning from home.

Break through Social Isolation and Encourage Collaboration with SEL & Collaborative Features

Tools with collaborative features that promote social-emotional growth are now more important than ever. Because learners have been physically separated from their peers and their teachers, they may feel more isolated or lose touch with the collaborative elements that improve academic outcomes through SEL.

By creating remote-learning ready tools that allow teachers and students to deepen their relationships, you drive engagement and ensure greater efficacy. SEL and collaborative features are crucial for developing peer relationships, too.

Whether students post work to a class feed or teachers encourage peer feedback, learning tools that foster discussion and create a rich, social community around subject matter inspire both meaningful conversations and learning. SEL and collaborative features also nurture an online culture of kindness, create more respectful and effective learning environments, and foster a sense of good digital citizenship.

In Backpack Interactive's work for Scholastic's Literacy Pro, for example, students have the opportunity to review books and communicate directly with their teachers. This feedback process gives students agency over their work and reading goals. Because this is an independent reading program, the stakes are also much lower than graded assignments and students are empowered to be more candid

The digital environment of Literacy Pro encourages this openness and facilitates student-teacher connection. We created an interactive scaffolding around each book, so teachers can do more than assign students a book they think the student will enjoy. They can also create a one-on-one book club, interact with reviews, and help students foster a love of reading.

Our goal as edTech designers is to help teachers develop well-rounded students who can collaborate in other settings. When you create ways for students to talk and resolve conflict or develop systems for learners to monitor and reflect on their own progress, you design better, more effective SEL tools. These better, more effective SEL tools just happen to facilitate the interactions teachers and students need most during at-home learning.

Help Teachers Explain Complex Concepts from Afar with Interactive Features

Our approach to designing tools for the classroom has always been about creating better tools for teachers. Now that students and teachers are no longer in the classroom together, learning tools need to facilitate independent and asynchronous work more than ever before.

Teachers are still under the same pressure to deliver results remotely, and they need tools to help explain complex, advanced concepts — even when the class isn't meeting on Zoom. How can we make sure that remote learning tools still feel supportive? How can we facilitate more engagement between students and their subject matter, between students and their peers, and between students and their teachers?

While interactive games can be a good way for students to engage with and master content, teachers also need tools that make gameplay useful in the context of the classroom. Through our work for Mission U.S., we created teacher tools that help educators use the suite of history games more effectively and drive results in the classroom.

Whether you're designing a game or an interactive science experiment, all interactive tools for students should consider the instructional needs of the teacher. When you provide clear pathways for using materials in—and out—of the classroom, you facilitate higher student engagement—and provide tools for more meaningful instruction.

Direct Teacher Support and Meet Individual Student Needs with Adaptive Features

Without daily student-teacher interactions in the classroom, it's more difficult for teachers to assess a student's needs, redirect, or reteach as needed. In the absence of direct teacher-student interaction, edTech can provide adaptive tools for teachers that identify student trends and direct attention and support. AI-driven adaptive features might help teachers give student feedback or even prompt a teacher-parent phone call.

edTech designers can also use adaptive features to help students working at different speeds. Adaptive features provide more support for students who need it and more independence for the students who can handle it.

When we worked with Amplify to design the UI for their vocabulary game "Best Buddy," we created an interface that accommodated complexity. As students master vocabulary words, "Best Buddy" adapts to different levels of difficulty. Vocab words become more complex and nuanced as students fine-tune their understandings of definitions and help characters in the game. By designing a UI that combines two interactive patterns, content mastery and SEL, we were able to create a complex learning tool with adaptive features.

Even when adaptive learning software is used in physical classrooms, it's intended to meet students where they are. With the right framework, they can even promote SEL growth. After all, students who need more time benefit from interactions with students who are further along, and students who work more quickly benefit from considering the needs and challenges of their peers.

Asynchronous, adaptive features provide just enough of a challenge to keep students motivated and engaged by working at their own pace. During remote learning, adaptive features facilitate just the right amount of independence and teacher support.

Meet Existing User Needs with Mobile-Ready Professional Learning

Even before COVID-19 closed schools, surveys and user testing revealed that teachers want to engage with professional learning content on mobile devices. From an at-home learning standpoint, edTech designers have new opportunities to make high-quality products that fulfill existing needs for mobile-ready professional learning.

Teacher professional development often depends on offline tools, like binders and other paper-based resources. By leveraging technology to make a dynamic, interactive course, you may be able to engage teachers more effectively—and reach them on the devices they use most often. After all, interactive materials shouldn't just be reserved for students!

For example, when we designed the new "Healthy Kids, Healthy Futures" website for Nemours Health Group, we knew early childhood care providers would review the site on their phones. We designed the site's excellent learning content, including quizzes and action plans, by breaking up content into smaller, skimmable sections. We also introduced "show-hide" features that would limit scrolling on mobile devices.

If your revenue is tied to teacher professional development, especially in-person courses or seminars, well-designed online training programs may help make up for lost revenue during social distancing. The more robust, smart, and clear your pathways for digital instruction, the more you'll be able to leverage learning content that helps teachers fulfill their professional goals.

June 18, 2020 - No Comments!

Parents Are edTech’s Next Big Users

We were 10 minutes into a Zoom call with my 13-year-old daughter's school when her teacher asked us for feedback on their remote learning efforts. Even though I've been actively involved in my daughter's education, it wasn't until afterward that I reflected on how different it felt to be asked my opinion about the way in which she was being taught through technology.

As someone who's spent their career working in edTech, I could have critiqued the digital platforms her school chose, or suggested her teachers use even more of the amazing learning content I know is out there. But most of my feedback was about how to leverage technology to build more powerful social interactions between my daughter, her teacher, and her peers. How to go beyond Zoom calls and video lectures to find tools that foster authentic team dynamics, promote critical thinking in a social context, and allow for digital citizenship. At the end of the day, my daughter was still getting more out of her relationships with her teacher and her peers than any one edTech tool.

As we ended the call, I saw heads nodding. I felt heard. In the eyes of the school, I had switched from occasional IT help for my daughter to an authority figure on future technology decisions. I realized that my role as a parent could have a real influence not only on what technology platforms the school might adopt in the future, but also the ways in which those tools might be used.

These same kinds of conversations are happening all across the country. Suddenly, parents are poised to become edTech's next big user group.

Parents and Technology: How to Reconsider Parent Personas in the Age of At-Home Learning

If you've always thought of your buyer as a school administrator, the realities of the COVID-19 pandemic are likely making you reconsider your product's audience. As more parents take on the role of an at-home educator, they have also become potential buyers of learning technology. This makes parents new — and non-traditional — edTech influencers.

Parents who are deeply involved in their child's education care about the technology teachers utilize in their at-home learning plans. They want to know how specific edTech tools work and which ones fit their child's needs. Parents are also savvy enough to lobby for technology designed to teach their children 21st-century skills. They want their children to cultivate an early love of reading, become better writers, and learn how to coordinate on team projects. They'll look for the right learning tools to supplement their child's instruction in order to make that happen.

We also expect parents to become stronger advocates for specific learning tools, which have become part of the overall experience of at-home learning. As parents seek out and share the best solutions for at-home learning with one another, parent networks have become non-traditional edTech influencers.

This sea-change in edTech's target markets will likely affect your marketing team's efforts first. As teams determine which product features resonate with parents juggling at-home learning with work-from-home tasks, messaging will shift. But how should you rethink feature design, or upgrade your existing products, to meet the new needs of parents?

Here are four areas where you can focus your attention and meet the needs of edTech's next big user — parents.

Emphasize Family Communication Features

Our research indicates that much of learning happens in the context of strong student-teacher relationships. Unfortunately, the new structures of at-home learning have drastically challenged those relationships. Email, messaging, and video calls just don't build strong teacher-student relationships in the way that real one-to-one time in the classroom does.

In order to help teachers maintain their voice, infuse their personality, and remain effective educators, the communication features in your product need to drive engagement for students and families. How many different ways can you introduce interactivity within your product? How do your communication features help teachers create clear expectations for both learners and family members?

At-home learning requires a lot of flexibility from teachers, parents, and students. In order for products to offer users this flexibility, interactive features should be as conversational as possible. Teachers need feedback, parents need to be heard, and students need clear pathways to assignments and other teacher-student or student-student interactions. Conversational features are also at the heart of SEL learning techniques and can further strengthen relationships between parents and teachers.

Here are a few conversational family communication features to consider:

  • Open message boards
  • Threaded discussion streams for assignments
  • Office hours for one-to-one instruction or parent-student discussions
  • Quick, lightweight responses, like emojis or social media-esque interactions
  • Dynamic sharing features

The more edTech products iterate on family communications features at the platform level, the easier it will be to serve the needs of all your users — including parents.

Revisit Onboarding and Integration Needs for Your Products

You may already be used to designing different onboarding experiences for different users. Teachers, for example, may not be as technologically savvy as young students, who have a different facility with software. Now, you'll need to revisit your onboarding and integration needs to address the parent persona, too.

Most often, students are the end users of edTech products, and parents serve as a facilitator user — the user who helps set up accounts and profiles for your student persona. Parent personas may lack the pedagogical context teachers have come to expect from products, but at-home learning means parents now need that information, too.

Given the parent persona's role in facilitating student interaction, your onboarding process can provide even more context for how your product fits into the curriculum and how it can be used as a tool for student learning. Your product may integrate with Google Classroom, SeeSaw, or other popular edTech platforms. If so, help your parent persona understand what those integrations are, how they work, and why you've included them.

Here are a few other solutions to consider:

  • Leverage common UX patterns to help parents understand how your product works
  • Borrow from the vocabulary of the classroom to clarify user interactions ( consider, for example, phrases like, "turn the work in" or "share" vs. "mark as complete")
  • Consider the full constellation of learning software your users depend on
  • Design using a single sign-on whenever possible

Remember: your product doesn't have to be everything to everyone. In fact, when you avoid designing proprietary platforms for existing solutions, like word processing and file-sharing, your tool becomes more useful for teachers and parents.

Now is the perfect time to revisit whether parent personas have the right context for understanding your tool — and how you can help them navigate common challenges within your software. The more you improve the UX of your product, the more you'll be able to address the concerns of this emerging stakeholder persona.

Embrace Mobile-Ready Design

Even if students have their own desktop to complete school work at home, their primary point-of-contact for most edTech software will be through a parent's mobile device.

Backpack's user research has shown both teachers and administrators rely heavily on mobile-ready software. There's enough anecdotal evidence to suggest parents and students have similar technology needs. Just as teachers want to plan for class or do professional development on their phones, parents may want or need to watch help videos about your software or prepare for their day of at-home learning.

When parents are uncertain about how edTech tools work, it adds a layer of frustration or apprehension for students who are already experiencing heightened emotions during at-home learning. Mobile-ready designs with developed parent personas give parents more flexibility as they preview lessons or prepare for helping their children navigate tasks.

You could also consider:

  • Allowing parent personas to preview or pre-use your tools in order to explain tasks and teacher expectations to their children
  • Introducing planning tools or video content aimed specifically at parents
  • Ensuring family communications tools are optimized for mobile experiences
  • Designing with asynchronous at-home learning and work-from-home schedules in mind
  • Making mobile-ready software as robust as desktop software to ensure accessibility for all students

Ultimately, mobile-optimized design ensures better family communication, more flexibility for parents, and eliminates barriers to access for families who may not have desktops available for their students. As at-home learning continues, parents will expect — and advocate for — edTech solutions that are easy to use on multiple devices.

Eliminate Barriers to Access

Our user research has shown that even tech-savvy parents are lost as they attempt to navigate Google Classroom and other online learning platforms. Even well-designed products can make it unintentionally difficult for parents and students to read and submit assignments in one place. When points of interaction are disconnected from source material or assignments, confusion reigns.

We believe that edTech has a responsibility to improve UX whenever possible. Now is the time to survey users and re-evaluate your product's ease-of-use for personas who don't have a background in tech. Whether or not it's fair, a parent's negative experience with technology may reflect on a teacher's ability to use tech effectively.

Other common barriers to access include:

  • Unreliable internet
  • Manual saving functions
  • High-res designs
  • Desktop-only design

To ensure ease-of-use, consider adding functions like autosave to prevent the loss of information or working offline to allow users to make progress if their internet blips out. Take extra steps to ensure that users can easily differentiate between accounts, since parents may have multiple children signed into one computer or device.

Are You Ready to Roll Out edTech Tools to Parents?

The time of the parent persona is here! It's up to us to design the best experiences possible for our newest power-user — and improve UX for tools that facilitate learning beyond the classroom.

Even though uncertainties about at-home learning remain, we expect to see parents continue to influence the kinds of software schools use and adopt. At-home learning has made parents even more fluent in the kinds of features that make products work outside of the classroom. This new knowledge will translate into more advocacy for software that addresses specific student needs, too.

Schools and administrative buyers will also want to better understand the parent persona as they navigate licensing decisions for at-home learning. They'll look to edTech companies to identify learning software that checks all the boxes.

Does yours?

May 15, 2020 - No Comments!

Where Does Your edTech Product Fall on the UX Threshold?

If you've ever tried to sign your child up for a PlayStation or Nintendo Switch account, you know how complicated digital experiences can be. When it comes to popular gaming sites, most tech-savvy parents are willing to put up with less-than-ideal UX just to make their children happy.

For every digital experience, there's a UX threshold. When the digital experience is so frustrating that the user no longer finds value in the product, the brand has pushed too aggressively against the limits of the UX threshold.

Some brands with particularly loyal users might be "lucky" enough to stop investing in better UX. But if a company has decided that its profitable threshold allows for a poor UX, do they have any obligation to improve? Beyond lost revenue, is there ever a moral obligation to make their products more user-friendly?

If you're designing edTech products, the point at which your user becomes frustrated or stymied by a complicated UX is even more important to gauge. After all, whether you're working for a nonprofit company or a well-established educational brand, good UX in edTech becomes an issue of access and equity.

Your users need products to pass a class, learn a critical skill, or pass a standardized test in order to attend college. What happens if a teacher experiences a high level of frustration when trying to use your product in the classroom? Or your user is a parent who isn't technologically savvy? Or an administrator desperately needs your technology to improve outcomes for their school?

Because the stakes are so much higher in our industry, we should be motivated to design tools that do more than meet our bottom line. And that means the UX for even the most complex learning tools needs to be as streamlined and accessible as possible.

Ditching Highly Proprietary Design Patterns: Reducing the UX Threshold for Complex Administrative Tasks

It might be easy to improve on bad UX, but making good UX great requires complex problem-solving from your UX team.

In edTech, the administrative aspects of learning products often have the most technical complexity. By leveraging common UX patterns, you'll lower your UX threshold and make your product something that meets teachers and students where they are.

Administrative complexity looks different depending on your primary user. For teachers, administrative complexity may involve setting up the software for the learning product, creating user profiles, rostering students, or managing multiple staff users. For administrators and IT professionals, it might mean navigating multiple screens, connecting to outside systems, or learning how to share data across platforms. And for parents, administrative complexity requires learning how to sign up their child as the product's primary user. It might also mean taking advantage of available learning outcomes data in order to make informed decisions about their child's education.

In order to lower the UX threshold for your product, leverage existing UX patterns that won't require users to learn a new, proprietary system or go to multiple places to accomplish a simple task. Lowering your UX threshold encourages your user to engage with the task at hand, which leads to higher completion rates within your product. It also helps shift the user's mindset from tense to relaxed. A tense user will tend to have a lower frustration threshold for completing tasks.

Even if you're using well-established UX patterns, there's plenty you can do to provide a fresh and delightful experience for your user. Micro copywriting, visual design, and other touches provide your experience with a unique look and feel without causing cognitive overload.

The more you can do to meet schools, teachers, and students where they are, the more relevant your designs will be. You'll create learning products that solve problems and integrate with a teacher's day-to-day technology. And you'll design tools that enhance and extend what administrators are already using — all without adding complexity for your users.

Leveraging Interactive Complexity to Help Students Learn

In edTech, designing a product with interactive complexity becomes even more important. We have an obligation to consider how to make interactive teaching moments rather than static ones. We must strive to work with subject matter experts to determine how to break a topic down, so students work with material in a rich way.

Most learning products demand a high level of interactive complexity from UX designers. Ideally, students are able to learn new concepts or skills as they move through an experience and interact with it. However, this level of interactivity adds to a product's UX complexity, and UX designers often remove interactivity from the moment of instruction or assessment — just when students need it most.

For example, a learning product with interactive science experiments might have two separate interfaces. In one interface, students are introduced to scientific concepts illustrated by the science experiments. In another, they might be encouraged to interact with the science experiment itself.

However, if you separate the interactive interface from the problem students are trying to solve, you'll wind up creating a higher barrier to learning. You'll design a cognitively disjointed experience, which isn't how students experience learning in the real world. Students will end up learning how to use your product — instead of learning a new concept.

While it may seem counter-intuitive, leveraging interactive complexity actually requires you to simplify the UX for your product and reduce its UX threshold. The more you simplify your UX, the more likely you are to make a product that showcases important concepts and engages the students who need your product to learn.

The ROI of Investing in Great UX by Reducing Your UX Threshold

Even if you're building a complex product, there's real ROI to investing in UX. Not only do you help teachers, administrators, and parents onboard and navigate your product quickly, but you also improve learning for students by connecting new concepts and skills to interactive UX.

Concrete design requires both the administrative and interactive parts of a product to work together in concert, even when they're individually complex. When you use an approach like concrete design, you make a product that's more likely to be bought or adopted. Teachers and students respond to a product that's easier and more fun to use, increasing overall engagement with your product.

You also reduce cognitive load within the product, which means less training time for teachers and less onboarding for students. While onboarding for any product is necessary, there are downsides to a long, drawn-out adoption process. If your onboarding strategy depends too heavily on textual explanations, for example, you introduce more barriers to students and teachers with learning differences.

When you reduce training and onboarding needs for your product, not only are you building a more equitable product, but you're also shifting resource allocation within your budget. Suddenly, you don't have to spend a large chunk of your project budget on designing onboarding tools. Instead, you're able to focus those resources on developing product features and creating outstanding visual design.

When you build a tool that's more intuitive to use, you directly impact your bottom line. Improving UX leads to more revenue streams as you widen your market and roll out a product that's more accessible and easier to use. When you give potential clients a demonstration of your intuitive product, your sales team has to do less explaining — and the product begins to sell itself.

Why the edTech Industry Should Care About Making Good UX Even Better

Like you, we care about designing intuitive edTech products that solve real problems and are adopted widely by schools and school districts. But we also recognize that the edTech industry has different users and goals than consumer tech.

The stakes for edTech products are much higher. Good UX can be the difference between a student learning a new concept and struggling to master it. It can also mean the difference between a product that all students can use and a product that excludes students with learning disabilities.

Because the stakes for our products are so high, we have a moral obligation to identify the point at which bad UX creates barriers to success — and push ourselves to make good UX even better.

April 3, 2020 - No Comments!

Using Wireframes to Power Your UX Design Strategy

Product wireframes are one of the first strategic milestones of the design process. All stakeholders depend on them, including product owners, developers, and front-end design teams.

When designed intentionally, wireframes facilitate important decisions early in the UX process. They provide a visual record of discussions about big-picture product goals, user flows, and technical requirements.

At Backpack, we use wireframes throughout the iteration process to lead stakeholders through strategic conversations before moving to visual design. Using clickable wireframes and prototypes also helps us establish our workflow with technology teams and developers early in the process.

Here's a glimpse into the process we use with clients to create an ideal workflow for major stakeholders and other teammates.

How Wireframes Guide Stakeholders through Strategic Decision-Making

For product stakeholders, wireframes facilitate strategic discussions about big-picture needs and product goals. They reflect how the product should be organized and give stakeholders the opportunity to address whether your UX team has captured the most important features. Does your product need all the features represented in the first iteration of the wireframe? Or can your team simplify?

By sharing wireframes with stakeholders early in the UX planning process, you streamline top-down decision-making that benefits both your users and the product development team. Because wireframes reflect the implications of product design and UX decision-making, this tool helps stakeholders better understand the needs and expectations of your users. Has your UX team accurately reflected each user flow in the wireframe? Are features where your users expect to find them? Has your UX team named features in an understandable way? Has the team found a way around information overload?

At Backpack, we feel it's important to use wireframes to help clients envision key elements of each user flow and see how they'll work. We mock-up ideal flows quickly in clickable wireframes. By grouping information realistically for the user, stakeholders are able to imagine user experience prior to testing. This process also helps stakeholders anticipate content needs, including the photos, multimedia content, and other resources that will create the best possible user experience within your product.

As we designed the Literacy Pro app for Scholastic, wireframe iterations facilitated important top-level discussions about micro user flows for both teachers and students. How would teachers add and assign assessments? How would students access and take those reading assessments?

Using clickable wireframes ensured that each stakeholder discussion centered on user personas and the contextual flow of interactions. Because clickable wireframes reinforce the needs and expectations of the user, this iterative process set us up for success by the time we tested the product with Scholastic's users. After testing, we could iterate even more efficiently.

How Annotated Wireframes Facilitate Technology Discussions with Development Teams

Ideally, annotated wireframes help UX teams communicate more effectively with developers. This collaborative method helps your UX team think through the technical issues of each screen and gives your development team a chance to communicate when a design decision might be technically burdensome.

Facilitating these discussions early in the design process eases work-flow challenges — especially when you're managing multiple teams and vendors. Before they're ever given design files, your developers are able to structure the back end and hit the ground running once designs are confirmed.

Backpack uses wireframes early in the design process to communicate with developers about complex technical needs. We give developers every opportunity to vet the logic of the UI for primary user flows, typical interactions, and edge cases. Wireframes are an excellent tool for these teams to spot potential problems with back end logic or technical services before the product is built.

This was especially true for our work on Scholastic's Next Step Guided Reading Assessment, or NSGRA. This software encourages teachers to group students by reading level using a visual drag and drop interface. Visual design indicates to teachers that the UI is clickable and moveable, while the back end is designed to quickly accommodate any changes teachers make with just one click.

Our development team helped us think through the complexity of this design decision by annotating early wireframes. They asked smart questions about the interface's logic from a visual standpoint, as well as the implications visual design and UI had for data and reporting. Throughout this iterative process, our development team's input helped the design team create a clear and visually compelling UI and clarify software interdependencies. Without input from the developers early in the process, it would have been more difficult to arrive at the most intuitive solution for users or anticipate technology needs from the beginning.

How Wireframes Establish Style and Front-End Design Decisions

Front-end design teams depend on wireframes to establish style and design for the entire product. Approved wireframes serve as their road map for compelling visual design. When, where, and how will you display product features? Should you use a drop-down menu or a form? A complex calendar or a to-do list? Does your product need a dashboard?

As a creative firm focused on strategy, Backpack offers clients a design-led process. Visual design brings wireframes to life, illustrating design decisions and contextualizing content needs in a rich and nuanced way. Wireframes are also an important tool for communicating with our front-end development teams. Front-end developers need to understand the specific functionality of UI, as well as a product's logic. One of the only ways to accomplish this is to check interactions within wireframes and pass annotations back and forth between teams.

Our recent client project, the Wharton School of Business "Pivot or Perish" simulation, spurred an intensive back-and-forth with our front-end developers. While the simulation itself required us to design a small number of screens, the interface within those screens was highly transactional. This means that complex student learning happens within nuanced user interactions.

Communicating user interactions effectively to our clients demanded a hard-working wireframe. In order to ensure our front-development team also understood each interaction, we documented and wireframed each action separately and collected feedback on the logic of our UI.

During the visual design process, we defined the visual vocabulary of the product through specific color and shape palettes. Because we had already determined interactive elements throughout the wireframe stage, Backpack could successfully design user interactions that only made sense from a visual design perspective.

Ultimately, the extensive wireframing process for this product ensured that every team member — including our client, front-end developers, and Backpack's visual designers — was on the same page. By the time we arrived at the visual design stage, everyone was aligned on product functionality, and there were fewer visual design strategy issues to navigate together.

Testing User Flows and Capturing User Feedback in Real-Time

Wireframes also facilitate important discussions with your users about product categories and logic. Once your wireframes are connected together into a clickable prototype, you can test designs and capture feedback from users who depend on your product to solve a problem. Do your design decisions work? Can your users find expected features or design elements within your interface? Is information organized in a clear, understandable way?

Backpack regularly shares clickable prototypes with users to observe how they complete individual tasks. We analyze user interactions, document the challenges users face, and develop new strategies for incorporating user feedback.

During the product design process for the NSGRA, we tested clickable wireframes with 20 teachers. We went into the interview process knowing that users already faced very specific pain points. The product requires a lot of data entry, and we worked hard to improve that workflow to make it as quick and painless as possible.

We used Axure, a robust prototyping tool that allows for "WYSIWYG" programming, to show teachers specific micro-interactions within the NSGRA. They added hypothetical student data into complex fields and saw how the UI changed from screen to screen in real time. By interviewing teachers as they completed tasks, we collected helpful insights about the value of the product and made easy improvements to the workflow.

No matter which phase of the product design process you're in, clickable wireframes give you and your team the power to facilitate important strategic discussions. You'll ensure your stakeholders keep users front-and-center, ease technical discussions across teams, and drive user-centered design decisions every step of the way. The earlier you use wireframes to guide important decision decisions, the easier your build will be — and the happier your users will be with the finished product.