June 2022

iN2L Platform

The platform delivers content and services on devices running iN2L content.

Project overview

Optimize the architecture and user-interface of the current platform based on user feedback.

I.

Project duration

February 2022 to June 2022

II.

The problem

The current platform is is tied to the iN2L tablet and group devices and needs to work on all user devices.

III.

The goal

Create a design that works on all devices, supports all iN2L services, and looks more modern.

IV.

My role

UX researcher and UI designer designing the iN2L Platform from conception to delivery.

V.

Responsibilities

Gathering information from personal research and customer feedback. Writing and discussing information architecture with the product team. Designing and testing high-fidelity prototypes with the team and iterating on designs based on feedback.

View Design System

Starting
the design

  • Sketches
  • Customer feedback
  • User journey maps

Sketches

The platform redesign started with a few sketches, but I knew the platform could not be redesigned based on my, or another employee's opinions. We needed to understand our customer's needs and frustrations.

Feedback

Our team created a Zoho survey for iN2L employees to give us their feedback. Due to the COVID restrictions, very few employees had direct access to our customers. Therefore, we had to rely on our trainers, salespeople, and customer service to provide customer feedback.

Using a tagging system in Zoho we were able to sort common requests using tags. This provided us with a rudimentary affinity map that could identify our customers' greatest problems.

Flow Charts

I analyzed the steps it took to accomplish several key task on the existing platforms (purple and blue) and later added the redesign (green).

Initial Findings

1 Device agnostic

Easily the biggest category of requests, our customers desired a version of our platform that worked across all devices, such as mobile and desktop.

2 Platform

Next, our customers had issues with the platform itself. Many issues could be resolved by fixing existing features, or creating new ones. Such as greater UI customization, adding a calendar, or controlling the speed of a slideshow.

3 Hardware

Improve the physical presentation of iN2L devices. Whether it's the TV stand creating a trip hazard, or the charging flap on the tablet being hard to open.

Refining
the design

  • Accessibility
  • Mockups
  • High-fidelity prototype

Accessibility (a11y) considerations

When designing for seniors, accessibility plays a larger than normal role.

1 Font Size

By a huge lead, font size was the most heard complaint from our customers. Too big was not an issue. Therefore, finding a suitable minimum font size was essential.

2 Color Contrast

I used maximum contrast where possible and kept white text to a minimum. Text on images was right out.

3 Consistency

One of the biggest issues I identified was a lack of consistency throughout the platform. Button positions, colors, and fonts changed from one page to the next.

Key Mockups

The current platform doesn't allow device rotation or any responsive resizing so I wanted to demonstrate a vertical option in my comparison mockups.

New Mockups

As the redesign emerged, new opportunities manifested, such as a dedicated site for Travel within the platform.

High-fidelity prototype

The hi-fi prototype demonstrated all the potential workflows the content team requested. It included content filtering, dialog pop-ups, and error states.

View Hi-fi Prototype

Going forward

  • Takeaways
  • Next steps

Takeaways

In hindsight:
Be sensitive when pointing out problems with previous iterations of the product. You never know who worked on it and is responsible for its current state.

What I learned:
I had exposure to an entire industry previously unknown to me. I had to design for an audience unfamiliar with current technology. I could not assume this audience would recognize common patterns, such as a hamburger button for a menu. Therefore, I had to be more explicit with designing user interfaces than normal.

Next steps

1

Continue to process feedback

2

Run usability tests using the hi-fi prototypes