Hybrid E-Learning System for Teachers & Students

Hybrid E-Learning System for Teachers & Students

My Role

My Role

Product Designer

The Team

The Team

Product Designer

Product Designer

1 PM & Founder

1 PM & Founder

1 developers

1 developers

1 Illustrator

1 Illustrator

Key Contributions

Key Contributions

User Interviews

Competitive Analysis

Design

Prototyping

Product Context

The Hybrid E-Learning platform employs an exceptional teaching method that refines cognitive and educational techniques. This method eradicates socio-cultural biases, aiding minorities in integrating into society.


We were tasked with converting their traditional paper-based lessons into a combined digital-physical tool, thereby enhancing the classroom experiences of both teachers and students.

The Hybrid E-Learning platform employs an exceptional teaching method that refines cognitive and educational techniques. This method eradicates socio-cultural biases, aiding minorities in integrating into society.


We were tasked with converting their traditional paper-based lessons into a combined digital-physical tool, thereby enhancing the classroom experiences of both teachers and students.

The Hybrid E-Learning platform employs an exceptional teaching method that refines cognitive and educational techniques. This method eradicates socio-cultural biases, aiding minorities in integrating into society.


We were tasked with converting their traditional paper-based lessons into a combined digital-physical tool, thereby enhancing the classroom experiences of both teachers and students.

Main Challenges

1

Transitioning paper to online
with minimum method adjustments

2

Hybrid Experience
Connecting Phisical and digital experiences

3

Multiple Personas
Diverse age groups of students, and teachers

What Are The Product's Goals and Objectives?

Users & stakeholders interviews

We conducted 3 initial interviews:

  • kick off meeting that involved the product and marketing managers, and Feuerstein CEO.

  • 3 Method experts

  • Head of Diagnosis department

  • professional educator.

We conducted 3 initial interviews:

  • kick off meeting that involved the product and marketing managers, and Feuerstein CEO.

  • 3 Method experts

  • Head of Diagnosis department

  • professional educator.

We conducted 3 initial interviews:

  • kick off meeting that involved the product and marketing managers, and Feuerstein CEO.

  • 3 Method experts

  • Head of Diagnosis department

  • professional educator.

Main Takeaways & Insights

The key principle is simplicity and accessibility for educators and learners.

The key principle is simplicity and accessibility for educators and learners.

Digitalization requires an evolution in design, while maintaining cognitive ideologies.

Digitalization requires an evolution in design, while maintaining cognitive ideologies.

User’s education greatly depends on substantial feedback presence.

User’s education greatly depends on substantial feedback presence.

New Illustrations are much needed

New Illustrations are much needed

Fast and easy actions, and support users when needed.

Fast and easy actions, and support users when needed.

Which features similar products have? and how do they look like?

a view on the class and its indicators on a specific user

a view on the class and its indicators on a specific user

Good consistency of the feedback

Good consistency of the feedback

it is harder to notice a problem at the bottom.

it is harder to notice a problem at the bottom.

he product lacks of engagement. It relies on questions and less other cognitively demanding tasks.

he product lacks of engagement. It relies on questions and less other cognitively demanding tasks.

The micro-copy formal and unhelping

The micro-copy formal and unhelping

The various actions are hidden and hard to find.

The various actions are hidden and hard to find.

Verity of actions and interactions

Easy to find and varied the tool bar

Unnecessary action which can adds clutter to the screen and burden the student select one

Easy UI and UX for opening a class and integrative to other software such as google classroom.

Who are our potential users?

After the interviews we decided on two user categories: teachers and students. The teachers group is fairly uniform, whereas, the student's segment varies, due to their varying age groups which influence their traits and cognitive skills.

After the interviews we decided on two user categories: teachers and students. The teachers group is fairly uniform, whereas, the student's segment varies, due to their varying age groups which influence their traits and cognitive skills.

After the interviews we decided on two user categories: teachers and students. The teachers group is fairly uniform, whereas, the student's segment varies, due to their varying age groups which influence their traits and cognitive skills.

Teacher

High School
Student

Elementary
School
Student

What would be the product information arcitecture?

What would be the product information arcitecture?

What would be the product information arcitecture?

From the research, we concluded that the data structure has four levels, and therefore, a deep architecture is needed, especially for the teacher user. Yet, as the stakeholders and SMEs defined it,

From the research, we concluded that the data structure has four levels, and therefore, a deep architecture is needed, especially for the teacher user. Yet, as the stakeholders and SMEs defined it,

From the research, we concluded that the data structure has four levels, and therefore, a deep architecture is needed, especially for the teacher user. Yet, as the stakeholders and SMEs defined it,

"The most important principle for the system is to be simple and easy to navigate".

"The most important principle for the system is to be simple and easy to navigate".

"The most important principle for the system is to be simple and easy to navigate".

Information hirerchy and architecture

How the users will interact and use the product?

As the class experience involve physical and digital realms, every task for each user group follows a distinct path, even though several paths involve both.

Teachers Flow - Teaching Lesson

Teachers Flow - Teaching Lesson

Hybrid user flow

Hybrid user flow

Hybrid user flow

↳ All user flows

↳ All user flows

↳ All user flows

From Research To Design - Inital Wireframing

Student's main screen

Student's main screen

Teacher's main screen - schools and class management

Teacher's main screen - schools and class management

Teacher's operational screen- schools and class management

Teacher's operational screen- schools and class management

Finalizing Design - Studet's High Fidelity Screens

Main Screen

Navigation - The student can navigate threw tools from the tool Icon and inside the tool pages from the page header.

Connecting dots tool - High fidellity UI

✏️ Transalating user experience from pencil and paper to screens and mouse

Connecting dots with pencil does not equal connecting dots with a computer and mouse at time span. In the digital way, you need to select the action, or switch from another one, also the pencil uses as one tool for all - marking, Elimination, and select, while in computer you need to switch.

✏️ Transalating user experience from pencil and paper to screens and mouse

Connecting dots with pencil does not equal connecting dots with a computer and mouse at time span. In the digital way, you need to select the action, or switch from another one, also the pencil uses as one tool for all - marking, Elimination, and select, while in computer you need to switch.

✏️ Transalating user experience from pencil and paper to screens and mouse

Connecting dots with pencil does not equal connecting dots with a computer and mouse at time span. In the digital way, you need to select the action, or switch from another one, also the pencil uses as one tool for all - marking, Elimination, and select, while in computer you need to switch.

One step at a time
To decrease the potential load, the studet do one thing at a time. With the help of micro-interactions, it even cleaner.

One step at a time
To decrease the potential load, the studet do one thing at a time. With the help of micro-interactions, it even cleaner.

Connecting dots tool - individual exercise

Connecting dots tool - individual exercise

Contextual Actions
Actions are locally on any squire, and shown only when hovering in them, to reduce visual clutter.

Contextual Actions
Actions are locally on any squire, and shown only when hovering in them, to reduce visual clutter.

Connecting dots tool - individual exercise

Connecting dots tool - individual exercise

Other student screens for more tools

Other student screens for more tools

Similar layout only here we decided to locate the actions bar, in a “global” way to the top of the page.

The action bar is in secondary use, to simulate the real paper booklet, so the student can write or scribble, on the side and the illustration.

Similar layout only here we decided to locate the actions bar, in a “global” way to the top of the page.

The action bar is in secondary use, to simulate the real paper booklet, so the student can write or scribble, on the side and the illustration.

Similar layout only here we decided to locate the actions bar, in a “global” way to the top of the page.

The action bar is in secondary use, to simulate the real paper booklet, so the student can write or scribble, on the side and the illustration.

Comparisons tool

Orientation in space tool

How might we design thoughtful & efficient feedback expereice?

Feedback is one of the most important principles of this method, so it was necessary to reflect it in the design.

Feedback is one of the most important principles of this method, so it was necessary to reflect it in the design.

Feedback is one of the most important principles of this method, so it was necessary to reflect it in the design.

Voice and Tone :

Voice and Tone

Voice and Tone

Voice and Tone

“an authoritative, gentle and helpful voice.”

“an authoritative, gentle and helpful voice.”

“an authoritative, gentle and helpful voice.”

Finalizing Design - Teacher's High Fidelity Screens

School & Classes Management

School & Classes Management

Navigation - Each class, school and selected tool is represented in the main page, for easy navigation to each entity.

Navigation - Each class, school and selected tool is represented in the main page, for easy navigation to each entity.

Navigation - Each class, school and selected tool is represented in the main page, for easy navigation to each entity.

Teachers' home page

Teachers' home page

Add New Class

We selected a side panel for the class details and wizard, so it can be easy and approachable item.

We selected a side panel for the class details and wizard, so it can be easy and approachable item.

Fields Autofill - The system automate the teacher's flow and autofill some of the fields, according to prior submitions.

Fields Autofill - The system automate the teacher's flow and autofill some of the fields, according to prior submitions.

Create class flow

Create class flow

Manage Live Session

Dynamic Layout - The teacher can expand or minimize the student's list for maximal view or monitoring on student paste.

Data visualization - Basic metrics, with teacher KPIs to give informational data in real time.

Student Panel - For student's details view with performance, KPI’s, multiple actions for guidance and help.

Dynamic Layout - The teacher can expand or minimize the student's list for maximal view or monitoring on student paste.

Data visualization - Basic metrics, with teacher KPIs to give informational data in real time.

Student Panel - For student's details view with performance, KPI’s, multiple actions for guidance and help.

Dynamic Layout - The teacher can expand or minimize the student's list for maximal view or monitoring on student paste.

Data visualization - Basic metrics, with teacher KPIs to give informational data in real time.

Student Panel - For student's details view with performance, KPI’s, multiple actions for guidance and help.

Teachers' operational Screen

Teachers' operational Screen

Manage Home Work

Secondary button and side panel for prominent-easy-to-find homework functionalities and actions.

Secondary button and side panel for prominent-easy-to-find homework functionalities and actions.

Homework feature

Homework feature

Testing The Produc'ts Usabillity

🎯 Goals

🎯 Goals

  1. Test teacher’s Flows Select a class and play

  2. Improve user experience before developing

  3. Improve user experience before developing

👩🏻‍🏫 Tasks for tachers

Tasks for teachers

  • Add a new class

  • Select a class and play

  • Give homework

  • Check Homework

👨🏻‍🎓 Tasks for students

👨🏻‍🎓 Tasks for students

  • Find the form

  • Mark the dot

  • Eliminate dote

  • Point the error

🧑🏻‍🤝‍🧑🏽Participants

🧑🏻‍🤝‍🧑🏽Participants

  • 2 Teacher

  • 5 Students

🧪 Type

Formative Moderated Micro Testing

Formative Moderated Micro Testing

📏 Measurements

📏 Measurements

  • Task Success

  • Expressions

  • Difficulties

How well did they perform the tasks?

Teacher

Add a new class

Select a class and play

Give homework

Check Homework

Student

Find the form

Mark the dot

Eliminate dote

What we discovered on teachers and how we solved it

List Comprehension

Progress bar
Teachers found it hard to understand the exact student location, so we switched to steps and non-non-linear bars.

Open details button
Teachers didn't notice the interaction of "click-a-row-to-open-details", so I added a fixed button for every row, to be explicit action.

Before

Before

After

After

Homework Location

In the first version, the homework location was outside of the current class. As a consequence of the confusion it made, we positioned it inside the current class, at a side panel.

Homework feature

Homework feature

What we discovered on students and how we solved it

Findings & Solutions - Student

Square Actions

Elimination Mark
The elimination mark was shown near the dot, but that confused the users, so we shifted to be on the dot.

Square highlighte
The checkbox's role is to highlight the square to the teacher, but the students didn't understood it. Eventually, we added a label to make it clear.

Square highlighte- The checkbox's role is to highlight the square to the teacher, but the students didn't understand it. Eventually, we added a label to make it clear.

Before

After

The next things to add or improve in the product:

The next things to add or improve in the product:

  1. Starting Pilot at schools.

  2. Making Reports and evaluation screens,

  3. Keep collecting data from real users and analyze it into design insights.

  1. Starting Pilot at schools.

  2. Making Reports and evaluation screens,

  3. Keep collecting data from real users and analyze it into design insights.

Thanks for watching 🙌🏻

Thanks for watching 🙌🏻

Other case studies

Other case studies

AI-Domain Mapping

AI-Domain Mapping

AI-Domain Mapping

Case Management Module

Case Management Module

Case Management Module