Savvas Realize Integration with Canvas

BACKGROUND

A large portion of this project was taking the time to understand needs and requirements with the technical project manager before even beginning on a design concept. Learning Tools Interoperability Advantage (LTI-A) is an emerging standard certification that customers (especially those preparing for adoptions) are requiring. Currently Savvas Realize only delivers Thin Common Cartridges (TCC) or LTI 1.1, where users have to download an entire package often with thousands of resources, expand it, and search a second time in the package to extract the content item they wish to use. Customers including Austin District find the TCC UI to be slow and cumbersome. Austin School district required us to meet the LTI-A certification which builds on deeper integration of any tool with any LMS.

APPROACH

A summary of functional requirements requiring UX include:

  • As a Savvas administrator, register platforms so Savvas Tool can recognize third party platforms.

  • As a third party platform content developer/instructor, view available district licensed programs to load into the tool. View all content available from programs selected. Access program list again to further add programs if desired. Programs can be added but not removed (for licensing reasons). Ability to preview content items. Import selected content items from the tool into the platform, so Realize content is incorporated into curriculum.

WIREFRAME

After understanding user needs, I needed to set up the flow for the “discovery” process, or how administrators import a content item into their third-party LMS. Below are some earlier versions with approaches we did not take. In the Settings page, we did not use the single column approach when noting that users can potentially have hundreds of programs. Due to technical limitations, modals were problematic and had to be avoided. Instead of having the content item show in a modal upon selecting “View”, the content item instead opens in a new tab. This approach mimics an online shopping experience- where the user opens potentially interesting items in new tabs to view details before adding to their cart.

Below is a finalized wireframe showing the flow for the basic use case of a new user launching the Tool for the first time.

USER TESTING

In this project I proposed a new pattern for multi-select using an “Add” button similar to an online purchase/checkout experience. There was some hesitation to move forward with this new pattern as it could introduce difficulties for our target audience, who might be more familiar with checkboxes (a commonly used pattern in Realize). An A/B test was conducted with counterbalance in subject approach (Flow A presented the Add button option first, then the Checkbox option second; and vice versa for Flow B). Participants desired were 3rd-12th teachers using a learning management system and teaching at least one core class. Our findings included:

  • Although slightly more users preferred the checkbox method vs. the Add button method, they were more successful with the Add button. Some preference explanations for the Add method include “With the checkbox option, I am not sure if I need to check in order to view” and “I liked having the "view" and "add" buttons right next to each other”, while explanations for the checkbox method include “I am more used to using checkboxes”. In conclusion, the new pattern did not cause suspected difficulties in selecting their desired content items.

  • The participants clicked on “Continue” and the “Review/x items” selected link equally. There was no clear preference trend of seeing selected choices in a single view. Feedback also suggested the labeling of the link to see items in a single view needed to be clearer as “Review” caused confusion for some participants and “5 item(s) selected” was not directive enough.

REFINING / HI-FIDELITY PROTOTYPE

After confirming the “Add” multi-select pattern was desired to move forward with, I refined on the details of each page. On the program selection page, I created several states for first time users vs. returning users and accommodated for long program titles. I finalized visual design on the content list, filter, and loading state. Filter functionality was another complicated process, as we tried to understand and re-use functionality from Realize. For programs, we used OR logic, while for facets such as grade, media type, etc. we used AND logic, with each selection re-loading the page and updating content item count in parentheses.

Note: Review process and “By Program” tab are de-scoped and planned for future development work.

FUTURE IMPROVEMENTS

  • Infinite scroll: Numbering amount of items viewed such as “x out y items” at bottom of each load.

  • Review process: Decide from the various concepts which process to use for reviewing selected items before importing.

  • Research and gather data on filter/facet functionality, understanding, and usage.

  • Implement “By Program” view (content items grouped by program containers/folder structure) as a secondary way to browse content items.

  • Implement an additional tab in the global navigation to bring in student and assignment data from Realize.

  • Implement additional Setting options added such as language.