All Posts in UX/product planning and design tactics

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.