SmartLearn is an application that provides paid training classes, so users can view, purchase and enjoy training through video content, articles, audio and other content.

So, here is the tasks :

From several online course platforms that I compared. 3 of them are online courses specifically in the academic field for school students. The rest is skill training that is used in the world of work.

However, because in the brief it was written the training class. So I assume it is not a class lesson for school children in academics. However, it is training in skills in the world of work.

After doing the analysis, I created a user flow for an online learning application.

On the Home Screen I put the Application's Main Service in the form of a Mini Card. It is intended that the user knows what the services of this application. And can access to each page of the service by pressing the Mini card.

In Class details, I put the main details of this class at the top of the page, starting from the Teacher, Class Title, Class Description, Number of topics & materials and Rating of this class.

Here is the payment page when a user wants to buy a class, course, bootcamp or other services.

After the user sees the order details, the user then presses the continue button which takes the user to the Payment Portal (Companies can use their own payment portal or use other services such as Xendit which will later be integrated into the application).

Then after the user has successfully made a payment, the user will automatically be enrolled into the class. and it can be accessed on the Classroom page.In Class details, I put the main details of this class at the top of the page, starting from the Teacher, Class Title, Class Description, Number of topics & materials and Rating of this class.

Note : Hohohohooo, you can access this file for Free. Here is the Figma & Figjam.