How PixelCrayons Created an Intuitive Online Learning Platform – Improve Web App

Delivering online training effectively and engagingly is somewhat challenging when you lack the right resources. The convenience with which trainees can avail themselves of the learning courses from anywhere & anytime plays a significant role in ensuring an engaging experience. 

The more intuitive the e-learning application appears the more intelligence, creativity, and effort have been made into it by the development team. If you are looking forward to creating an e-learning application, you are on the right page.

This is a detailed case study of Improve – an e-learning web application that allows enterprises to offer effective online training with ease and convenience. The Improve web app allows users to access tons of training videos & update their progress in real-time.

The core idea of its founder was to create a platform that offers affordable & straightforward online learning courses that employees find delightful. High accessibility was another core objective of this philanthropic project – Improve. The app allows SMEs to provide users with rich and engaging training sessions. 

Doing all of it, Improve is not precisely an open platform where anyone can upload videos and learn from there. Obviously, if that is what the founder wanted, there’s already YouTube!

Instead, the web app allows SMEs and enterprises to create, upload, and use preloaded high-quality training videos. The enterprise’s employees can access these videos anywhere for high-quality training sessions. And the manager’s team can easily track the employee’s progress over time.

The app also generates invoices and reports for the comprehensive courses, which reduces the burden on the HR and accounts team. Overall, the app is an all-in-one solution that automatically leads to a diverse section of users accessing it.

Here are the significant user roles of the Improve App:

  • Super Admin – Having access to the entire web-app configuration & control.
  • Partners – Contributing to the development & content of the application
  • Managers – Ensuring the proper flow of content into the app
  • Companies – Creating & managing content for the employees
  • Employees – Accessing the content of the app. 

Notably, many features need to be embedded in an online training application. It is pretty challenging if you are doing it for the first time. However, you can ensure an engaging application right at the first shot with the right development partner.

For example, ensuring diverse user roles requires integrating multiple features into the app. However, the app envisionist were looking for a lightweight app. So, it was a seemingly technical paradox.

Also ReadThe Creation of your Favorite Restaurant Booking App – Eatigo

Not really. It is not the case when you have access to the right technology tools. The dedicated developer’s team at PixelCrayons had an excellent experience creating this online training application. Let’s unfold the journey of this high-performance online learning app. 

Here, in this case study, we will cover the following:

  • Project Highlights
  • Client’s Demand or the Project’s Requirements
  • Features Created for the Application
  • What can Users do with the Improve app?
  • Why Did We Choose to go with VueJs, MySql, & Apiato for the Solution?
  • Critical Challenges Faced during the App Development Process
  • Expected Results of the Project

Without wasting time, let’s get into the technical and creative details of the Improve application. Starting with the first and foremost thing –

Project Highlights:

PROJECT NAME

IMPROVE

INDUSTRY (e.g., healthcare, finance)

Learning

FRONTEND TECHNOLOGIES

VueJs / Vuetify

BACKEND TECHNOLOGIES

Apiato

OTHER TECHNOLOGIES

MySql, Python, 

PLATFORMS (e.g., mobile, web)

Web

Project URL (Staging or Live Instance)

Website URL: https://www.improve.online/
Application URL

https://app.improve.online/

 

So, What was the Client’s Demand or the Project’s Requirements?

Like any other online learning or training-based app, the requirements were fundamental. At PixelCrayons, we have already delivered similar solutions in the past. So, it helped us analyze the essential features necessary for the app.

Here’s the list:

  • Easily manage your Employee/Course/report effectively and efficiently.
  • We are to ensure that 60+ microlearning courses are on the platform during the app launch.
  • Quickly build learning content and courses.
  • Effectively publish, and deploy learning content and courses in no time.
  • Integrate tests into the app for validating courses.
  • To ensure the availability of certificates on the websites or apps on completing tests. The certificates must be available for download and use only after completing the tests.
  • To generate detailed reports for each course for all sections of users.
  • The platform must have personalized playlists & external training sessions for the users.
  • View and access complete course statuses like Not started, In progress, Completed, etc., by the users and companies.
  • Companies must be able to assign courses to the employees.
  • Users must be able to select courses as per their preferences.
  • The platform must be able to import employees’ data from the BreatheHR portal.
  • The web app must lead to an automatic update of course status on the BreatheHR portal. 
  • To create an advanced dashboard allowing enterprises and self-interested trainee individuals to generate bills.

Additional features required for the app

  • Powerpoint slider, 
  • SCORM player complete course progress and report.

App Development Services

Features Created for the Improve App

The developer’s team analyzed all the project requirements to add all the necessary features coherently. Thus, the user finds the application intuitive and friendly to use.

Following is the list of features accessible in the app.

Easy Sign-Up: New users can create accounts in no time. All that is necessary is basic information, including the following:

  • First & Last Name
  • Company or enterprise Name
  • User email address
  • Password 

Asking too many queries puts off the users. So we kept it crisp to the basics.

Free trial period of 14 Days: Once a user creates an account, they can access the entire platform to get a hands-on experience of the Improve online training app. It leads to more conversion that tends to last longer as users know what they are getting into before making the final payments.

Full Course Library: Here, the users can access the app’s content and choose the desired training sessions for their personal growth. Additionally, the enterprises can also browse and upload content into the library for their employees. 

User Management: Users can specify their specific roles under this app section. Based on the user roles, enterprises can assign courses to their employees here. 

Playlists: Under the playlists sections, users can access and manage the content they are interested in. The app also offers suggestions on what kind of content can be helpful to them based on their previous searches and profile information.

Reports: The Improve app allows users to generate the following kinds of statements:

  • User Reports – Here, individual users track their activities with the training sessions.
  • Course Reports – This allows users to view course information and data.
  • Group Reports – Facilitates tracking group activity and data.
  • Playlists Reports – Here, the users can view playlists and data about the progress of individual training contents.
  • External Training – Users can view, add, and track external training sessions under this reports section of the application.

Billing Section: The billing section of the application has three main features as follows:

  • Company Information: It allows users to view and update enterprise information. 
  • Account Status: Users can view their account status under this section of the training-based application.
  • Invoices: It enables users to generate bills and pay for them under this application section.

That was all about the features available for the users. Let us now look at what all users can perform via the Improve application.

What can Users do with the Improve app?

The application caters to diverse users and lets them perform the following activities:

  • Access and assess training sessions.
  • Integrate courses with personalized content.
  • Eliminate unwanted documents & videos from a particular course.
  • Quickly develop & deploy training content & courses.
  • Create multimedia courses & playlists.
  • Develop tests to validate learning.
  • Users can fix pass-marks and monitor results.
  • Validate learning with tests and quizzes.
  • View course data at multiple levels.
  • Monitor activity levels on any of the courses.
  • Track individual progress of the users.
  • Automated certificates on completion of the course.
  • Access learning records both online and offline.

 

Why Did We Choose to go with VueJs, MySql, & Apiato for the Solution?

Vue.js for an Intuitive Front-End Development of the App 

Tons of features were necessary for the Improve app. However, ensuring a lighter weight and fantastic speed performance was crucial for the app. So we chose one of the fastest frameworks, which is also among the smallest in size – Vue.js.

Vue.js also comes with a Virtual DOM that helps a dedicated team with rapid project development cycles, saving time and cost in the app development. Additionally, Vue.js requires comparatively fewer lines of code which acts as a bonus to the app development projects.

MySQL for Uncompromised Scalability of the App

MySQL secures the stability of the Improve app in the long run. The app will continue uncompromised performance with a growing audience as MySQL comes with on-demand scalability. Thus, with the ever-increasing number of employees accessing the app, there will be zero technical glitches.

Moreover, MySQL’s consistent high performance and round-the-clock uptime support matched the critical requirements of the project. It also has a negligible footprint and is an open-source solution that ensures a lower project cost. 

Apiato for the High-Performance Back-End Development

Apiato, for the backend development of the online training app, helped in the development of business logic and led the team with faster results. Notably, Apiato is the fastest PHP framework that ensures the Improve app’s lightning speed performance.

Apiato was used for the Backend, while developers used Vue.js for the Frontend. So, there are two different URLs, one for the API and another for the Frontend. Thus both were set up on the AWS. 

Note: API got set up on the Elastic Beanstalk and UI on the S3 bucket. The Development team used CircleCI for CI & CD.

Critical Challenges Faced during Improve App Development

There were mainly three challenges that the developer’s team faced in creating the Improve online training app. 

  • Integration of BreatheHR API for user import and course detail export: The dedicated development team of PixelCrayons resolved it by going through the BreatheHR API document. Then the team implemented it into this application. 
  • Powerpoint Slider Integration: The team integrated it by using third-party APIs.
  • Scorm Player Integration: Development team used Aws Lambda to ensure Scorm Player integration into the app.

Web Development Services

Expected Results of the Project

Expected Results - Improve App

The Improve app is available on both mobile and web.  

Website URL: https://www.improve.online/

Application URL: https://app.improve.online/

The app’s user interface is intuitive, which will lead to a higher conversion rate for our clients. Notably, the web app was successfully appealing to all sections of users (when checked under a limited audience).

We are already witnessing positive reviews on its staging stage and are sure of its widespread success on its final launch.

We have our fingers crossed!

Leave a Reply

Your email address will not be published. Required fields are marked *