UX / Interaction Design

Interactive Learning Objects

MILO (Metrodigi Interactive Learning Objects) is a cloud-based SaaS application for hosting and creating educational widgets (i.e. flashcards, quizzes, timelines, etc.). The application consists of a content management system, which enables users to manage their assets (image, video, audio) combined with a widget composer, which provides an intuitive user interface for building complex widgets.

 

CLIENT

Metrodigi

Date

July 2016

Software

Sketch

Role

UX Design

 
 
 
 

Project Goals

The initial batch of interactive widgets consisted of 13 different templates that were built in two separate platforms during two different time periods, so the authoring experience was very inconsistent. My main goal was to create common UX/UI patterns to normalize the editing experience for all 13 widget templates in MILO's widget composer.
 

Design Objectives

  • Design the overall widget composer experience
  • Design the UX and interaction patterns for editing 13 individual widget templates


My Individual Role

As the UX designer for this project, I was responsible for designing the experience for editing widget templates within the MILO widget composer. I worked closely with product managers, engineers and visual designers throughout the process. My final deliverables included an index documenting common UX patterns, a full deck of wireframes, and clickable prototypes for each widget type.

 
 
 
 

The Process

Analysis of Current Design

I began by analyzing the current widget authoring system in both platforms to identify areas for improvement. This involved interviewing active users of each system for feedback that could be incorporated in the redesign.


Wireframing

I created wireframes to conceptualize the interactions for each widget type. The examples below represent some of the early concepts for a few different widget templates.
 

 
 
tiles.jpg
 
 
 

Prototyping and testing

I used my wireframes to create clickable prototypes to describe the interaction patters for each widget type. I was also able to test my designs in order to get feedback and iterate before development. One of the tests I ran was task-based, where I asked users to build a specific widget from scratch. For example, MILO users might be asked to complete the following tasks to build a hotspot widget:

  • Create a new hotspot widget
  • Add an image with 3 hotspots
  • Change hotspot icon and color
  • Add content to one of the hotspots

This type of test allowed me to observe and understand which parts of the editing experience are useful, which are confusing, and what elements might still be missing.
 

 
 
gray-bg.png
 
 

The Solution

The following are some examples of the final UI designs for various widgets and authoring components. The UI includes an overview of the widget composer interface with the settings panel on the right, which is dynamic for each widget type.


Timeline Widget

An interactive timeline that scrolls from left to right and contains popovers and links. Students can select the date range they wish to view.
 

 
 
timeline-1.png
 
 
 

Hotspot Widget

An interactive image that contains clickable "hotspots" that users can click or tap to view more information. 
 

 
 
hotspot.png
 
 
 

Adding Media

The "Add Media" modal provides an intuitive and familiar interface for adding assets (audio, image, video) to a widget via upload, URL, or the MILO content management system.
 

 
 
modal.png