Start a project

Case study · Client name withheld

Online Learning & Education SaaS Platform

A web platform for online technical education, designed and developed for a confidential client

In 2019 Keshav Infotech designed and developed an online learning platform for a client in education technology: a platform for structured technical courses, delivered as a SaaS web application.

Discuss a similar productWhat we delivered
Recreated interface of the learning platform: a learner dashboard in a desktop browser — continue-learning card at 61%, minutes learnt this week, enrolled programmes and what is coming up — beside a phone showing the same dashboard, with anonymised example data
Interface recreated for this case study with anonymised example data; the client's branding and data are not shown.
Client
Confidential client · Education technology
Platforms
Web
Our scope
UI/UX design · SaaS web development
Period
2019

The product

What it does, and for whom

Online learning platforms serve two audiences at once. Learners need a calm, motivating path through courses, practice and progress, on any screen. The team running the platform needs fast tools to organise content, follow learners and see what is working. Technical education adds hands-on practice inside the product. These are the demands the platform is built around.

Scope The platform is the client's product. Under our confidentiality agreement, its name, branding, courses, users and figures are not shown.

User flow

The learner's path

Picking up where they left off, learning in focused lessons and checking understanding, on a phone.

Recreated phone screens of the learning platform: a home screen with a continue-learning card and upcoming items; a video lesson paused on a slide comparing two sign-up forms, with key takeaways and the module's lessons; and a knowledge-check question with the correct answer highlighted
Home, lesson and knowledge check on a phone.

  1. Pick up where you stopped

    Home leads with the next lesson and how much is left, then what is due this week.

  2. Learn in focused lessons

    Video, key takeaways and the module outline together, with the main action always within reach.

  3. Check understanding

    Short knowledge checks give the answer and the reasoning straight away, and progress counts towards the module.

The product in use

The learning experience

  1. Course discovery

    A catalogue of technical and professional courses, filtered by topic, level and duration. Choosing a course opens its details beside the grid, so learners can compare without losing their place.

    Recreated course catalogue: topic filters, six course cards — JavaScript Fundamentals (40% done), Python Programming, Frontend Development, Product Design Fundamentals (61% done), Data Literacy for Teams and Business Communication — and a detail panel for Python Programming with 22 lessons, 9 h 10 min, 5 modules and an Enrol button
    Course discovery. Close-ups on phones: tap any image for the full screen.

  2. Structured lessons

    The module outline, the lesson itself and the resources, notes and discussion around it, on one screen.

    Recreated lesson page: the module outline with completed lessons; a video paused at 04:12 of 11:05 on a slide comparing two sign-up forms; overview text and key takeaways; and a side panel with resources, a saved note, the next lesson and a short discussion
    Lesson workspace. Close-ups on phones: tap any image for the full screen.

  3. Hands-on coding practice

    Technical courses need practice inside the product: the task and its requirements beside a code editor, checks that show what passes, and the next step in the course.

    Recreated coding exercise, 'Order total': instructions to write cartTotal(items), requirements and an example returning 1260; an editor with a short JavaScript solution and a console showing 1260; four passed checks; course progress 8 of 20 lessons (40%); and a Mark complete and continue button
    Coding exercise. Close-ups on phones: tap any image for the full screen.

  4. Course administration

    Running a learning platform means working through courses by status — published, in review, draft — with owners, learners and completion side by side.

    Recreated course administration: summary cards, tabs for all, published, in review and draft courses, and a table of six courses with status, owner, learners, completion and last update, using example data
    Course administration. Close-ups on phones: tap any image for the full screen.

  5. Learning analytics

    Reporting works best as a few clear trends: who is active, what gets completed, and which courses need attention.

    Recreated learning report: four headline figures, a twelve-week chart of active learners and lesson completions, completion by course and a table of three teams, using example data
    Learning analytics. Close-ups on phones: tap any image for the full screen.

About the images: the screens on this page are recreated for this case study with anonymised example data — invented courses, people and figures — so that the client's product, branding and users stay confidential.

Our contribution

What our team designed and built

  1. UI/UX design

    The platform's user experience and interface design, from the learner's path through courses to the screens for the team running the platform.

  2. SaaS web development

    Development of the platform as a SaaS web application: the software behind the learning experience, built to the agreed design.

Technologies Custom web/SaaS development

Related services

The services behind this project

Building a learning platform or SaaS product?

Tell us who it serves and what it has to do. We develop education platforms, SaaS products and custom web applications.

Start a projectWhatsApp us
Open full size