TI Training – UX evolution

As UX and UI designer for Texas Instrument’s new training portal I had to work out how best to organise and display 1000’s of training videos available on TI.com. There were stand alone videos and training series. There were webcasts and classroom offerings that were all being shared in many different ways.

 

2017-01-23-12_32_30-ux-pptx-microsoft-powerpoint

After the first design was live for about 6 months we identified the following issues:

2017-01-23-12_33_06-ux-pptx-microsoft-powerpoint

  1. We were relying on the video thumbnails too heavily. We were counting on them to both act as visual clues for  content of the videos and to add interest to the layout.
    We learned: Most often the same templates were re-used so there were no unique images to act as clear indicators. Often the thumbnails were power point presentations with the title embedded in the image, so the title would appear twice.
  2. The layout of the thumbnails was misleading. It looked like the videos were embedded right on the homepage.
    We learned: that it actually takes 3-5 clicks to actually get a video to play.
  3. We inadvertently were still  providing 7 different ways to access the training videos.
    We learned: there were too many options and internal feedback was that it was confusing and engineers did not know where to begin.

Solutions:

  • We were removed the thumbnails altogether2017-01-23-12_33_21-ux-pptx-microsoft-powerpoint
  • Added an inviting neutral image with live text to help with search, involve marketing team
  • Businesses indicated they would like to have some house ads so we have added a player here. It is self-serve through the Drupal interface
  • We now provide only 4 ways to browse training, in keeping with what is provided on ti.com
  • By removing the thumbnails we made space for latest releases and view popular links.

Complex training series wireframe evolution:

2017-01-23-13_24_19-edit-post-kp-wordpress

 

 

1st iteration:

  • still had thumbnails
  • additional info was moved to top.
  • series titles act as anchor links

2nd iteration:

  • thumbnails removed
  • tried stacking content and description

 

2017-01-23-13_24_29-edit-post-kp-wordpress

 

3rd iteration:

  • put titles into tables

4th iteration:

  • new detailed list style created

 

 

 

 

 

At this point we designed a comprehensive user test that would help inform our decisions going forward. We conducted one-on-one sessions with specifically recruited electrical engineers.

  • Morae was recording the testing, and a webcam on the monitor recorded the customer’s face.
  • 2/6 of the participants had previously visited TI’s website in the last month
  • participants provided feedback about the functionality, navigation, search gated content and live training on the training site

Based on the insights gathered we were able to enter Phase 3 of the design process with clear understanding of what the customers’ needs were.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: