CourseRooms

Educational platform

Story behind
squareStory behind

Story behind

The client is two e-learning experts that have huge experience in courses development for such systems as Udemy. Ready database of potential students to purchase the courses and lesson builders encouraged them to move forward with their idea to develop the unified e-learning portal.

Every education system our clients worked with had the same problems: teachers had the difficulties with building of the courses due to non intuitive and completely messed up interfaces, while student could not select the course out of a great variety, leaving the platform without a purchase. The systems were usually either too complicated or too confusing, which led to a small number of courses in the system and their rare updates.

So they made it a distinctive feature of CourseRooms - to develop user-friendly builder and to give the possibility to understand student’s future perspective upon completion of the course. How was this gained? Read below.

Use cases

Main page

CourseRooms platform has 2 types of users: students and instructors. In order to encourage both to sign up, the main page had to contain instructions and detailed information for each of them.

Both students and instructors can search courses by keywords or just click “Browse courses” button to discover the recently added ones.

If users don’t have an account, they can create a new one right on the main page. Newcomers can also get acquainted with the mission and main features of the platform.

triangleMain page
Use cases

Students profile

This information adds personalization that makes further communication between student and instructor easier and friendlier.

Platform can suggest courses for students based on their location and interests.

My wishlist

Students can add courses to wishlist if they plan to pass them later. Sharing courses via such social media as Facebook, LinkedIn and Twitter is available so more users could join the platform.

ellipseStudents profile
Use cases

Course page

The course details page has been developed in a manner to provide users with the most important and useful information about specific course on one page.

We ran the research and found out that:

  • Generally, users pay more attention to prices and reviews than to course description and curriculum. If reviews are positive and the course aligns with their interest, they will buy the course.
  • People usually briefly look through the page following the F or Z-shaped pattern so we organized all the information on the pages accordingly. The next step was to fix “Pass the course" button on scroll keeping the main CTA available anytime.
polygonCourse page
Use cases

Search courses

In order to streamline the search process for both experienced users and newbies we added such filters as price filter, search by type and by tags. By default, the most recently added courses are shown at the top.

Search courses
Use cases

Forum

As any education hub, CourseRooms has its forum where students and instructors can talk to each other. Very often, when creation of new threads or commenting are available to anybody (members and guests), websites become full of spam and users stop considering this resource as a reliable one. In order to control the activity and to keep information relevant, only logged in users can add comments and create new threads.

Forum
Use cases
Messages

Messages

It takes two to tango, so we realized how important it was to provide a way to communicate within CourseRooms. We significantly extended the networking possibilities by adding direct messages between students and instructors. Private chat makes the learning process even more efficient so users can get the most out of the platform.

In order to provide intuitive interface with an easy way of sorting messages, all inbox is grouped into threads with the most recent ones at the top. This way user is always informed on the unread messages.

Purchase history

Purchase history

(available only to students)

Students can see their purchase history and group transactions to understand total monthly spendings. Each transaction shows the next information:

  • Name of the course that was purchased
  • Price paid (in $)
  • Date when the course was purchased
  • Invoice, which can be downloaded as PDF file
Revenue

Revenue

(available only to students)

All payments are made via PayPal, thus instructors are obliged to link their PayPal account to CourseRooms account to receive money. If account is not linked and someone purchases a course, instructor gets a notification. Once the PayPal account is attached, all payments can be withdrawn, withholding the fee. Money is always sent 2 weeks upon order execution to secure the chargebacks.

Wireframes

Userflow & Wireframes

Technologies

Technologies

Facebook
LinkedIn
Twitter
PayPal
Mandrill
AWS EC2
SAASCompas
Web ServerApache 2
PHPYii2Wordpress
Node.js
MySQL 5.6
Frontend
  • HTML
  • CSS
  • Bootstrap
  • JS
  • AngularJS
AWS S3
UX & Design

Colour scheme

Flat design of the website makes it comprehensive and does not distract from learning.

We used the quiet color palette when designing the platform as users were supposed to spend a lot of time on the website.

We chose deep gray and green colors that are associated with intelligence and education. These colors are even used for school uniform. Moreover, green reduces stress, balances and smoothes emotions. Grey keeps you calm and concentrated. The perfect match for any educational platform.

figure
#22baa0
#4e5e6a
Development

Development

1

We started from pre-development stage that included creation of wireframes and specifications. Then, we divided the development process into six milestones.

2

Afterwards, we passed to development of the basic functionality, static pages and the framework of the dynamic pages.

3

Upon completion of each milestone, our QA team provided testing to ensure that everything works as it should.

4

Following the scheme of meeting-development-testing we moved to the last challenge. So here comes the day of release!

Features

Features

Payment
integration
(PayPal)

Quizzes
to complete the level

Social signup,
login, share

Video content

Messaging
system

Wishlist

Forum

Notifications

You have an idea?

Just contact us and we will do the rest!

You have an idea?
App Futura ExtractGood FirmsClutchAwwwards