Web Portal

UX/UI design

I designed this responsive website for an employee training portal. There are lots of courses and materials that will be accessible in this portal. People are busy. They usually want to finish the training as soon as possible, then get back to their work. The challenge is to design an interface that is not overwhelming, but still includes everything they need. The users can find the information they need and begin the training quickly on their desk or on the go.

On the landing page, you will see the featured bar that displays news, or events. Below that, you will see some blocks that contain training materials categorized by Recommended For You, Recently Viewed, What’s New and Channels. I created the tiles and color-coded icons to differentiate the materials. Once you select a block, it will expand and show all the items in the carousel.

The search bar will display suggested keywords when user starts typing.

Once you are on the search page, you can filter the materials by the type: course, video or document.

Channel is a group of courses and activities. It can be used for categorizing training material by its topic.

The course page UI is different from the landing page. It has a left navigation displays all the activities that are in the course. It also serves as a progression and completion bar. The check mark icon will appear once the user finishes that section.

Mobile UI

Mobile version has essential information. The left navigation of the course page will be collapsible.

See the animation prototype