Creating responsive, learning and teaching textbooks for the Thailand K-12 classroom

Project Overview

Thailand’s One Tablet Per Child (OTPC) 2012 government initiative aimed to transform the traditional Thai classroom with accessible, connected, mobile tablet learning for every teacher and student.  Due to many challenges over the project’s lifespan (inadequate teacher training, poor hardware specifications, lack of digital content, and change of policy), the OTPC program ultimately failed to meet its original objectives and was canceled. However, mobile use as a learning and teaching tool gained traction and continued to grow.  As rural schools now had access to more reliable internet connectivity, teachers and students became more familiar and more likely to use personal devices in the classroom setting.

Aksorn’s Research and Development department felt that this was a perfect time for the company to become Thailand’s leading publisher of K-12 educational digital content.

Objectives

  • To create and distribute a product of mainstream digital and responsive textbooks to the company’s existing school market.
  • Create digital textbooks that enrich the learning and teaching experiences by integrating effective and engaging interactive learning objects.
  • To create an educational digital production team who understands and applies the principles of quality content design.
  • Create an internal content authoring tool and distribution platform that meets the needs of the production team and teacher and student users.

Constraints and challenges

  • 1 year to transform 54 mainstream physical textbooks into a product of responsive HTML content that can work on any mobile device.
  • Build a capable digital production team with limited technical and coding knowledge.

Role and Responsibilities

UX content production and design lead

Align the production team to the business objectives, lead user research and workshops to identify insights and opportunities, create content auditing frameworks, work with Subject Matter Experts (SME) to optimize lesson flows for digital mobile reading experiences, create UX content design principles for mobile reading, create responsive page layout templates, work with SMEs and the developers to design feasible interactive learning and teaching objects, create the design system patterns library, co-create a production and editorial workflow, lead the visual design team, and sign-off on final production.

Team: Business Manager, 4 Subject Matter Experts, 3 Developers, 8 Production Editors, 1 Visual Designer, 1 Project Coordinator.

Process

  1. Understanding the current context
  2. Establish production frameworks
  3. Final design
  4. Product distribution

Understanding the current context

Like every large project, there are many unknowns to be revealed and understood before going into design and development. In this case, we needed to conduct content audits to understand the content scope of work required for our production team to meet a strict deadline. At the same time, we chose to get outside and understand our current users, behaviors, and context using our textbooks. These field studies would reveal current user problems and pains, which would lead us to identify opportunities that our digital textbooks could provide.

Content audits

The production team works on auditing the textbook content.

I worked with the production team to create a content audit framework that would provide the team a deeper level of understanding of how the current books were organized. This framework allowed the production team to have a shared knowledge and common language of each book’s structure, page layouts, layout elements, and styles.

An example of a book structure of Primary Grade 4 Math. Each color identifies unique page types.

An example of a book structure of Primary Grade 4 Math. Each color identifies unique page types.

 

Representation of the process of translating the physical textbook page into page templates and categorized elements.

Representation of the process of translating the physical textbook page into page templates and categorized elements.

Understand our current users, behaviors, and contexts

To better understand the learning and teaching behaviors of the students and teachers, we conducted contextual field observations in primary and secondary level classrooms where teachers used our textbooks as the main source of instruction. We captured notes on lesson pacing, sequencing of activities, instructional delivery methods, student engagement levels, comprehension and struggles, and emotional states. With these insights we generated initial assumption personas and storyboards.

Storyboarding the findings

Next, our team synthesized the findings to create current classroom behavior storyboards. We presented these storyboards to teachers in an immersion workshop. These artifacts allowed us to visualize our assumptions and become the tool for conversation and idea sharing with teachers.

Teachers engage with our storyboards to share their personal experiences. We generated lots of ideas and validated our findings.

 

Identifying opportunities

The idea generating immersion workshop with teachers reviewing our storyboards was a great method to find opportunities where a digital textbook experience can really transform the passive learning traditional textbook experience.

Teachers place cards indicating a student learning pain along the teaching lesson. They rate the size of each pain as small to large.

Key Insights

Content must be purposeful and relevant to the lives of the student. Content should clarify why this concept is important to the student and how will they use this information in their daily life or later in their adult career.

Potential Solutions

  • Interactive polls and quizzes to compare class responses.
  • Contextual videos relating to Thai life.
  • Digital drawing canvas to represent and share ideas.
  • Classroom / group chat.

Break the concepts up and reduce the mental load to allow for scaffolded learning. The textbook content  can be quite long, deep, complex, and visually disorientating. Students can easily lose track and focus of what concept is being taught.

Potential solutions

  • Use appropriate content and line lengths for mobile devices for effective readability.
  • Avoid lengthy vertical scrolling to connect ideas. Follow proximal content dependencies by having related content objects close together.
  • Use clear headings and titles to indicate location and wayfinding.  Reduce the depth of information hierarchy.
  • Break complex concepts, steps, examples into single isolated views. Use tabs/buttons to allow students to easily navigate across steps without losing place and to control their pace of learning.   

Have comprehension checkpoints along the way to ensure students and teachers can gauge levels of understanding.

Potential solutions

  • Provide engagement activities with guiding feedback during the concept explanation process.
  • Provide practice and assessment questions with immediate feedback to gauge student foundational and comprehensive knowledge.

Turn passive, into active learning where students are encourage to explore, engage, play, and practice with learning concepts in individual or in groups settings.

Potential solutions

  • Prioritize active over passive when designing interactive learning objects.
  • Use appropriate activities that encourage critical thinking.

Establish production frameworks

Our team now had a deeper understanding of who our users are, what learning and teaching pains they experience using the textbook, and what potential digital solutions we could bring into our product. Now it was my goal to equip the production team with the knowledge they would need to make the digital books in a fast-pace workflow with a rigid deadline.

What they needed most were design principles for mobile learning that could help scale their production. After the production team was familiar with best practices, I worked with our SME’s and technical team to begin designing reusable learning objects. These objects could be used in a variety of ways to create interactive activities in the digital textbook. In order to have an efficient way of knowledge sharing between technical and production, I designed a shared patterns library, a sort of design system repository of what learning objects where available, and how and why to use them.

Production design principles for mobile learning

Designing for mobile device screens can be quite a challenge for content layout design. It’s even more of a challenge when designing responsive web content for educational learning. So I worked with the production team to create a set of principles they could use to ensure an effective mobile first reading and learning experience.

Don’t let readers get lost

Readers can easily become confused with the information order of content without appropriate visual help. A lack of titles and headings to describe content hierarchy will get the reader lost in the page and across pages. Too many levels of titles and headings are confusing and hard for a reader to remember.

Best practices

  • Follow the information hierarchy set by the team.
  • Use consistent label styles across all pages.
  • Try and keep the number of heading levels on a page no more than 2-3 deep.
  • If a page’s content continues onto the next page, the information architecture is repeated.

Reading a page should be easy

Readers can easily lose focus and location if the line length is too long and if the page layout differs from the natural way a reader expects to read.

Best practices

  • Use an appropriate line length (number of characters and spaces). 50-65 characters works well for reading.
  • Keep headings and titles short. If they are too lengthy, consider rewording them in a simpler but age appropriate manner.
  • When having long sentences, trying use column layouts that support proper line lengths.

Keep page content length appropriate

Readers will experience more cognitive load with every learning object and element on a page. This affects their focus, attention, and comprehension levels.    

Best practices

  • Look for sections within a page’s structure that can have a page a break to cut the content (ex. changes between teaching and learning modalities, key explanations, focused activities).
  • If the content is a narrative without obvious sections to separate, a longer vertical page may be appropriate.

Keep dependencies intact

The order of how content will be arranged across devices and screen orientations is based on the order of how content should be read and consumed.

Best Practices

  • Establish the order hierarchy of how the content should be read by the reader (primary content flow to supplemental flow).
  • Ensure that content dependent pairs will retain strong proximal relationships and can’t be broken (ex.paragraph with supporting image are to paired together).
  • Reduce the cognitive load and vertical up and down scrolling by keeping those content dependencies intact. If new content references older content seen on previous pages, reestablish the proximal relationship again by reintroducing older content on that new page.
  • Create a dependency layout for mobile, tablet, and desktop versions based on your knowledge of how responsive ordering works.
  • Always test your content layouts on multiple devices.

Reusable, responsive learning objects

One of the greatest challenges in this project was to design a library of reusable educational, responsive interactive learning objects for multiple devices and layouts. I worked with the technical team to understand the limitations of the libraries and web frameworks they were using. The outcome of those meetings gave our design and production team a foundation of what was technically possible and lead us to ask ourselves:

  • How can this type of object enhance the learning and teaching experience?
  • What types of activities would benefit from using this?
  • How can this be used in different contexts (class, small group, self-practice, study)?
  • How can we make these age appropriate?

In the end, we designed over 20 types of learning objects that the production team could integrate into the lessons. These objects ranged from touch flip cards, sliders, drag and drops, ordering, matching, revealing, practice questions, and fill-ins.

An example pedagogical use case for the learning object, flip card - press and hold.

An example pedagogical use case for the learning object, flip card – press and hold.

Final Design

While the editor team created each digital book, I lead the design team to produce unique visual style guide book themes. Together we established the following design principles to adhere to:

Touch first. Follow best practices for touch guidelines, i.e, target sizes when designing buttons and tabs.

Accessibility Matters. Follow Web Content Accessibility Guidelines (WCAG) when designing text sizes, text and background color contrasts, and use Alt text for all images.

Make it legible. The typography, its size and spacing must adapt to the age range of the student.

Color is meaningful and consistent.  A use of color must enhance the object it affects. Once color is applied for meaning, its use case must be consistently applied through the entire theme.

The final design contained 9 unique color themes (one color for each subject) and 4 global themes (Lower Primary, Upper Primary, Lower Secondary, Upper Secondary) that considered appropriate text size, line spacing, and margin size for age appropriateness.

Primary 4 English digital book. A collection of final design pages for both mobile and tablet views.

Primary 4 English digital book. A collection of final design pages for both mobile and tablet views.

Product distribution

Working with the business and technical team, we formalized the licensing and distribution model. The teams created an online licensing and distribution system for schools which allowed content access by downloading our bookshelf application. Every book instance was available to unlock using a scratch-card which schools could purchase for their teachers and students.

Conclusion

The comprehensive digital books product set was a complete product creation to launch journey filled with lots of challenges, roadblocks, and successes. Currently, the ongoing development of the product has been postponed by the executive board due to other product priorities.  When they decide to continue this product in the future, a team now equipped with the skills and knowledge of digital educational production is ready to take the lead once again.    

Key takeaways to increase product success

1. Ensure executive stakeholders have a shared vision. During the initial project planning, our team proposed the product idea to the executive team. They agreed but the project was viewed outside of the company’s vision and lacked full support at the very end.

Any new product idea must be communicated clearly how your product will value fit with the company’s business objectives. Have every key stakeholder involved early on in helping shape the product vision. A shared vision always wins!

2. Keep the project out of the dark.  Our team provided product updates during the executive board department meetings. These meetings, which were not frequent, limited the conversations around advancing the product direction.

Meet frequently, meet privately with key stakeholders on the direction and status of the product before any high level group executive meeting. This will ensure that you and the stakeholder can have shared visions along the way, and limit any development surprises.

3. Guide your team to victory.  Building a new team is not easy. Building a team that can work together with shared purpose is even harder.

Work with your team from the very beginning in defining why the work is important to the business and the user. Have agreed upon frameworks on how the team will work and the quality of delivery. Meet regularly with each member to discuss their ideas, and find out where they need support.