cover-whiteboard-01

This digital private classroom was designed for tutors to explain any subject related with highschool. Tutors are able to write by keyboard, make a draw using a digital pencil, upload images and exercices. All these interactions happens while the tutor and student talk to each other through microphone and camera feature.

Category

Education

Type

User Interface and User Experience

Role: Product Designer

Focused on the user flow, wireframes, prototypes and UI. Working with PM and UX Research professionals.

Product context

This Whiteboard for tutors is an extention of Tutore App, where we talked to private tutors and students that often solve their high-school doubts through online private lessons.

As Tutore is a plataform, we designed a digital classroom for tutors to support them to explain any schools subjects to their students.

Tutors have a lot of content to explain and sometimes is important to share the screen, power point slides and others. For this reason, we decide to build a tool available for Laptop and Tablets that runs inside a web browser.

Students see the whiteboard in real time through Tutore App for mobile phone.

Classroom and whiteboard tools

Tutors are able to use the classroom through a web browser, where we show some tools to give the support while they are explaining a subject.

In this MVP, our objective was to have:

Cursor: Select objects to move, transform the size, edit or delete objects
Pencil: Draw elements or make some marks. Is possible to change color and pencil size
Text: Type or paste some text content. Possibility to change color, size and text alignment
Shapes: Elements ready to use. Right triangle, rectangle, equilateral triangle, and others
Images: Component to insert images from camera or gallery in the whiteboard
Exercises: A component where tutors can select exercises from our digital library
Whiteboard: Possibility to create multiple whiteboards, download and delete them
ipad-tutore-1

Tutors are able to create new artboards by clicking in the "Plus" button and navigate between them. This whiteboard also have the feature where users can pinch to zoom.

Shapes

Tutors have a library of shapes available for use. This first version has six different shapes that gives a support to the tutor to explain mainly math and physics exercises easily.

wb-final-02

Tutors are able to transform shape size, move, duplicate, change color and delete. Students can also interact with these shapes through the whiteboard in Tutore App.

wb-final-03b

Pencil

This tutor's whiteboard can be used through Tablet and Laptops. Tutors can use the pencil feature to draw or write anything, by using mouse or a digital pencil. They also can change the size of the pencil and change the color.

wb-final-04b

Using this feature is easier to explain subjects to students, and after all, both tutor and student can download this whiteboard as an image.

wb-final-05

Text

I designed a tool for texts, where tutors just need to select the tool and click in any whiteboard area. They can write the content and config the text.

wb-final-06b

When user taps or click in any text content, we show the text component with the possibility to scale the size just holding the edge of the box. They also have a button designed to delete the content.

wb-final-07b

If they want, is possible to select the text and change the text color easily.

wb-final-08b

Components and Icons

This project is using the same Design System that I designed for Tutore App. But here I'm sharing some specific elements that you see in the screens.

wb-tutore-icons

Final considerations

Tutore App was an experimental project that became a new startup in 2021. 

Please, access the case where I tell more about the project and product design decisions. You can check it here.

That's it.

Thank you for your time,
Vitor Canuto