Designing Intuitive Online Training Module

With an e-learning and training tool that brings an organization’s workforce up to speed, we built an Online Training Module to help employees track performances and record the qualifications of their training programs.

Our Roles

Research, Information Architecture, Wireframing,
User Interface Design & Prototyping


4 Weeks

The Challenges of Online Training Module

Measuring employee performances and making the learning process fun and not overwhelming

Getting to Know The Industry

We reviewed similar solutions to get an idea of the standard use in the industry. Then we conducted a series of workshops with stakeholders to learn business goals.

Our Client’s Goals
  1. Easy to create courses and simple to manage
  2. Customizable online training modules
  3. Engaging virtual programs that motivate the employees for online training
  4. Intuitive design and artificial intelligence features that help
    increase productivity

User Interview

With client’s set goal and business context, we moved on to understanding the key end-users of the online training module and mapping their needs. We created a persona & evaluated user pain points and motivation.

User Needs:


Assessment creation and management


Create training courses for employees easily


Accessible course outline on the content pages and quiz pages that helps to determine progress and upcoming units


We used a tool called Crazy 8 to generate quantitative ideas and followed with Round-Robin to refine some of them into more qualitative ones for the training module

ideation for online training module

Information Architecture

After grouping user needs into valuable features we created information architecture. While creating this information architecture, we followed the Expectation Confirmation Theory, which would explain the typical way the users are expected to experience the learning module.

information architecture of online training module

Digital Wireframe

Consistency is key. We ensure that our UI elements are consistent. The buttons, tabs, and labels on each screen were kept uniform in our wireframe.

UI Kit

Too much content on the screen will discourage learners and can make them feel overwhelmed, so we decided to use clean and minimal typography and colors.

ui kit design for online training module


Content creation task, content pages and quiz page are arguably the most important sections of our training module so we created the prototype with those particular sections to validate our design with users.

Final Thoughts

The UX of the customizable online training module helped address the business goals for need based trainings for different skill levels. It advanced the learning process for the HR department, trainees and trainers alike through interactive virtual programs for an engaging user experience. Further work to follow with periodic feedback.

Interested to Explore More Of Our UX/UI Design Solutions?​

Then why wait? We are here to help!

Requesting demo

Ascend Financials logo