Lead Designer, Ed-Tech, Social Learning, iOS/Android, Web
NOON
Lead Designer, Ed-Tech, Social Learning, iOS/Android, Web
NOON
Lead Designer, Ed-Tech, Social Learning, iOS/Android, Web
NOON
Lead Designer, Ed-Tech, Social Learning, iOS/Android, Web
NOON
Interactive Whiteboard
Interactive Whiteboard
Interactive Whiteboard
Interactive Whiteboard
Noon Academy is a social learning platform that provides, interactive tutoring sessions. It enables students to study in groups, learn from top educators, and compete with peers, using social learning to enhance engagement.
Noon Academy is a social learning platform that provides, interactive tutoring sessions. It enables students to study in groups, learn from top educators, and compete with peers, using social learning to enhance engagement.
Noon Academy is a social learning platform that provides, interactive tutoring sessions. It enables students to study in groups, learn from top educators, and compete with peers, using social learning to enhance engagement.
Problem Space
01 /
In the Middle East and Africa (MEA) region, the Noon app struggled with student engagement and effective learning due to a lack of interaction and motivation, compounded by limited access to schools.
Problem Space
01 /
In the Middle East and Africa (MEA) region, the Noon app struggled with student engagement and effective learning due to a lack of interaction and motivation, compounded by limited access to schools.
Problem Space
01 /
In the Middle East and Africa (MEA) region, the Noon app struggled with student engagement and effective learning due to a lack of interaction and motivation, compounded by limited access to schools.
Problem Space
01 /
In the Middle East and Africa (MEA) region, the Noon app struggled with student engagement and effective learning due to a lack of interaction and motivation, compounded by limited access to schools.
02 /
OBJECTIVES
Increase Student Engagement: Boost active participation in learning activities.
Improve Learning Outcomes: Enhance understanding and retention of concepts.
Build a Collaborative Community: Develop a supportive learning environment.
02 /
OBJECTIVES
Increase Student Engagement: Boost active participation in learning activities.
Improve Learning Outcomes: Enhance understanding and retention of concepts.
Build a Collaborative Community: Develop a supportive learning environment.
02 /
OBJECTIVES
Increase Student Engagement: Boost active participation in learning activities.
Improve Learning Outcomes: Enhance understanding and retention of concepts.
Build a Collaborative Community: Develop a supportive learning environment.
02 /
OBJECTIVES
Increase Student Engagement: Boost active participation in learning activities.
Improve Learning Outcomes: Enhance understanding and retention of concepts.
Build a Collaborative Community: Develop a supportive learning environment.
Unified Design Journey
03 /
The design process began with a collaborative brainstorming session involving members from product, engineering, and design teams. Ideas were discussed, and their pros and cons were weighed. Research was extended through focus groups, live class observations, and competitor analysis. Quick prototypes were then created to test hypotheses and gather early feedback. This holistic approach helped ensure a comprehensive understanding of user needs and preferences.
Unified Design Journey
03 /
The design process began with a collaborative brainstorming session involving members from product, engineering, and design teams. Ideas were discussed, and their pros and cons were weighed. Research was extended through focus groups, live class observations, and competitor analysis. Quick prototypes were then created to test hypotheses and gather early feedback. This holistic approach helped ensure a comprehensive understanding of user needs and preferences.
Unified Design Journey
03 /
The design process began with a collaborative brainstorming session involving members from product, engineering, and design teams. Ideas were discussed, and their pros and cons were weighed. Research was extended through focus groups, live class observations, and competitor analysis. Quick prototypes were then created to test hypotheses and gather early feedback. This holistic approach helped ensure a comprehensive understanding of user needs and preferences.
Unified Design Journey
03 /
The design process began with a collaborative brainstorming session involving members from product, engineering, and design teams. Ideas were discussed, and their pros and cons were weighed. Research was extended through focus groups, live class observations, and competitor analysis. Quick prototypes were then created to test hypotheses and gather early feedback. This holistic approach helped ensure a comprehensive understanding of user needs and preferences.
DIGITAL FLASH CARDS
04 /
One of the initial concepts was to enable students to save questions they encountered as digital flash cards, which could be shared within their academic community. While some students were enthusiastic about this idea, most found the process of creating and sharing flash cards too complex and burdensome.
DIGITAL FLASH CARDS
04 /
One of the initial concepts was to enable students to save questions they encountered as digital flash cards, which could be shared within their academic community. While some students were enthusiastic about this idea, most found the process of creating and sharing flash cards too complex and burdensome.
DIGITAL FLASH CARDS
04 /
One of the initial concepts was to enable students to save questions they encountered as digital flash cards, which could be shared within their academic community. While some students were enthusiastic about this idea, most found the process of creating and sharing flash cards too complex and burdensome.
DIGITAL FLASH CARDS
04 /
One of the initial concepts was to enable students to save questions they encountered as digital flash cards, which could be shared within their academic community. While some students were enthusiastic about this idea, most found the process of creating and sharing flash cards too complex and burdensome.
Wireframe of Flash Cards
Navigating the challenge of balancing engagement with simplicity, I led the team in pivoting from the complex digital flashcards concept to a more intuitive, discussion-based model
Navigating the challenge of balancing engagement with simplicity, I led the team in pivoting from the complex digital flashcards concept to a more intuitive, discussion-based model.
Social Practice
05 /
The feature centered on student panels and live discussions on curated questions. Participants could interact with panelists via chat or give Kudos for valuable contributions, ensuring active engagement and feedback. The challenge here was how to integrate this new feature into the app's existing live class product.
Social Practice
05 /
The feature centered on student panels and live discussions on curated questions. Participants could interact with panelists via chat or give Kudos for valuable contributions, ensuring active engagement and feedback. The challenge here was how to integrate this new feature into the app's existing live class product.
Social Practice
05 /
The feature centered on student panels and live discussions on curated questions. Participants could interact with panelists via chat or give Kudos for valuable contributions, ensuring active engagement and feedback. The challenge here was how to integrate this new feature into the app's existing live class product.
Social Practice
05 /
The feature centered on student panels and live discussions on curated questions. Participants could interact with panelists via chat or give Kudos for valuable contributions, ensuring active engagement and feedback. The challenge here was how to integrate this new feature into the app's existing live class product.
Social Practice Brainstorm
Testing and user observations revealed that landscape mode, similar to YouTube or Netflix, worked best for live classes.
The final designs highlight the integration of elements, improving user experience for live classes.
Testing and user observations revealed that landscape mode, similar to YouTube or Netflix, worked best for live classes.
The final designs highlight the integration of elements, improving user experience for live classes.
Social Practice - Puck Interaction
Kudos Interaction
06 /
The design below shows how the “Kudos” interaction works. Everything is accessed from the dynamic stage component, with interactions connected through context. Clicking on a user brings up the Kudos menu from the right. To control spam, users can give Kudos only once every 30 seconds.
Kudos Interaction
06 /
The design below shows how the “Kudos” interaction works. Everything is accessed from the dynamic stage component, with interactions connected through context. Clicking on a user brings up the Kudos menu from the right. To control spam, users can give Kudos only once every 30 seconds.
Kudos Interaction
06 /
The design below shows how the “Kudos” interaction works. Everything is accessed from the dynamic stage component, with interactions connected through context. Clicking on a user brings up the Kudos menu from the right. To control spam, users can give Kudos only once every 30 seconds.
Kudos Interaction
06 /
The design below shows how the “Kudos” interaction works. Everything is accessed from the dynamic stage component, with interactions connected through context. Clicking on a user brings up the Kudos menu from the right. To control spam, users can give Kudos only once every 30 seconds.
Kudos Prototype
Kudos Flow
I documented the workings of the stage and its interactions, also created a roadmap outlining the iterative development process.
The goal was to build an MVP to establish the fundamental features, with plans to expand and enhance these features over the next few months.
I documented the workings of the stage and its interactions, also created a roadmap outlining the iterative development process.
The goal was to build an MVP to establish the fundamental features, with plans to expand and enhance these features over the next few months.
STAGE MVP
07 /
The MVP focused on capturing low-hanging fruits that required minimal effort but delivered maximum impact. One of these key features was enabling access to student profiles during live classes, which also served as a foundation for future features. Additionally, some UI enhancements, particularly around color and opacity, were implemented to improve stage visibility while ensuring the underlying canvas remained unobstructed. These changes not only enhanced user experience but also provided a functional base for further developments.
108
You
Rai..
Jas..
STAGE MVP
07 /
The MVP focused on capturing low-hanging fruits that required minimal effort but delivered maximum impact. One of these key features was enabling access to student profiles during live classes, which also served as a foundation for future features. Additionally, some UI enhancements, particularly around color and opacity, were implemented to improve stage visibility while ensuring the underlying canvas remained unobstructed. These changes not only enhanced user experience but also provided a functional base for further developments.
STAGE MVP
07 /
The MVP focused on capturing low-hanging fruits that required minimal effort but delivered maximum impact. One of these key features was enabling access to student profiles during live classes, which also served as a foundation for future features. Additionally, some UI enhancements, particularly around color and opacity, were implemented to improve stage visibility while ensuring the underlying canvas remained unobstructed. These changes not only enhanced user experience but also provided a functional base for further developments.
108
You
Rai..
Jas..
STAGE MVP
07 /
The MVP focused on capturing low-hanging fruits that required minimal effort but delivered maximum impact. One of these key features was enabling access to student profiles during live classes, which also served as a foundation for future features. Additionally, some UI enhancements, particularly around color and opacity, were implemented to improve stage visibility while ensuring the underlying canvas remained unobstructed. These changes not only enhanced user experience but also provided a functional base for further developments.
108
You
Rai..
Jas..
stage phase 1
08 /
Introduced changes to enhance accessibility in live classes and practice sessions. A timer was added to count down during practice rounds and up in live classes, borders were adjusted for alignment, and user numbers were moved to the left as a tappable button to access the participants list.
You
Rai..
Jas..
02:23
stage phase 1
08 /
Introduced changes to enhance accessibility in live classes and practice sessions. A timer was added to count down during practice rounds and up in live classes, borders were adjusted for alignment, and user numbers were moved to the left as a tappable button to access the participants list.
stage phase 1
08 /
Introduced changes to enhance accessibility in live classes and practice sessions. A timer was added to count down during practice rounds and up in live classes, borders were adjusted for alignment, and user numbers were moved to the left as a tappable button to access the participants list.
You
Rai..
Jas..
02:23
stage phase 1
08 /
Introduced changes to enhance accessibility in live classes and practice sessions. A timer was added to count down during practice rounds and up in live classes, borders were adjusted for alignment, and user numbers were moved to the left as a tappable button to access the participants list.
You
Rai..
Jas..
02:23
stage phase 2
09 /
Featured the final iteration of the stage, with a radial countdown for improved visibility, Zoom-like presenter mode, the ability to move the stage around the screen, and options to minimize and maximize for better space management.
You
02:23
stage phase 2
09 /
Featured the final iteration of the stage, with a radial countdown for improved visibility, Zoom-like presenter mode, the ability to move the stage around the screen, and options to minimize and maximize for better space management.
stage phase 2
09 /
Featured the final iteration of the stage, with a radial countdown for improved visibility, Zoom-like presenter mode, the ability to move the stage around the screen, and options to minimize and maximize for better space management.
You
02:23
stage phase 2
09 /
Featured the final iteration of the stage, with a radial countdown for improved visibility, Zoom-like presenter mode, the ability to move the stage around the screen, and options to minimize and maximize for better space management.
You
02:23
Teacher's Stage
10 /
On the teacher's side, the main issue was centered around visibility and feedback. Teachers had no clear indication if students were actively engaged unless they typed something in the chat. More importantly, there was no way to easily identify which student wanted to ask a question or speak during the session. This lack of real-time feedback and visibility made it difficult for teachers to manage engagement and participation effectively.
108
You
Rai..
Jas..
Teacher's Stage
10 /
On the teacher's side, the main issue was centered around visibility and feedback. Teachers had no clear indication if students were actively engaged unless they typed something in the chat. More importantly, there was no way to easily identify which student wanted to ask a question or speak during the session. This lack of real-time feedback and visibility made it difficult for teachers to manage engagement and participation effectively.
Teacher's Stage
10 /
On the teacher's side, the main issue was centered around visibility and feedback. Teachers had no clear indication if students were actively engaged unless they typed something in the chat. More importantly, there was no way to easily identify which student wanted to ask a question or speak during the session. This lack of real-time feedback and visibility made it difficult for teachers to manage engagement and participation effectively.
108
You
Rai..
Jas..
Teacher's Stage
10 /
On the teacher's side, the main issue was centered around visibility and feedback. Teachers had no clear indication if students were actively engaged unless they typed something in the chat. More importantly, there was no way to easily identify which student wanted to ask a question or speak during the session. This lack of real-time feedback and visibility made it difficult for teachers to manage engagement and participation effectively.
108
You
Rai..
Jas..
The “Handwave pill” helped teachers to identify students who wanted to ask a question or speak during live sessions. I wanted this feature to resemble to feeling of putting up your hand in a class to ask a question.
It improved the teacher experience by allowing them to manage class participation more efficiently and interact with students in real-time, without having to rely solely on chat.
The “Handwave pill” helped teachers to identify students who wanted to ask a question or speak during live sessions. I wanted this feature to resemble to feeling of putting up your hand in a class to ask a question.
It improved the teacher experience by allowing them to manage class participation more efficiently and interact with students in real-time, without having to rely solely on chat.
Desktop mode for teachers
11 /
The other half of my work focused on enhancing the desktop interface for teachers. This mode enables teachers to monitor which students have joined the class and provided comprehensive controls for teaching lessons. Teachers can manage student participation by allowing students to join or leave the stage to answer questions. Additionally, they can interact with students via chat, control presentations, and create in-class polls to engage students actively.
For teachers
11 /
The other half of my work focused on enhancing the desktop interface for teachers. This mode enables teachers to monitor which students have joined the class and provided comprehensive controls for teaching lessons. Teachers can manage student participation by allowing students to join or leave the stage to answer questions. Additionally, they can interact with students via chat, control presentations, and create in-class polls to engage students actively.
Desktop mode for teachers
11 /
The other half of my work focused on enhancing the desktop interface for teachers. This mode enables teachers to monitor which students have joined the class and provided comprehensive controls for teaching lessons. Teachers can manage student participation by allowing students to join or leave the stage to answer questions. Additionally, they can interact with students via chat, control presentations, and create in-class polls to engage students actively.
Desktop mode for teachers
11 /
The other half of my work focused on enhancing the desktop interface for teachers. This mode enables teachers to monitor which students have joined the class and provided comprehensive controls for teaching lessons. Teachers can manage student participation by allowing students to join or leave the stage to answer questions. Additionally, they can interact with students via chat, control presentations, and create in-class polls to engage students actively.
Desktop Mode for Teachers