CCI Learning - Jasperactive, E‑learning Platform

Product Design - Web App

Jasperactive is a web-based, e-learning platform that empowers instructors to educate their students to pass certification exams, empowering workforce development.

As the Product Designer for the Jasperactive Team, I designed and evaluated the pre-existing concepts and features base on the user stories and educational instruction requirements. I worked closely with the Product Manager and Developers to produce workflows and prototypes for both user-facing and internal CMS platforms.


CCI Learning:


Jasperactive Content, Educational Instruction and Development Teams

My Role

Product Design, and UI/UX Design


Aug 2019 - Apr 2020


Jasperactive App

The travel search form built using the Flight Centre Digital Styleguide's Sketch Component library.

New Jasperactive Instructor and Student Platform

Replacing the Old Platform

Our goal with Jasperactive was to improve user satisfaction and usage of the web application. The old platform is nonlinear and complex for teachers and students to access, learn, and manage.

Old Jasperactive Platform

Old Jasperactive Platform

Design Sprints and Development

My team was tasked with the digital transformation of the instructional design and curriculum development requirements. We mapped out the information architectures and wireframes, then focused on the essential core of the learning experience. We wanted the platform to be intuitive and inclusive.

One of the mapping section of the application

One of the mapping section of the application

Product Principles & User Requirements
Guidances and Human Factors for the New Product

Simplify the Complexity

Japeractive should allow users to do their tasks without complicated distraction. It should be obvious that the user path be identified easily.

Inclusive and Accessible

The end-users include from young to old, mostly for digital iterated demographic. Jasperactive needs to be easy to operate, intuitive, and friendly.

Learner Engagement

The end-users should feel good and rewarded when they accomplish a task or question. The design should increase retention and keep learners engaged in learning.

Instructors / Teachers

Teachers would like to have greater control over their course groups and the course. They would like to access and check on their students' learning progress and target the students in need.

Study Group Dashboard

Teacher's Study Group Dashboard

Study Group Invites and Setting

Study Group Invites & Setting

Students / Learners

Students want to start learning right away. The platform needs to support students for their self-directed learning on exercise and course navigation.

Student Course Dashboard

Student's Course Dashboard

Benchmark Assessment Flow

Benchmark Assessment Flow

Internal Content Teams

The internal content team needs to be able to quickly and easily update the content without asking for the developer’s help, preventing errors during content creation.

Sign-up Flow for Various User Groups

Jasperactive consists of under-13-age learners, adult learners, and instructors. The sign-up flow must direct users to the right form.

Log in and Sign up

Jasperactive Log in and Sign up

Style System & Design Details

To guide our learners, my team and I used a consistent visual language that established structure.

Jasperactive needed to inspire positivity - making our learners feel good about learning. To provide this impression, we implement details like micro-interactions, and animations, feedback is encouraged and delightful.

Log in and Sign up
Log in and Sign up

About CCI Learning/Jasperactive

CCI Learning is an education technology company, specializing in Interactive Courseware, Certification, Software Licensing and Educator Services. CCI Learning is a Certiport Platinum Solution Partner in Canada. Jasperactive is part of the initiative on digital learning, an application for all learning styles, with benchmark assessment creating a custom course plan for each individual student.