Mobile app UX design for educational site

StudyRaft is India’s first cloud-based mobile-first learning system specifically targeted to Indian educational curriculum. StudyRaft has developed its own unique content with learning and grading system which compliments child’s school based education. In short, StudyRaft can replace private tuition and coaching and allow children to learn from the comfort of their own home.

StudyRaft’s curriculum is in line with major Indian boards, including CBSE and ICSE, and the content is specially curated so that it inculcates knowledge and learning in students instead of “forced-teaching” or “on-way-learning”.

StudyRaft will also cater to English-medium students across the world. Membership will be on monthly basis for each student.

Current site: https://studyraft.com/login

Please note that only the logo is finalized for this site. Right now the site is based of a standard CMS template so do not go by the rest of the site.

https://studyraft.com/login

It will be a mobile site developed using Ionic 3. Same Ionic 3 project will be deployed as a web site (apart from mobile apps). Please see the logo for color theme.

StudyRaft

Course Groups (Grades)
Courses (Subjects)
Curriculum
Sections

First design the homepage, like: https://teachable.com/

After successful login, the user will be presented a list of “course groups” to start with, for example:

5th Grade

6th Grade
..

12th Grade

Once he/she clicks a course group, he/she will see “courses” under that course group. For example, if the user clicks 10th Grade, he will see this list:

Science

History

Maths

…

Each course as a set curriculum. A curriculum can have multiple sections. Each section will include the following items:

Add a file
Add a video
Add text
Add quiz

Each of these items will have comments enabled/disabled. Also each of these items can be organised/sorted.

Once he clicks a course, he will see the welcome screen with course details (you can see how Udemy.com shows that page). This screen will show the course structure and other details (refer udemy.com).

Once he starts a course, he will see a progress indicator, as well as how much of course he has covered. Again, refer Udemy.com course for this (select any free course there to check it out) or KhanAcademy.

A course will have the following things:

1. Welcome screen: introduction about that course and course structure

2. Course content: this can be a wiki page, or a video

3. Assignments: ask the user to complete assignments for this course

4. Tests: These will be multiple choice questions where users can select a choice, or enter textual response.

5. Grading results.