Hybrid E-Learning System for Teachers & Students

Hybrid E-Learning System for Teachers & Students

My Role

Product Designer

The Team

Product Designer

1 PM & Founder

1 developers

1 Illustrator

Key Contributions

User Interviews

Competitive Analysis

Design

Prototyping

About the product

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.

My Role

Product Designer

The Team

Product Designer

1 PM & Founder

1 developers

1 Illustrator

Key Contributions

User Interviews

Competitive Analysis

Design

Prototyping

About the product

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.

My Role

Product Designer

The Team

Product Designer

1 PM & Founder

1 developers

1 Illustrator

Key Contributions

User Interviews

Competitive Analysis

Design

Prototyping

About the product

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

Connecting Phisical and digital experiences

3

Multiple Personas
Diverse age groups of students, and teachers

Research

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.

Competitors Analysis

IXL

IXL

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.

Edulastic

Edulastic

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.

User Types and Personas

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

Teacher

Teacher

Role: Class educator

Tech Savvy: Medium

Balance the focus between educating students and teach the necessary curriculum.

Goals

Goals

  • Increase student engagement

  • Improve learning outcomes

  • Create collaborative classroom environment

  • Answer group and individual needs

  • Save time on administrative tasks

Frustrations

Frustrations

  • Classes lack critical and creative thinking

  • Lack of training and support
    in new technologies.

  • Handling complex technology and bureaucracy.

High School
Student

High School
Student

High
School
Student

Role: Student

Tech Savvy: Medium

Public: Minority

Age: Teenager

Lack of computer knowledge but has tech orientation from their smartphone. Low patience to studying with a will to succeed in life.

Goals

Goals

  • Achieve academic success to improve his family's condition

  • Balance study's ambition with fun.

  • Curiosity to learn on tech

Frustrations

Frustrations

  • Limited resources such as computer

  • Gets bored easily with passive learning.

  • Focus challenges Easily distracted by friends or phone.

  • Struggles in social prespectives

Elementary
School
Student

Elementary
School
Student

Elementary
School
Student

Role: Student

Tech Savvy: High

Public: Midclass

Age: Child

High tech skills from childhood. Fast learner, but get board quickly. Limited patience for classes and little attention.

Goals

Goals

  • Have fun on games, and engaging activities

  • Balance study's ambition with fun

  • Succeed in classes for good impression

  • Maintain a successful image of student

Frustrations

Frustrations

  • Traditional classes are boring

  • Slow paced classes make her loose interest

  • Short focus and search for exitment

Information Architeture

Information Architeture

Information Architeture

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".

Users Flow Maps

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

↳ All user flows

↳ All user flows

↳ All user flows

Design

Student View

Student View

Student View

Teacher Layout - Schools and class management

Teacher Layout - Schools and class management

Teacher Layout - Schools and class management

Teacher Layout - Schools and class management

Teacher Layout - Schools and class management

Teacher Layout - Schools and class management

Final Design - Student

Student View

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

✏️ From Pencil to 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.

✏️ From Pencil to 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.

✏️ From Pencil to 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.

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

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

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.

Orientation In space & Comparisons

Orientation In space & Comparisons

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.

Feedback 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

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

Voice and Tone

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

Voice and Tone :

“an authoritative, gentle and helpful voice.”

“an authoritative, gentle and helpful voice.”

“an authoritative, gentle and helpful voice.”

Final Design - Teacher

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.

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.

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.

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.

Usabillity Testing

Goals

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

Tasks for tachers

  • Add a new class

  • Select a class and play

  • Give homework

  • Check Homework

Tasks for students

Tasks for students

Tasks for students

  • Find the form

  • Mark the dot

  • Eliminate dote

  • Point the error

Participants

Participants

Participants

  • 2 Teacher

  • 5 Students

Type

Type

Formative Moderated Micro Testing

Formative Moderated Micro Testing

Measurements

Measurements

Measurements

  • Task Success

  • Expressions

  • Difficulties

Compilation Results

Teacher

Teacher

Add a new class

Select a class and play

Give homework

Check Homework

Student

Find the form

Mark the dot

Eliminate dote

Findings and Solutions - Teacher

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.

Findings and Solutions - Student

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

Next Steps

Next Steps

  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