All Posts in UI Design

February 6, 2020 - 1 comment.

Addressing Design Feedback: How to Keep Your Project Moving Forward

Seeing the visual direction for your edTech product for the first time is nerve-wracking. After all, you have a lot riding on the appeal of your product. And you just invested major time and resources in the development and design process.

Hopefully you love what your UX/UI team created as soon as you see it. More often, it takes many conversations to arrive at a design sweet spot.

Whether you're pleased or baffled by the initial design pass, years of experience have taught us how to present UX design effectively and keep a project moving forward.

Here are five common responses to visual design we encounter every day, and how we help our clients stay on track.

1. "Will our users really go for this?"

In edTech, you design for multiple audiences, from students and teachers to school administrators. Each of these audiences expects something different from a product's visual design. However, it's common for a product's stakeholders to have difficulty seeing how user expectations are being met through design.

That's why Backpack Interactive spends so much time during the UX planning phase getting to know your users. By the time we get to the visual design phase, we understand what kind of experience your user base expects when they power up a product. We know which tools your users interact with and whether they look similar to the one you're already building.

When we worked with WNET on their Mission US game platform, we presented a sophisticated design for middle and high school students. Mission US is a complex storytelling game that invites students to choose their own first-person adventure during famous moments in U.S. history. Mission US has stunning visuals and encourages complex decision-making, which makes it a compelling learning tools for students.

We researched other first-person games students play and love, and our findings impacted layout and design features for the site. For example, a video trailer that previews the game draws students in. It's not a typical design move for edTech, but we knew the game's cutting-edge visuals would speak to students using WNET's resources.

When we explained these decisions to our client in the first visual design meeting, it gave us the opportunity to tie important design choices back to the project's original goals. For example, we wanted to ensure that students knew where to go and what to do to begin each game. This priority was reflected in our design choices, layout, and call to action placement. We also decided to change the original design to make teaching and educational resources equally as important as gameplay. Educational content is now a main feature of the site and is easy for teachers to locate, preview, and interact with.

By conducting extensive user research and linking design choices to strategic goals, we help stakeholders understand what their users expect from a high-quality edTech product.

2. "I don't know what this is."

Have you ever been thrown by a wireframe or a user journey when you look at early product mock-ups? You're not alone.

Some of the best tools for understanding design features are the product's initial wireframes. Wireframes are like the blueprints for a house. They don't reveal everything about visual design, but they will give you and your stakeholders a sense of visual placement and important user interactions.

It's also our job to help you visualize things you can't see at work this early in the process. During the initial visual design presentation, we narrate all the interactions we can't show in 2D, like digital animations or hover properties. These are all the interactions your users will find engaging and delightful, but simply don't translate to 2D design.

We always encourage our clients to ask questions at this stage, too. When you feel empowered to ask questions, there is less confusion all around. Clear communication ensures that you have all the information you need to make the best decisions about your product.

3. "Should we add…"

It's common to get all the way through the UX planning and visual presentation phase only to feel as though you should add more features to your product.

Sometimes the urge to add new features means we haven't yet uncovered the primary goal of your product. More often, though, it's a sign that we might be trying to solve a UX problem through design — and that makes everything more complicated.

That's when we go back to the wireframes. We really want our clients to understand the structure and hierarchy of their product, so we make complex decisions about product features together.

But we also want to educate our clients about the most effective ways to design a menu or a data dashboard. Complex features like data dashboards grow and change over time. We always show clients major design features like dashboards in their beginning state, as well as how that feature will change as users generate data. When you give users just what they need, instead of everything they might want at once, you avoid visual overload and make your product even easier to use.

4. "This approach just doesn't feel right."

It's not always easy to explain why you don't like visual design. Sometimes it really comes down to a feeling or a preference. So how do you communicate more effectively about this with your design team?

This is when we start asking more specific questions about what you want to see and use "deep listening" to fuel our responses to feedback. What about the approach doesn't feel right? What will your users expect when they open this product? What's your goal for the user at this particular part of their journey?

The more we can uncover about which goal isn't being reached by a visual design, the more we can delve into user experience to deliver a solution that really works.

We'll also work hard to tell you which design decisions were based in best practices and which are backed up by data. With surveys and user stories driving the conversation, we get to the heart of the matter while ensuring that everyone on your team is heard.

5. "I like it, but I'm not sure my boss will."

It's especially important for stakeholders to participate in design presentations. Not only does a presentation reinforce your planning and decision-making, but it also creates buy-in from every member of your team — including your supervisor.

The visual design presentation is also an opportunity to take our clients through the decision-making process from top to bottom. We tie design decisions directly to UX planning and user pathways, so stakeholders can better understand how each decision in the UX planning phase reflects user expectations. We want to make sure you remember how we arrived at each UX and design decision together.

Visual design presentations are the result of a long, collaborative process. Remember: we're here to make you look good! Design presentations reflect all the careful decision-making and hard work you put in along the way. With the right preparation and execution, stakeholders will feel even more confident that you'll deliver an exceptional product users will love.

December 11, 2019 - No Comments!

Visual Design Strategy: How to Make Stunning edTech Products Users Will Love

Strong visual design strategy is crucial for creating an effective edTech product that engages your users and helps learners understand new concepts. The right visual design also helps adult learners develop new skills and teachers make better decisions about what's happening in their classrooms.

But the visual design process can be difficult for stakeholders in edTech to understand. Often the emphasis is on an edTech product's functionality instead of its visual design. That's why you'll see a lot of clunky interfaces that look more like the administrative back-end of a website.

If you want to ensure adoption and efficacy, it's crucial to aim for the polished UI of a high-end consumer product that delights users as they learn new content or practice new skills.

Want to know the secrets behind our award-winning visual design? We'll show you how we design lively, engaging, and sleek educational technology and give you the tools you need to make a case for investing in visual design strategy for your next digital product.

Who Are You Designing For? Balancing Design Elements Between Teacher and Student Personas

edTech products are used by multiple personas, each with incredibly different visual design needs and expectations. At Backpack, we juggle competing persona expectations by considering which elements of visual design personas might share.

For example, if the student-facing side of your product fails to engage users with visual design, it'll be difficult for your marketing team to sell teachers and administrators on the effectiveness of your product. And if the teacher-facing side of your product feels too juvenile, teachers won't think it's a valuable or appropriate tool for them to use, either.

We use the visual design process to uncover where design elements from the student-facing side of a product meets the teacher-facing side of a product. Because teachers rely on edTech tools for assessing classroom data, they require a robust interface. Our visual design can be friendlier, striking a balance between "welcoming" and "professional." By drawing on visual elements from the student-facing side of the product, we help teachers feel like they're using the same product — without feeling like we're "dumbing down" an important technical feature.

Ultimately, a product's visual style should be strategic and grow out of the research you conduct in the UX phase as you determine your target personas. Without an effective visual design strategy that appeases all of your users, your product might never leave the shelf.

Case Study: How Our Visual Design Strategy Helped Teachers Look Like Data Experts

Good visual design explains complex ideas and brings them into focus for teachers and learners alike. This principle is especially true in our visual design strategy for Scholastic's NSGRA, or the Next Step Guided Reading Assessment.

The NSGRA is a teacher- and administrator-facing product. Throughout the visual design process, we considered how to balance the technical needs of this persona with emotional appeals to an educator's professionalism and warmth.

While many of the basic colors used in the visual design for NSGRA are neutral and understated, the product also features bright, optimistic color accents that call the user's attention to key data and action items. These saturated colors are used sparingly and with great purpose, and the overall effect is professional and clear while remaining friendly and accessible.

The NSGRA doesn't feel like a kids' product, and our visual design incorporates these warm, inviting colors for a softer visual style than other products designed to collect and analyze student assessment data. Even the fonts we chose are rounded, which softens the "hard" nature of data visualization and makes the product feel more inviting to use.

If we had pursued a visual style that was too friendly or soft, however, we might have made it difficult for teachers to appear like experts in meetings with parents or administrators. The purpose of NSGRA is to provide teachers with robust assessment and reporting tools. Printouts or presentations of classroom data need to retain a high level of visual credibility, so teachers can use data in meetings with administrators or parents without worrying that the design looks juvenile or untrustworthy.

On the other hand, if we had designed a powerful digital data management tool like the NSGRA to focus on raw data fields and reports, the visual result could have intimidated new users and limited sales.

Through the process of identifying the teacher persona's needs and analyzing use cases, we were able to strike the right balance in our visual design strategy. The NSGRA gives teachers the right tools — and the right visual aids — to successfully present student data and make a case for better student outcomes.

Smart Visual Design for Students: Delight Instead of Drudgery

edTech designers are competing for students' attention with slick, consumer app interfaces and heavily illustrated, 3D-animated games that have high-end storytelling and use immersive technology. The bar for visual design in student-facing edTech products is just as high.

Even well-intentioned visual design for learners can inadvertently cue students into the fact that they'll be completing a boring task instead of embarking on an interesting learning experience.

If your visual design conveys to learners that they'll have a delightful, high-quality experience, your edTech product is far more likely to engage students, pull them in, and compel them to interact with your content.

Collaborative Planning: Using Commercial Appeal to Teach

Earlier this year, we were asked by the Scholastic National Partnerships team to help develop an immersive learning experience for LEGO that celebrated the 50th anniversary of the Lunar Landing in 1969.

The result is a highly visual set of activities that blends creative gameplay and real information about science. Users play an introductory game called "Assemble Your Team" that uses narrative to teach them about real careers in the sciences. They also collect stamps on a passport as they complete missions with real-world obstacles.

But none of these highly visual, interactive games would have been created without facilitating a collaborative visual design planning process. In just six weeks, our technology team was able to innovate right alongside our design team to eliminate technical obstacles and increase user engagement.

Through working meetings, we designed activities in concert with the tech team that accomplished LEGO's goals for user engagement and education — without letting a compressed timeframe get in the way of visual appeal or technical demands.

Because of time constraints, we couldn't build a user database on the back-end to save profiles of students beyond their session. But we still wanted students to have a fun, rewarding experience. So we designed a version of every possible outcome on the front-end and handed them off to our developers. This was only possible because we could brainstorm with developers and problem-solve together in real time.

Solving the Right Problems: How a Smart UX Planning Phase Sets Visual Designers Up for Success

As a UX firm with a strong background in visual design, Backpack's UX planning phase is a crucial part of our design process. This was especially true for our client Learning Ally as we designed the look and feel of their audiobook solution.

Learning Ally's audiobook solution app has three sections: a library of books to browse, a user community, and helpful resources and tools for struggling readers. During the planning process, we decided it was most important that users understand where they are within the app. We chose accent colors accordingly. The bright, orangey-red — only used once in our design — tells users whether they're in the library, community, or resource section of the app.

Our secondary bright color, a saturated green, highlights what we want users to do. It tells users what they can and should click on and where they can travel within the app. Everything else on the app screen is tonal. There's lots of blue, a Learning Ally brand color, as well as plenty of white space. More white space in design prevents cognitive overload in users, and it also draws attention to key accent colors and gives those colors more significance within the design.

Every design decision we made followed through on the strategic process of the UX planning phase. By building clickable prototypes for the app, we helped project stakeholders understand visual placement and functionality of its features. Once we began the visual design process, we had an excellent understanding of what the user's journey through the audiobook app would look and feel like. This meant we could design an interface that delivered on that experience.

Align Your Visual and UX Design for a More Powerful edTech Product

High-end design doesn't have to be a budget-breaker in edTech. Visual design is a strategic aspect of product planning, and successful edTech designers tie visual elements into the learning goals of each product.

When visual designers are cued into the needs of the UX team or front-end developers, you also create opportunities for creative problem solving that results in better customer engagement — and a stronger marketing platform down the line.

Companies that allocate resources for high-quality visual design from the beginning of the product planning process are more likely to design successful learning tools that test well with users. After all, if your sales team doesn't have to explain the visual appeal of a product, your product automatically generates trust and excitement — just by looking great.

October 1, 2019 - No Comments!

The edTech Designer’s Creativity Toolkit: Deep Listening

"Deep listening" is a process of engaged inquiry and openness crucial to design work. When you truly listen to clients — including everything they're not saying — you'll find yourself asking better questions and reading between the lines as you move through the design process.

Without embracing deep listening early in the product planning process, you might struggle to refine your edTech product, add too many design features that confuse your users, or roll out a product that lacks a sound pedagogical basis.

With all your deep listening cylinders firing, however, your road from concept to beta testing will be much smoother — and your users will delight in the simple, elegant solution you've designed.

Keeping this in mind, here's how to approach deep listening in your own product planning meetings:

    • Hear everything. You'll generate dozens of details about your product, and it's a design team's job to listen closely to your goals. Designers need to understand what your edTech product should do and what your users need to accomplish or learn. Your design team often provides the fresh perspective you need to unlock or refine the purpose of your product.
    • Ask the right questions. Whether you need to get into the mindset of your users or simply unpack your product's goal, it's important that your design team asks the questions that showcase the learning experience your product will provide students. Knowing the right questions to ask will likely stem from your design team's years of experience in education and product design.
    • Stay open to unexpected solutions. Just because a design team has already built a similar product doesn't mean they already have the best solution at hand. Stay open-minded to alternative designs, so you can hit on the best solution for your users.

When you stay open and curious throughout the design process, you'll generate more helpful information: better questions, more nuanced solutions, and more effective learning tools that get to the heart of your product and the users who will adopt it in the classroom.

Ultimately, the deliberate process of deep listening is designed to help you make decisions that will better serve all of your users, from the administrators who make purchasing decisions to the students trying to bolster their reading skills.

Case Study: Get to the Heart of Your Users with Design-Thinking Workshops and Deep Listening

Design-thinking workshops are important opportunities to practice deep listening at the early stages of the design process. If you're still discovering your user personas and designing their pathways through your product, deep listening can help you get to the heart of what your users value and how they'll engage with your product.

For example, in a design-thinking workshop for Hats & Ladders, an edTech company with an innovative mobile career education platform, we focused intently on who the app's users were and how each of their personas experienced the app.

Through the process of deep listening, it became apparent how each of their user personas approach the app's content differently. An "unmotivated" student might not take the same pathway as an "overachiever," for example, while an "undecided" student might take yet another pathway to uncover the career that's right for them.

By listening to how the client framed who their users were, we were able to develop strong user stories and user pathways. It mattered how we asked questions — and how we listened to the client's answers.

Ultimately, this process resulted in a completely restructured app that appealed more strongly to high school users. We made building a user's profile central to the experience of playing the in-app game. This allows teens to engage with the app's content while explaining their identity in meaningful ways to other users — and to themselves.

Without staying open-minded throughout this process of deep listening and inquiry, we wouldn't have uncovered such meaningful information about Hats & Ladders's user personas.

And without thinking at length about their high school users in particular, we wouldn't have hit on a design solution that appealed so strongly to teens or broadened the audience for the app.

More often than not, deep listening results in more informed — and more effective — product design.

How Deep Listening Leads to Better edTech Design

Asking the right questions — and listening deeply to the answers — is all about discarding your assumptions. Be open to thinking through why certain design decisions are being made, how these decisions apply to each of your users, and how the end results might be different than what you thought at the beginning of the process.

If you're leading product planning meetings, consider making openness your primary goal. Open-ended questions help you stay mindful of any baggage you might be bringing from your last project, while listening deeply to answers from your team will help you stay open to the unique challenges of a new project as you uncover its personality.

Every edTech product is different, but I have a simple set of open-ended questions in my designer toolkit that I return to again and again throughout the product planning process. These questions will help you throughout your design process, too.

Here are three questions that help me listen more deeply:

  1. How much interaction will your user need in order to engage with your product? This question gets to the heart of how different user personas are in edTech, as well as the assumptions you and your team might be making about these personas. For example, students might be sophisticated users of design, but teachers aren't always as comfortable or well-versed. It's also important to understand the different needs of your users. Where are they using the product? How much time do they have to spend on it? How much familiarity will they have with a product like yours? What are their pain points, and what are their expectations? How do you explain something visually to each of these users? These early decisions in the design process profoundly shape the experience of your user, which is why it's so important to ask open-ended questions and listen deeply to the answers.
  2. How do we avoid visual overload to make the product easy to use? This question helps design teams unpack which features are necessary and which can be simplified for ease of use. After all, edTech users don't have a lot of time. If your product can't be used quickly and intuitively, then it won't get used at all. The learning or administrative experience also has to be beneficial for your product to be successful. Sometimes, visual complexity can get in the way of that goal. Without posing this question at the beginning of the design process, you might lose sight of this goal as you introduce exciting new features for your user.
  3. How do we organize content in a rich, meaningful way? This question helps design teams tap into the pedagogical goals of your product. Remember: edTech products are unique. In order to be successful, they need to lead students through a meaningful learning experience or help administrators do their jobs more effectively and with a more robust set of tools. How you organize your content should reflect the depth of these user experiences without introducing too many barriers, over-complicating your user interface, or causing information overload.

Remember to take the time to reflect on what you heard and put it through the filter of your expertise. The decisions you make in early planning affect the organization of your product later on, and it's crucial that you and your team understand the big picture right out of the gate.

Openness coupled with "deep listening" will help you discover exactly what your edTech product should look and feel like. You'll likely go back to these questions again and again as you refine your user personas and the goal of your product in order to give your users the best possible learning experience.

September 19, 2019 - No Comments!

How to Design the Best Data Dashboard in edTech

With more complex edTech tools comes an influx of student performance data and new standards for teaching and learning tools. While data can be an extremely powerful tool for educators, training teachers to use complicated edTech products can be cost prohibitive and inefficient for both software companies and school districts.

Even more complicated? Proving the efficacy of your edTech product in the classroom is on you — and if your users can't access or understand this data, too, they won't be convinced that your product offers a good solution.

Thankfully, you can reduce or eliminate many of these obstacles by designing better, more functional data dashboards. These design improvements will go a long way toward convincing your clients and their users that edTech tools help teachers do their jobs even more effectively.

The gap between edTech designers and their users was never more apparent to me than when I left SXSW EDU earlier this year, mulling over a lively panel on the topic of data-driven learning. When panelist Josh Dormont, the director of product development for the NYC Department of Education, revealed how hesitant teachers and teachers' unions have been to embrace data-driven teaching tools, I wasn't necessarily surprised. I understand the objections and fears teachers have about how data could potentially be weaponized by administrators or misinterpreted when reviewed out of context.

After all, an influx of data can be a powerful tool — or a source of anxiety for your users. That's why it's so important to make data dashboard design a priority as you plan your next edTech product. Here's what you can do to make it even easier for teachers, administrators, and parents to use robust, data-driven edTech tools:

What Makes an edTech Tool Effective?

New educational technology transforms learning in schools and homes, and it also generates tons of student performance data. In order to be successful, these new products must also enable teachers and administrators to easily track, monitor, and react to performance data. Otherwise, teachers are left drowning in data that isn't actionable, and they miss out on significant takeaways about their students' performance.

Each new edTech product is also judged by how effective it is. When considering a new edTech product, school administrators and other key stakeholders look for a few key measures of efficacy before they make an investment:

  • The product improves assessed learning outcomes, i.e., "hard" data. Straightforward, before-and-after data that shows how students have improved over time is the baseline for most buyer decisions. This is true even for products that have "softer" learning goals or outcomes, like those tied to social and emotional learning.
  • The product improves observed learning outcomes, i.e., "soft" data. In the crowded world of edTech solutions, positive observed outcomes have become a powerful differentiator for many products. Sure, the numbers show the product works, but what do real teachers say? These observations could be as complex as expert-driven testimonials or as simple as social reviews. Finding ways to track and display observed learning outcomes in meaningful data visualizations can be a powerful addition to your product's data dashboard.
  • The product demonstrates high engagement with users. How frequently the product is used, and for how long, matters a great deal to administrative stakeholders. These personas also consider which elements of a product users engage with. Are students only playing games? Are teachers actually using the product for its intended purpose? As you develop your data dashboard, be sure to make it easy for the right user to track and access the engagement data they need to determine whether the product is working for them.
  • It meets internal benchmarks of teacher satisfaction. If you build in simple systems for teachers to submit feedback about their experiences using your product, you can use this data to improve the next version of your product. Teacher satisfaction data is often a key indicator for administrators who make purchasing decisions for their district.

When you design with data visualization in mind, not only will you find more opportunities in the UX and UI to make your product more effective, but you'll also demonstrate to clients and their users that you truly understand the challenges they face in the classroom.

Well-designed data dashboards make it easier for students to track their progress, for teachers to assess student performance, and for administrators to make purchasing decisions. It's up to edTech designers to make these visualizations easy to understand and even more powerful to engage with.

Your Data Dashboard Designer Checklist

Well-designed data dashboards offer the simplest and most elegant solutions for user insights. In one place, users can see how their product or system is performing, whether that's within a single classroom or across an entire grade, school, or district.

Providing school administrators, teachers, and parents with robust, actionable tools for assessing student data is key to ensuring your edTech product will be utilized thoughtfully both in and out of the classroom. Students need their own data feedback systems, too, whether that's a series of prompts that encourages them to engage more deeply with your product or a dashboard that shows how their performance measures against the goals they've set for themselves.

After years of creating and testing data dashboards for each of these audiences, we've distilled our best practices for creating a killer data dashboard. Follow our Data Dashboard Designer Checklist to help educators make better, more informed decisions and take immediate action based on the data collected by your product.