Tes Teach is used by millions of teachers and students around the world to create, build and share interactive lessons with students and teachers. With the increasing numbers of iPads in the classroom, we decided to build an iPad app to enhance and complement the current Tes Teach web experience.
Students using the web experience in the classroom.
Defining the problem
With the popularity of Blendspace in the US, Tes decided to use it as a way to introduce their brand into the American market and let teachers know about their other products. With more and more students using iPads in the classroom, we decided to create an iPad app to enhance the Tes Teach web experience and improve the content consumption in the classroom.
My main problems to solve:
- How to design an experience that prioritizes content consumption and still complements the web experience?
- Which features from the web experience should be included in the iPad app?
The main constraints were:
- Time - We had 5 months to build and launch the app before the new school year
- Technology - Not only the normal constraints that a mobile device like an iPad has but also the decision made by the engineering team of using React-Native.
- Consistency - Make the iPad experience to feel like a complement of the web experience.
Research, Strategy and UX
I visited schools, interviewed teachers, and observed classes on how they used Tes Teach in their classroom.
Our user base was basically the same that was defined for our web experience. The big change was to focus on content consumption rather than creation. I found out teachers check their iPads mostly while they’re in the school working with their students or while they’re commuting. That’s why I decided to reduce the number of features for the app to focus more on consumption and discovery of lessons.
Flow
The new flow for the app would start with the lesson library to facilitate lesson discovery and consumption.
Right after, I created wireframes and tested them with 8 teachers. 5 of them current users and 3 completely new to Tes Teach. The feedback was positive. I worked to fix some details and prepared for design
Some of the early sketches and wireframes I made.
Design / Prototype
I decided to keep consistency with the visual styles from the web experience (Link) since it proved to be effective. The new challenge was to introduce visual elements from the iOS style guide and blend them with our UI. Using the system’s icons and visual metaphors help users get familiar with the app faster.
Overview of styles and components
Early explorations. Trying many ideas quickly leads to a semi-chaotic sketch file :)
Lesson editor
A big challenge was to translate the lesson creation experience to the iPad. Without hover states and having draggable elements on scrollable areas I had to find solutions that would keep a good experience. I created many different options to handle, create and delete tiles and after testing them later with our beta users I selected the solutions that performed better. The constraint of using React Native prevented us from using many of the solutions due to what the technology supported.
This was one of the biggest challenges because of the differences between doing drag & drop on an iPad and a regular computer and the lack of a hover state on the iPad. Together with the engineers we figured out the right timing for recognizing when the user wanted to drag vs scrolling search results.
Example of searching and adding resources to the lesson.
Play mode
When students and teachers open a tile, they get go to “play mode” with a bigger view of the resource and less distractions. The lesson author is the only one who can edit the description.
Play mode in different stages: 1 - Full-size. 2 - Sidebar expanded. 3 - Top navigation expanded.
Quizzes
1 - Student default view. 2 - Displaying results. 3 - Author edit mode.
Teacher view of quiz results. Each question can be expanded to get details.
Illustrations
Like the web experience, illustrations would be part of the app to support and enhance the content and also to increase engagement from the students.
Illustrations have proven to be very effective attracting our user's interest and making the experience more enjoyable.
Wrapping up
This is a test for the captions. Let's make it two or more lines and see how it goes.
After working on the rest of the screens I built a new, more polished prototype using inVision and went back to schools to test it obtaining great results. With some minor tweaks it would be ready for implementation.
Building the product
When you work many years with the same PM and engineers they learn a lot about design from our constant conversations. It’s great to have a team that care about details and works hard to deliver a high quality product.
Since I love doing front-end and working with React Native is very similar to the web. For this project I got my hands dirty and wrote a few lines to polish some elements of the app.
Ship it!
On August 5th and right on schedule, our app bitted the App Store. The feedback from our users was great:
I found Testeach really good and intuitive. Liked being able to sculpt questions so easily. Highly recommend it!
I am loving Blendspace for differentiating instruction. Students can do the assignments in the order they want & pace themselves.
Alucinando con la variedad de herramientas para crear recursos digitales... #TesTeach ¡merece mucho la pena!
The team was very happy with the results. Teachers and students love it and I can’t wait to see how this app develops with time and teachers find new and better ways to use Tes Teach.