Brief:

ClassPill is building a customized, interactive, and engaging learning system based on game-based learning and a rewarding system based on gamification. (Click here for more information.)

In this quest, ClassPill needs to enhance the platform experience and user interface. The dashboard has two main user personas - the teacher and the student. ClassPill should make the dashboard easy to use and provide a self-service experience. And here the flow of the platform

the website is created to help the teachers create interactive exercises for their students. It’s a subscription-based website and the plans is depending on the number of students/ class and the number of games the the teacher can save. Later on, this website will be a market for teachers to sell their games and make some money  and this video demonstrates the current dashboard 

ClassPill's Design System and Guidelines (Click here for more information.)

Font Family: Poppins

Buttons Color:

Primary Color: #4c6bb6

Primary Color Hover: #4261af

Secondary Color: #e1e8ff

Secondary Color Hover: #ced7f5

Dark Color: #1d242d

Dark Color Hover: #151a20

Disabled Color: #e5e7eb

Objectives:

1. Create high-fidelity wireframes and mockups for key screens.

2. Ensure consistency with the existing style guide.

3. Enhance the overall user experience for both students and teachers.

Actors in ClassPill Platform: 

1.  Student

Role:

• user of the platform who engages with the educational games, tracks progress, and participates in classroom activities.

Goals:

• Engage in educational games to learn and improve skills.

• Track personal progress and compare performance with peers (through the Leader board).

• Participate actively in game rooms.

Interactions:

• Interacts with the student dashboard, game rooms, and class leaderboard.(multi-room, multi teachers)

  1. Teacher

Role:

• Facilitator and manager who creates and assigns games monitors student progress, and manages classroom activities.

Goals:

• Enhance student engagement and learning through interactive games.

• Efficiently manage classroom and game activities.

• Monitor and improve student performance and engagement.

• Maintain organized and easily accessible data on student activities and progress.

Interactions:

• Interacts with the teacher dashboard, class, and room management, data management (class data, room data, leaderboard data, player/student answers data, statistics page), student management, and game creation and assignment pages.

User Stories: 

The primary objective is to design the user experience (UX) and user interface (UI) in a way that successfully addresses the key user stories. 

1. As a student, I want a visually appealing dashboard so that I feel motivated to engage with the platform.

2. As a student, I want my dashboard to be easy to navigate so that I can quickly find what I need.

3. As a student, I want to see my position on each class leaderboard so that I can gauge my performance relative to my peers.

4. As a student, I want the leaderboard to be easy to understand so that I can quickly see my ranking.

5. As a student, I want a seamless process to enter the game room so that I can start playing quickly.

6. As a student, I want clear instructions on how to join a game room so that I don't get confused.

7. As a student, I want to get notified when a new game is assigned to me.

8. As a student, I can see all the classes I’m in.

9. As a teacher, I want to easily select a class and add students to game rooms so that I can manage game sessions efficiently.

10. As a teacher, I want a straightforward process to assign games to rooms so that I can save time.

11. As a teacher, I want the data for each class to be saved and easily retrievable so that I can review past activities and performance.

12. As a teacher, I want the data for each room to be saved separately within the class folder so that I can track performance and activities by room.

13. As a teacher, I want to see my games library on the dashboard so that I can quickly access and manage my games.

14. As a teacher, I want options to organize my games so that I can find them easily.

15. As a teacher, I want to be able to edit, delete, or deactivate games, classes, rooms, and students so that I can manage my resources effectively.

16. As a teacher, I want to assign each student to a class so that I can organize my students effectively.

17. As a teacher, I want to create student accounts so that my students can access the platform, Students will receive an email to register, and if he has already registered they will automatically enrolled to the room 

Tasks:

Student Account 

1. Main Dashboard (overview of activities, achievements

2. Student Profile (profile picture, name, mobile number,...)

3. Classes (assigned to student)

4. Leaderboard (view the leaderboard for each class)

5. Classes games answers and results (can be inside the class or leaderboard of the class)

Teacher Account 

1. Main Dashboard (overview of classes, games, recent activities, and notifications)

2. Teacher Profile (profile picture, name, mobile, major, subscription info, age, years of experience, certificates )

3. Class Management (create, edit, and manage classes, deactivate, add and release students, assign games)

4. Room Management (add students to rooms Note: Max 4 students  )

5. Class Data (view and retrieve data for each class)

6. Room Data (view and retrieve data for each room within a class)

7. Student Management (create and manage student accounts)

8. Games Library (view and organize games)

9. Game Assignment (assign games to classes)

10. Leaderboard Data (view leaderboard data for each class and room)

11. Player/Student Answers Data (view and analyze student answers)

12. Statistics (view and analyze statistics for games, classes, and rooms)

Requirements  

• User Personas: Develop detailed profiles for each user type (teachers, students, administrators). Example (tips for the persona: teacher, living in GCC or Europe, most probably teaching languages)

• User Journey Maps: Create maps to visualize how users interact with the platform at different stages.example1, example2, example3 

• Site Map: Outline the structure of the platform, including all key pages and navigation paths. Example1,  example2 

• Low-Fidelity Wireframes: Create basic sketches of the main screens and user flows to establish layout and structure. Examples1 , example2

• User Flow Diagrams: Visualize the steps a user takes to complete tasks within the platform. example1

• High-Fidelity Wireframes: Develop Figma detailed designs that incorporate branding elements and more precise layouts. Example , example ,example

• UI Mockups: Design high-fidelity mockups for key screens, ensuring consistency with the style guide. Example, example

• Interactive Prototypes: after finishing UI mockups use Figma to create clickable prototypes for user testing. Example, Example 

• Design Documentation: Maintain detailed documentation of design decisions, user flows, and interaction patterns.

• Developer Handoff: Provide clear and comprehensive design specs and assets to the development team.

We've provided some examples to help clarify, but please don't feel limited by these examples 

Evaluation Criteria:

Please read the UX Scorecard to see how the winners will be selected, and how we evaluate the best designs.

• Prefer Illustrations over Stock Photos as much as possible, 

• Use public, free, and open-source icons, images, and assets.

• Use 3D render Icons over 2D illustration icons.

• If you design your own icons or images, you accept (if you win one of the prizes you give full copyrights to ClassPill ).

• The minimum acceptable score is 160 (80% of 200). First, Second, and Third place will be the highest score above 160.

• The first submission will get the highest place if two submissions earn the same score. 

Out of Scope:

1. Login and Signup, home page, contact us, about us pages

2. Game Builder 

Submission Guidelines:

The submission must include the following:

1. User Personas, User Journey Maps, Site Map

2. Low-Fidelity and High-Fidelity Wireframes

3. UI Mockups and Interactive Prototypes

4. Design Documentation and Developer Handoff

5. Video walkthrough of the journey.

6. Figma file or link 

7. Screenshots of the designs

8. The licence.txt file detailed all the images, icons, and stock photos you used in the design.

Note: the structure of the pages can be modified to align with the design