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.

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

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.

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.

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.

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

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.

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.

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

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.

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

If you need a project or collaboration

Let's talk.

Send me a message:
vitorcanuto.web@gmail.com

Web Development
User Interface and Experience
Ecommerce
Visual Design
Branding

Learn more about me

Category