Overview
Multiple enterprise-level training providers needed User Experience (UX) and User Interface (UI) improvements to their distance learning courses. As Learning Experience Designer (LXD), I was provided with five pages of lengthy text content and a few images of each trainer. One client also used a series of several outdated Flash sliders that were not mobile-friendly.
Needs assessment:
For motivation-hygiene factors, the learners needed to know where to go on the website to find the information they were looking for. The original website had no set location for most information, including instructor biographies, so the learners were having to search or scroll through several pages, and were often getting frustrated by being unable to find what they needed.
The learners needed a visually appealing layout that broke up the text without too much scrolling below the fold.
The learners also needed navigation that was user-friendly and intuitive, so they didn’t have to use the search bar.
Several pages contained Flash sliders that were not intuitive and did not display on mobile phones. I knew I could easily convert the Flash content into several mobile-responsive sliders using HTML, CSS, and JavaScript code.
Human-Centered Design Iterations and UX/UI Improvements:
In the original design, the trainer photographs were displayed in a Polaroid photo style with trainer facts on a “fact card” beside each photo. Images were floated in an alternating left-right pattern throughout the page, and are angled slightly off-center to catch the eye.
As the company only has one Corporate Trainer, her layout was slightly different to help her stand out from the other trainers. She has less information on her “fact card” – which has been separated from her photo to draw attention to the quote.
I also created a “University” page, where self-directed learners could find all the different course options and could self-enroll in the content that applies to them.
Lastly, I converted all Flash sliders to mobile-responsive sliders using JavaScript and jQuery along with HTML and CSS. After a few years of using the original design, I eventually updated the design to something more clean and modern.
Results:
The client was thrilled with the final designs. Colors are soft, matching the company brand and the overall layout for the client’s website. As a one-stop-shop, the “University” page greatly improved the learner experience by reducing the amount of searching and scrolling. Learners knew where to find what they needed, and the experience was also vastly improved on smart devices.
