Using Wireframes to Power Decision Making and Your UX Design Strategy

Product wireframes are one of the first strategic milestones of the design process. Designed intentionally, wireframes facilitate important decisions early in the UX process. They provide a visual record of discussions about UX strategy, big-picture product goals, user flows, and technical requirements.

Use wireframes to lead your stakeholders through strategic conversations about UX before moving to visual design. Clickable wireframes and prototypes will also help you establish your workflow with technology teams and developers early in the process.

This step-by-step guide to using wireframes in your UX strategy will help you align with stakeholders, make decisions more quickly, and create more innovative edTech products.

Let’s dive in!

How Good Should Wireframes Be for Decision Making?

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 important features. 

The good news? Your wireframes don’t have to reflect visual design in order to help stakeholders make these kinds of decisions. 

Start with the big picture. Does your product need all the features represented in the first iteration of the wireframe? Or can your team simplify?

Wireframes will also help 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?

By sharing wireframes with stakeholders early in the UX planning process, you streamline top-down decision making in a way that benefits both your users and the product development team.

How Wireframes Helped Scholastic Make Decisions About UX Strategy 

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, our stakeholders are able to imagine the user experience prior to testing. 

This process also helps our stakeholders anticipate content needs, including the photos, multimedia content, and other resources that will create the best possible user experience within their products.

As we designed the Literacy Pro app for Scholastic, for example, wireframes facilitated important 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.

Using Annotated Wireframes to Facilitate Technology Discussions

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

Facilitate these discussions early in the design process in order to ease work-flow challenges, especially when you’re managing multiple teams and vendors. With an annotated wireframe in hand, your developers can structure the back end and hit the ground running once designs are confirmed.

How Annotated Wireframes Simplified Our Technology Workflow for a Reading Assessment Product

Backpack uses wireframes early in the design process to collaborate with our development team. 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 design process, our team created a clear and visually compelling user interface. They were also able to clarify software interdependencies along the way. Without input from our developers early in the process, it would have been more difficult to arrive at an intuitive solution for users or anticipate important technology needs.

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 teachers and students alike. 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.

Establish Style and Front-End Design Decisions with Wireframes

Approved wireframes serve as their road map for compelling visual design. Front-end design teams depend on wireframes to establish style and design for the entire product. 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. 

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. Even within nuanced user interactions, a lot of student learning was taking place!

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 further 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 “Pivot or Perish” 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.

No matter which phase of the product design process you’re in, wireframes will give you and your team insights into UX design strategy that facilitate decision making. Wireframes also center the needs of your users for stakeholders and help ease technical discussions across teams. The earlier you incorporate wireframes into your strategy sessions, the easier your build—and the happier your users will be with the finished product.

Are you starting to design a new edTech product? Find out how Backpack Interactive can help! Reach out below.