EXTRON INSTITUTE PORTAL

Extron Institute (EI) provides training to enhance understanding throughout the professional AV industry. EI Portal offers platform where students can check status of training programs and courses they signed up for as well as downloading certificates and acclaimed logos they earned. Previous EI Portal was clunky and difficult to use. Stakeholders asked to revamp the portal to make it easy to use and eliminate any usability problems.

OVERVIEW

This project exhibits my ability to design easy-to-use, mobile responsive portal and create an interactive prototype to use in usability testing. It also shows my competency in improving the design based on usability test findings.

ACTION

Interview a stakeholder

I interviewed a stakeholder to learn about her concerns and objectives.

HERE ARE A FEW OF HER CONCERNS REGARDING THE PREVIOUS PORTAL:

Verbiage on a welcome page is too long that it may be distractive to users.
A portal isn’t mobile responsive.
Programs, courses, and trainings are difficult to distinguish.
Newly enrolled items are placed at the bottom of a page, making it difficult to find them.
Completed, not started, expired items aren’t indicated and can’t be sorted out.
Instructor-lead and online items are placed together in a same list and difficult to distinguish.
To print out certifications, users have to find completed courses and click a few times to get to the print buttons.
An Edit Profile label doesn’t match its capability, changing password and more.

HERE ARE THE OBJECTIVES:

Make content concise to reduce cognitive overload.
Make the portal convenient for users who are on the go, mobile responsive.
Able to distinguish and sort out various items.
Quick access to certifications.
Clear label and simple intuitive UI.

Sketch wireframes and create mockups

With consideration of stakeholder’s concerns and objectives, I sketched out a series of wireframes and experimented with layout, features, and UI. I then created mockups that were improved based on the stakeholder’s feedback.

Training page

Preliminary wireframes and mockups for Training

Certificate page

FAQ page

Mobile

Create an interative prototype

We decided to create an interactive prototype using XD to avoid time spent on coding complex pages with scripts that might have been changed based on usability test results. After converting mockups to an interactive prototype, we checked thoroughly to make sure it’s usable for usability testing and worked out any kinks.

SEE PROTOTYPE

Usability Test Results

Usability testing was conducted by user researchers. Two designers including myself and a researcher watched usability testing live. Here are a summary of usability test findings.

The proposed design was presented to four users, design engineers, for feedback. Overall, they found our proposed design efficient, saving the number of clicks to get to the desired trainings. However, they found some areas confusing and suggested improvements.

KEY FINDINGS:

Training Page

Dashboard (page top with cards)

Didn’t understand the difference between dashboard items and list items.
Confused about what was in the dashboard (What is Most Recently Enrolled?).

Course Page

Didn’t understand what remaining days mean.
Didn’t like the Launch Course buttons being placed far from the rest of items in the list.

Certificate Page

Didn’t understand what Logos and View Guidelines were.
Would like to see expiration dates for certifications if they expire.
Wanted a filter to sort certifications and course completions.

Improve design

Based on usability test findings, we discussed how to improve the design. For the final design, we had to balance users feedback, stakeholders requirements, and design team’s feedback. For the final labels, we researched other training websites and confirmed with our stakeholder to ensure the labels were easy to understand. Here is what we decided to improve.

Training Page

Change Most Recently Enrolled to In progress.
Remove the filter from left sidebar and place it in a dropdown menu to save horizontal space.
Remove program and course legend and icons to avoid confusion. Users don’t need to know which items are programs and courses.

Course Page

Change Remaining Days to Days Left.

FAQ Page

On FAQ, when a frequently asked question is clicked, a browser would scroll to a corresponding answer and highlight th answer.

RESULTS

With the final design, we were able to meet the most of user and stakeholder needs and eliminate usability problems. Here’s what we accomplished:

Made content concise.
Refined labels.
Made it mobile responsive.
Placed newly enrolled items at the top of list.
Indicated course status.
Made table head sticky when a Programs and Courses list is scrolled.
Provided filters to sort programs and courses by status and online or instructor-led.
Placed in-progress programs and courses in dashboard at the top of page.
Created a Certificate page to allow quick access to print certificates and logos.
Removed an Edit button and replaced it with a profile drop-down to include Change Password and Logout.
Organized FAQ by online or instructor-led questions, and provided interaction to scroll and high light a corresponding answer when a question is clicked.