Cambridge One

Research    •    UX    •    UI

One platform to house all the ELT content produced by Cambridge University Press. Including a content and learning management system, teaching and learning materials, games, and collaborative activities.

Platform: Web app
Role: UX & Service Designer
Team: Cross-functional Scrum team
Website: cambridgeone.org

Background

Cambridge One is a platform for Teachers and Learners of ESL (English as a Second Language) to access resources and activities published by Cambridge University Press. It allows all the ESL content to be found in one easy-to-access place and provides data and feedback on progression. Teachers and School Administrators also use the integrated Learning Management System to monitor learners and give them the tools they need.

Opportunity

The Lesson Plus project aimed to provide an updated, digital-first way to view and interact with course materials published by Cambridge University Press. The vision was a tool that operated online using the Cambridge One eco-system to access a content library of e-books, audio, video, and interactive activities.

Teachers can present and interact with their content library to prepare for and teach courses using Lesson Plus. A digital library reduces dependence on printed books and the need for transport and storage. It also gives additional flexibility, such as viewing content at a larger scale or adding personalization.

Alongside simplifying access, the tool would also realize ambitions to allow data capture on the usage and engagement of previously static printed materials.

An extension of this project saw the possibility of bringing benefits to a broader user group and was extended to provide access to e-books for learners, both in class and for independent study.

CHALLENGE

The Cambridge One platform led digital transformation for a business established in 1534. Fixed publishing dates and long-established processes for creating course materials needed to be maintained alongside the agile development of the platform.

The Lesson Plus project and later the e-reader needed to meet several requirements to be useful and usable for teachers and learners in a number of different contexts.

This included considering the range of devices used, from older smartphones to interactive display screens and whiteboards. As a global product, we needed to allow for low or no-internet connectivity alongside providing enough functionality to create an engaging experience.

Due to the global Covid-19 pandemic, in the summer of 2020, the e-reader project became an accelerated priority for the business to facilitate remote teaching. We leveraged the build of Lesson Plus to create a product for learners that seamlessly integrated with their Cambridge One account.

Discovery

Existing product

Initially, we took time to understand the products teachers were using to present in the classroom. Several direct competitors in the space sit next to other free and readily available solutions, such as opening e-books in a free PDF reader.

The previous offering in this space from Cambridge University Press was a CD-based software that holds one course purchased alongside the printed materials. The tool needed installation, which caused a reliance on customer support or local representatives. Any usability issues could not be addressed until the next published version of the course was released in several years.

The learning materials published by Cambridge University Press cover classes for young children from 4 years old through to teenage exam practice and casual or business language for adult learners. This broad scope meant that there had been many different CD-based presentation tools developed within the business. For teachers using several of them, there was little consistency.

Using industry knowledge within the company

A large portion of the staff in the English Language Teaching department at Cambridge University Press, myself included, have taught English in a previous career which left a lot of untapped knowledge and experience and brought a large amount of bias.

Through speaking to colleagues and stakeholders about their experiences, we uncovered many similarities and differences. Some told us about restrictions in Spanish schools that meant only linux OS was allowed; others taught in Thailand without internet. Many told us about their experiences with children and teenagers finding digital far more engaging.

Contextual inquiry

We were still missing the direct feedback from teachers using our product in the market and seeing the benefits and usability faults affecting the classroom environment. To understand this, I conducted several lesson observations in Istanbul, Turkey. This market heavily used the previous version of the products, and our sales team had reported that schools would not consider any course that did not have tools suitable for an Interactive Whiteboard.

We saw teachers who needed to focus all their attention on the students needing to be able to all tools or move around a page with minimal thinking. They spent a lot of time walking across the board to select functionality and often needed to stand in front of the content to interact. They told us they preferred not to have their back to the class.

Key Research findings

  • Teachers want to quickly find and reach tools without thinking or spending time looking, as they will often be in a classroom environment where attention needs to be on the learners.
  • The teachers' and learners' focus should be on the content, and the tools should be there when needed as support.
  • The interface needs to provide familiar navigation and easy ways to move to relevant content.
  • Children and teens find digital content more engaging than static printed materials.
  • Teachers of young learners often have them engage with presented content and face barriers when the tools they use are not suitable for children.

Ideation & experimentation

Following the discovery phase, I defined the key goals and tasks our teachers needed to achieve with the products and held a series of workshops with stakeholders, the design team, and the scrum team working on developing the tool.

Key Teacher Goals

  • Display the content large enough to allow students to see it easily.
  • Move to and from different sections of the book.
  • Change to other e-books that are part of the same course (e.g. the homework book)
  • Play audio and video activities referred to in the e-book.
  • Access functionality without standing in front of the content or removing focus from students.
  • Give students access to some of the tools so they can answer questions on the board.

Workshops focused first on the product as a display either on an interactive touch screen or projected from a desktop or laptop. This was the immediate context of use in the project and held certain ergonomic constraints, such as avoiding putting key functionality out of reach.

Workshop to ideate layout and functionality with design team

Prototyping

An important factor for teachers was to show the content as large as possible to support students that may be following along on the whiteboard rather than having a personal, printed, or digital copy of the coursebook. I found that this was common in price-conscious schools and schools with low digital access or have recently started the school term and not yet received ordered materials.

I wanted to allow the teachers to access all the functionality needed without taking up much screen real estate. Our solution needed to meet their goal of finding relevant tools when required but not having too many options to search through when needing to make a quick selection in a classroom situation.

I prototyped a possible solution to minimize the controls displayed on the screen while still having them be accessed easily and allowing them to be positioned by the teacher in a comfortable location.

I experimented with the option of opening the toolbar from the left and right sides of the screen and a button on the toolbar that allowed for positioning on the top and bottom of the screen.

Usability testing

Introducing regular usability testing

I arranged and implemented the Cambridge One team's first regular usability testing sessions. Before this, testing had been irregular and not included within the UX process for products in development. Initially, this took a week each quarter to perform usability testing on the products being designed and developed across the Cambridge One platform. Then becoming a more regular sense check of design work by adding in remote testing of work in progress regularly throughout sprints as needed.

Competitor testing

When looking at the competitor research, there were many different approaches to developing certain features. Particularly those that allow writing and drawing. We were struggling to prototype the other behaviors on the interface using design tools, and using the development team to do so was not possible due to cost and resources. I found competitors using the different options in their in-market products and ran usability tests on the functionality in question. The users showed apparent frustration with one of the options, which led to an easy decision.

Interface Design

Evolution of the interface

An important factor for teachers was to show the content as large as possible to support students that may be following along on the whiteboard rather than having a personal, printed, or digital copy of the coursebook. We found that this was common in price-conscious schools and schools with low digital access or have recently started the school term and not yet received ordered materials.

We wanted to allow the teachers to access all the functionality needed without taking up much screen real estate. Our solution needed to meet their goal of finding relevant tools when required but not having too many options to search through when needing to make a quick selection in a classroom situation.

Initially, I placed the main toolbar at the side of the screen and experimented with expanding and collapsing. After several rounds of iteration and usability testing, I found participants were keen to have constant access to certain regularly used functionality, such as moving to the next page. Having the page navigation in a sidebar lacked context leading to uncertainty about its purpose.

The next iteration created the main menu bar to turn on and off tools and navigate. Sitting at the bottom of the screen alongside another permanent bar that holds all the options for changing page views and moving within the displayed ebook.

A button on this main menu opened the side toolbar containing tools for interacting with the content, allowing writing and drawing, highlighting, typing notes, hiding and showing sections of the page, and a timer.

Some of the teachers observed chose not to interact with tools preferring to use interactive content instead. Clearing them from the interface allowed these teachers to focus on their priorities and limit unnecessary choices.

Drawing & Writing

One of the most popular features of previous presentation products by Cambridge University Press and its competitors was the ability to draw or write over the coursebook content. The feature allowed teachers to directly annotate or explain course content in a way that could be erased, ready for their next lesson.

We knew that we should provide something sensitive enough to write with a pen or finger. Teachers often use several colored pens in their classes and access the platform with a desktop and mouse or a touch device like an interactive whiteboard.

This flow shows a teacher opening the tool menu and selecting a secondary color to emphasize an annotation.

Interface Design

Typing Notes

Teachers without interactive touch displays still lacked a way to add their text and notes to the e-book. We wanted to provide a familiar way to type some text and see the related piece of the content. We experimented with adding text boxes to the page and attempted to address their issues with covering the page or hotspots.

Teachers expressed the desire to make notes related to something on the book page and general notes that may focus more on classroom instruction.

Examining the journey of returning to a note, we realized that they first have to navigate to the page and activity before scanning for the note hotspot, which was potentially logical but lengthly and did not provide for the general note case. We settled on the solution pictured below.

The final solution shows the notes within the panel that slides out utilizing previous development work for the table of contents. The panel allows notes to be easily shown alongside the book pages when needed and hidden when not in use. They append to the list based on the book pages written and can be detached to become general notes. A drop-down menu in the panel allows easy navigation to relevant pages.

Selecting content to show and hide

The printed course books and materials often feature instructions like 'Cover activity one and try to remember.' This is easy to achieve with a printed copy and a sheet of paper; however, this becomes more challenging on a large display. We observed teachers bringing a whiteboard on wheels to cover their interactive whiteboard or sticking paper onto the board in some lessons in Turkey.

Our solution to hiding certain content by selecting an area of the screen to blur also allowed easy implementation of the reverse, blurring all but the selected region. This is useful to the teachers as it focuses on just one activity at a time and makes it easy for lower-level learners to be sure they are following the correct activity.

Audio, Video & Interactive Activities

A key benefit of digital language learning tools is their ability to provide multi-modal forms of practice, such as using audio to practice listening and speaking or watching a video to understand the cultural context. Interactive activities can now give instant feedback on grammar and vocabulary exercises and free teachers to focus on more challenging skills such as language fluency.

These features were critical to the product's success and needed to meet current expectations. The functionality we chose to include in the players had subtitles and audio transcripts to support learners who struggle with listening skills and make the listening activities accessible to the hearing impaired community. We also included features that allow repetition of certain sections of audio/ video and slow down playback.

Page View options

Adjusting content view and navigating the e-book

The toolbar houses zoom in and out buttons to allow for devices that don't support gestural control and user preference. We added pinch to zoom and swipe to move between pages for touch-sensitive devices. With a large portion of the user base on Windows, we added the functionality to zoom on double click.

We found that teachers enjoyed the control and freedom of being able to manipulate how the content is displayed. We eliminated some cognitive friction by adding a few options that allow teachers to reset back to the most common default page views.

The platform supports several e-books, some already in print; therefore, several activities weren't designed for use in a digital context. They often flowed across pages and were interrelated. For example, a task at the bottom of the page refers to an image shown at the top.

Teachers needed quick and easy ways to manipulate the view without clicking around too much. Standard zoom in and out buttons had been frequently complained about by our participants.

The format of the lessons in the printed coursebooks requires students and teachers to turn to supplementary material or refer to tables and charts in other sections. This called for a solution that allowed for quick content navigation within the e-book. We manifested this in two ways: first, creating content hotspots that refer to another book page. Secondly, we made the page number in the view bar prominent and allowed the user to input the desired page.

Navigation

Table of contents

The table of content opens in a panel, and the content adjusts to stay visible; this facilitates teachers moving to supplementary material while students focus on completing an activity on the book page displayed. Thumbnails allow for quick recognition of the page views, and a menu provides navigation to other e-books within the course.

E-reader

The global Covid-19 pandemic changed teaching across the globe. As we moved to deliver lessons online, it became more important than ever to have the core materials available online. Not only were teachers need to use our presentation product in more ways, but the learners needed to access their books. The business rapidly prioritized the inclusion of e-books in Cambridge One and decided to leverage the development work already done for Lesson Plus.

The main challenge for my team was that while our product was responsive, it did not work well on mobile screen sizes as this was never an intended context. Many of our learners access the internet from mobile devices and often have this as their only means of access.

For the mobile experience, we decided to strip back the functionality to the main needs of learners. Many of the tools for adjusting the page views were not needed as gestural control makes moving and zooming simple. Another functionality removed was the tool for blurring page sections as it was not needed in a personal context and the timer as most mobile phones have this functionality built-in.

We kept the ability to write, draw and type on the page and the table of contents available from the toolbar. We kept the audio, video, interactive activities, and quick links to the relevant context through hotspots.

Outcome

The product went to market as its first version in April 2021. This laid the foundation to gather usage metrics and respond to feedback from users. Some of the project's planned next steps were to create a stronger connection between the teacher and learner experience by adding features that allow homework assignment and feedback, progression data, and the addition of educational games.