TRIDO B2B Saas System
Student progress monitoring system for NGOs of youth-at-risk
Project Overview
NGOs that deal with at-risk youth use various activities to improve the students’ sense
of belonging, responsibility and mood. Most of the time, these NGOs encounter difficulty
in monitoring the condition of the students. As a result, the students can be missed, fall out of the framework and their condition can deteriorate.
The Challenge
NGOs that deal with youth at-risk, find it difficult to track the students condition.
Solution
Create an orderly student monitoring system that identifies the behavior problems of each student and helps the instructor to track the student progress.
Role
Product Design, Design System, UXR
TRIDO B2B Saas System
Student progress monitoring system for NGOs of youth-at-risk
Project Overview
NGOs that deal with at-risk youth use various activities to improve the students’ sense of belonging, responsibility and mood. Most of the time, these NGOs encounter difficulty in monitoring the condition of the students. As a result, the students can be missed, fall out of the framework and their condition can deteriorate.
The Challenge
NGOs that deal with youth at-risk, find it difficult to track the students condition.
Solution
Create an orderly student monitoring system that identifies the behavior problems of each student and helps the instructor to track the student progress.
Role
Product Design,
Design System, UXR
TRIDO B2B Saas System
Student progress monitoring system for NGOs of youth-at-risk
Project Overview
NGOs that deal with at-risk youth use various activities to improve the students’ sense of belonging, responsibility and mood. Most of the time, these NGOs encounter difficulty in monitoring the condition of the students. As a result, the students can be missed, fall out of the framework and their condition can deteriorate.
The Challenge
NGOs that deal with youth at-risk, find it difficult to track the students condition.
Solution
Create an orderly student monitoring system that identifies the behavior problems of each student and helps the instructor to track the student progress.
Role
Product Design, Design System, UXR
Discover Phase
Discover Phase
Leading Questions
Leading Questions
Which kind of activities NGOs use in order to help at-risk youth?
Cooking, surfing, field workshops, through which they are taught values and personal progress.
Cooking, surfing, field workshops, through which they are taught values and personal progress.
How do NGOs measure the students condition progress?
The instructors in the NGOs meet students for a weekly activity. The instructors observe each student and notice whether his/hers behavior changes from session to session and if so - does it deteriorate or improve. The measurement is according to the instructors’ memory only.
The instructors in the NGOs meet students for a weekly activity. The instructors observe each student and notice whether his/hers behavior changes from session to session and if so - does it deteriorate or improve. The measurement is according to the instructors’ memory only.
The instructors in the NGOs meet students for a weekly activity. The instructors observe each student and notice whether his/hers behavior changes from session to session and if so - does it deteriorate or improve. The measurement is according to the instructors’ memory only.
How do the NGOs track the condition of the students?
At the end of an activity, the instructor writes a report about each student
At the end of an activity, the instructor writes a report about each student
Which reporting methods exist for instructors in NGOs?
The instructors use e-mails to report and share their reports with the managers.
The instructors use e-mails to report and share their reports with the managers.
Are the reporting methods convenient for the instructors?
It is difficult to understand previous reports, they are scattered in the inbox without order. In addition, it is difficult to draw clear conclusions from them regarding the process that each student goes through.
It is difficult to understand previous reports, they are scattered in the inbox without order. In addition, it is difficult to draw clear conclusions from them regarding the process that each student goes through.
It is difficult to understand previous reports, they are scattered in the inbox without order. In addition, it is difficult to draw clear conclusions from them regarding the process that each student goes through.
Goals
Goals
To help the instructor see a clearer picture of students condition
To help the instructor see a clearer picture of students condition
To make reporting more convenient and concise
To make reporting more convenient and concise
To save time on reporting and tracking student status
To save time on reporting and tracking student status
KPIs
KPIs
Clarity of the students condition
Clarity of the students condition
Time to Task to create a report
Time to Task to create a report
Time to Task to track student status
Time to Task to track student status
Define Phase
Define Phase
User Persona
User Persona
INSTRUCTOR
Idan Maman
22, Tel Aviv
Idan Maman
22, Tel Aviv
Idan Maman
22, Tel Aviv
Instructor and NGO graduate
Instructor and NGO graduate
ABOUT
Ilay guides a group of 13 teenagers whom he meets once a week for about 3 hours in the "Migdalor" program - the initial basic program of the NGO. It's important to Ilay to develop the sense of capability in the students, therefore he doesn't give up on them and pushes them to try to get into the water despite the cold and the waves.
Ilay guides a group of 13 teenagers whom he meets once a week for about 3 hours in the "Migdalor" program - the initial basic program of the NGO. It's important to Ilay to develop the sense of capability in the students, therefore he doesn't give up on them and pushes them to try to get into the water despite the cold and the waves.
Ilay guides a group of 13 teenagers whom he meets once a week for about 3 hours in the "Migdalor" program - the initial basic program of the NGO. It's important to Ilay to develop the sense of capability in the students, therefore he doesn't give up on them and pushes them to try to get into the water despite the cold and the waves.
GOALS
Be aware of the student's condition
Be aware of the student's condition
Be aware of the student's condition
Intervene on the student's condition when necessary
Intervene on the student's condition when necessary
Intervene on the student's condition when necessary
Pain Points
The instructor takes a lot of time to fill out the report on each student
The instructor takes a lot of time to fill out the report on each student
The instructor takes a lot of time to fill out the report on each student
A lot of information is lost and It is very difficult to track the progress of each student
A lot of information is lost and It is very difficult to track the progress of each student
A lot of information is lost and It is very difficult to track the progress of each student
The NGO’s reporting system is complicated and inconvenient
The NGO’s reporting system is complicated and inconvenient
The NGO’s reporting system is complicated and inconvenient
Main JBTD
Report a student
Report a student
Track student status
Track student status
Ideate Phase
How Might We Statements
How Might We Statements
These statements help us to understand how to cope with our design challenge.
These statements help us to understand how to cope
with our design challenge.
How might we create a minimal experience to make a report?
It takes only three steps for instructor to make a report. There is a “New” button that makes it possible from the main screen
How might we measure level of sense of belonging?
How might we sort the progress of the students in our the system?
How might we measure level of sense of belonging?
Senses are divided into 3 levels: low, medium and high. After minimum of 3 sessions, the system calculates the data according to the levels in the instructor’s report
It takes only three steps for instructor to make a report. There is a “New” button that makes it possible from the main screen
Senses are divided into 3 levels: low, medium and high. After minimum of 3 sessions, the system calculates the data according to the levels in the instructor’s report
In order to see the students’ progress, we decided to make a section of behavioral status that is found in the right side of the main page
How might we sort the progress of the students in our the system?
In order to see the students’ progress, we decided to make a section of behavioral status that is found in
the right side of the
main page
Ideate Phase
How Might We Statements
These statements help us to understand how to cope
with our design challenge.
How might we create a minimal experience to make a report?
How might we measure level of sense of belonging?
How might we sort the progress of the students in our the system?
It takes only three steps for instructor to make a report. There is a “New” button that makes it possible from the main screen
Senses are divided into 3 levels: low, medium and high. After minimum of 3 sessions, the system calculates the data according to the levels in the instructor’s report
In order to see the students’ progress, we decided to make a section of behavioral status that is found in the right side of the main page
User Flow
User Flow
User Flow
Main Flow
Report a student
Students
New
Report
Cancel
Anyway
Back to Edit
View & Edit Report
Back to Edit
Finish Report
Cancel
Track student status
Students
View
Status
Main Flow
Report A STUDENT
Students
New
Report
Cancel
Anyway
Back to Edit
View & Edit Report
Back to Edit
Finish Report
Cancel
Track student status
Students
View
Status
Controversies
Controversies
PROBLEM
We had several controversies about the ״New” button. At the beginning it was just a ״Plus Button״, but after several testings, we found that it did not perform its function as it should.
The button did not call to action, the space between the button and the title on the left side was too large and it was just disconnected from the screen.
We had several controversies about the ״New” button.
At the beginning it was just a ״Plus Button״, but after several testings, we found that it did not perform its function as it should.
The button did not call to action, the space between the button and the title on the left side was too large and it was just disconnected from the screen.
SOLUTION
Therefore we decided to create a button in a color that contrasts with the colors on the screen, that’s how we emphasized the importance of the button and in addition to, we added a word “New” to make the function of the button clearer.
PROBLEM
Writing reports for each individual student can take a long time, we thought about how to help the instructor to optimize the time.
SOLUTION
In order to make a report to several students at the same time, we decided that the instructor could select them using a V marker and add them to a list that would automatically appear in the report form. The instructor will not have to return every time to the list of students and report one by one.
In order to make a report to several students at the same time, we decided that the instructor could select them using a V marker and add them to a list that
would automatically appear in the report form. The instructor will not have to return every time to the list
of students and report one by one
PROBLEM
We were debating how to present the statistics representing the progress of each trainee. At first we presented the statistics in graphs, then in percentages, but none of them met the goal.
SOLUTION
In the end we realized that the emphasis should be on whether the student’s pronunciation has improved, looks the same or has deteriorated, so we decided to write it down.
Wireframing
Wireframing
Our system deals with a lot of forms and reports. That's why our initial wireframes were designed for us to understand how to place the information in a friendly and easy-to-use manner
Our system deals with a lot of forms and reports. That's why our initial wireframes were designed for us to understand how to place the information in a friendly and easy-to-use manner
Our system deals with a lot of forms and reports. That's why our initial wireframes were designed for us to understand how to place the information in a friendly and easy-to-use manner
Design Phase
Design Phase
Colors
Colors
Colors
HEX #DBF0ED
RGB 219 240 237
HEX #48B2A2
RGB 219 240 237
HEX #348074
RGB 219 240 237
HEX #1F4D46
RGB 219 240 237
HEX #EDC5BE
RGB 219 240 237
HEX #ED7762
RGB 219 240 237
HEX #BA5D4D
RGB 219 240 237
HEX #1F4D46
RGB 219 240 237
HEX #EDC5BE
RGB 219 240 237
HEX #ED7762
RGB 219 240 237
HEX #F9EEC7
RGB 219 240 237
HEX #AD99AC
RGB 219 240 237
HEX #BA5D4D
RGB 219 240 237
HEX #FFFFFF
RGB 219 240 237
HEX #EDF2F4
RGB 219 240 237
HEX #EDEDED
RGB 219 240 237
HEX #CCCCCC
RGB 219 240 237
HEX #666666
RGB 219 240 237
HEX #1A1A1A
RGB 219 240 237
HEX #CCCCCC
RGB 219 240 237
HEX #666666
RGB 219 240 237
HEX #1A1A1A
RGB 219 240 237
Fonts
Fonts
Ploni DL 1.1 AAA
Aa
Ploni is a meticulous geometric sans-serif font to make visual communication clear and prominent.
Headline
Bold
Aa
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn
Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
1 2 3 4 5 6 7 8 9 0
Ploni is a meticulous geometric sans-serif font to make visual communication clear and prominent.
Headline
Bold
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
1 2 3 4 5 6 7 8 9 0
Ploni DL 1.1 AAA
Aa
Ploni is a meticulous geometric sans-serif font to make visual communication clear and prominent.
Headline
Bold
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 1 2 3 4 5 6 7 8 9 0
Headline
Demi Bold
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 1 2 3 4 5 6 7 8 9 0
Headline
Medium
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 1 2 3 4 5 6 7 8 9 0
Headline
Regular
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 1 2 3 4 5 6 7 8 9 0
Headline
Demi
Bold
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn
Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
1 2 3 4 5 6 7 8 9 0
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
1 2 3 4 5 6 7 8 9 0
Headline
Medium
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn
Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
1 2 3 4 5 6 7 8 9 0
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
1 2 3 4 5 6 7 8 9 0
Headline
Regular
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn
Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
1 2 3 4 5 6 7 8 9 0
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
1 2 3 4 5 6 7 8 9 0
Icons
Icons
Ui Design
Ui Design
Main and Secondary screens
Main and Secondary screens
Main Screen
The main screen the instructor see in the system is the "groups" screen. On the groups screen the instructor can monitor the status of the students, open a group and from the group make reports both for individual students and for several students together.
The main screen the instructor see in the system is the "groups" screen. On the groups screen the instructor can monitor the status of the students, open a group and from the group make reports both for individual students and for several students together.
Main Screen
STUDENT screen
The instructor can select them using a V marker and add them to a list that would automatically appear in the report form. The instructor won’t have to return every time to the list of students and report one by one.
The instructor can select them using a V marker and add them to a list that would automatically appear in the report form. The instructor won’t have to return every time to the list of students and report one by one.
The instructor can select them using a V marker and add them to a list that would automatically appear in the report form. The instructor won’t have to return every time to the list of students and report one by one.
Secondary Screens
Secondary Screens
PROFILE SCREEN
An important goal of the instructor is to see the statistics showing whether his behavior has improved, stayed the same or deteriorated. In addition, all the reports that the instructor writes after each activity appear in a form that allows him to look at previous reports.
An important goal of the instructor is to see the statistics showing whether his behavior has improved, stayed the same or deteriorated. In addition,
all the reports that the instructor writes after each activity appear in a form that allows him to look at previous reports.
Secondary Screens
Secondary Screens
REPORT FORM
REPORT FORM
This is a report form, In which the instructor completes the lifting of a student's mood and rates the sense of belonging according to low, moderate or high. If the student was not present at the activity, the options to fill out are blocked for the instructor, and thus it can be seen that the student did not progress
This is a report form, In which the instructor completes the lifting of a student's mood and rates the sense of belonging according to low, moderate or high. If the student was not present at the activity, the options to fill out are blocked for the instructor, and thus it can be seen that the student did not progress
This is a report form, In which the instructor completes the lifting of a student's mood and rates the sense of belonging according to low, moderate or high. If the student was not present at the activity, the options to fill out are blocked for the instructor, and thus it can be seen that the student did not progress
Secondary Screens
Secondary Screens
FINAL REPORT
After the report is done, the instructor can enter the form and edit it
After the report is done, the instructor can enter the form and edit it
Secondary Screens
Secondary Screens
REPORT FORM
The instructor can create new students and add them to an existing group.
The instructor can create new students and add them to an existing group.
Conclusion
Conclusion
THE PRODUCT
THE PRODUCT
We created a system for NGOs that help at-risk youth.
The system enables monitoring the students and identifying behavior problems.
We created a system for NGOs that help at-risk youth.
The system enables monitoring the students and identifying behavior problems.
how does the product solves problems?
how does the product solves problems?
our system solves Two major problems faced by the NGOs:
Checking the current status of each student.
Checking the current status of each student.
Reporting each student in an efficient and convenient way.
Reporting each student in an efficient and convenient way.
The solutions for these problems:
A list of students appears on the main screen, with a column specifically dedicated to indicating the student's status. Thus, a clearer picture of the situation of each student is obtained. In addition, in each student's profile there is detail regarding the student's status, presented in a clear and legible visual way.
In every screen in the system the user can find a ‘report’ button that leads to a short report form. The form is easy to fill out. The instructor can report after each activity, without getting tired. The reports are stored in the archive and are used to calculate the status of the students.
A list of students appears on the main screen, with a column specifically dedicated to indicating the student's status. Thus, a clearer picture of the situation of each student is obtained. In addition, in each student's profile there is detail regarding the student's status, presented in a clear and legible visual way.
In every screen in the system the user can find a ‘report’ button that leads to a short report form. The form is easy to fill out. The instructor can report after each activity, without getting tired. The reports are stored in the archive and are used to calculate the status of the students.
Reflection
The Challenges
The main challenge in creating this system was to understand how to check the progress and the improvement in the behavior of each student. When dealing with the state of a student, we are talking about human qualities and an emotional state. We had to find a way to condense these features into a limited number of parameters, in order to create a pleasant and uncluttered experience. In addition, we had to figure out how to make these parameters measurable, so that they would be very clear to the instructor. In the system we created, a quick look is enough to understand which of the students needs urgent attention and who is improving and progressing.
What did we learn during the project?
Reflection
We learned that it is impossible to immediately and quickly reach a final and perfect product.
The work on the product is not over. We worked in several rounds and each time we tried to create a better, more convenient, more intuitive and improved version.
The Challenges
The main challenge in creating this system was to understand how to check the progress and the improvement in the behavior of each student. When dealing with the state of a student, we are talking about human qualities and an emotional state. We had to find a way to condense these features into a limited number of parameters, in order to create a pleasant and uncluttered experience. In addition, we had to figure out how to make these parameters measurable, so that they would be very clear to the instructor. In the system we created, a quick look is enough to understand which of the students needs urgent attention and who is improving and progressing.
What did we learn during the project?
We learned that it is impossible to immediately and quickly reach a final and perfect product.
The work on the product is not over. We worked in several rounds and each time we tried to create a better, more convenient, more intuitive and improved version.
future steps
future steps
The product currently answers the problems we presented at the beginning, but in our opinion it can expand and be used not only by the instructors, but also by the managers of NGOs and the organizers of the activities, who will be able to draw conclusions from the information collected, thereby optimizing and improving the methods of operation of the NGO and saving more boys and girls at risk.
The product currently answers the problems we presented at the beginning, but in our opinion it can expand and be used not only by the instructors, but also by the managers of NGOs and the organizers of the activities, who will be able to draw conclusions from the information collected, thereby optimizing and improving the methods of operation of the NGO and saving more boys and girls at risk.
Thank you !
Thank you !
Thank you !
👀 You scrolled all the way here? High five! ✋
👀 You scrolled all the way here? High five! ✋