Background

While UX Designer at Learning Pool, I was responsible for all things UX and responsive web front-end.

During this period I hosed many workshops with small user groups, both internal and external.

One workshop in particular was with the Learning Pool internal Design & Content team, approximately 40 staff, the main users of the Adapt Responsive E-Learning Framework and Adapt Builder.

Learning Pool are one of the founding members of the open source Adapt Framework and Adapt Builder.  Adapt is a free and easy to use e-learning authoring tool that creates fully responsive, multi-device, HTML5 e-learning content using the award-winning Adapt developer framework.

Problem

While UX Designer at Learning Pool, I was responsible for all things UX and responsive web front-end.

During this period I hosed many workshops with small user groups, both internal and external.

One workshop in particular was with the Learning Pool internal Design & Content team, approximately 40 staff, the main users of the Adapt Responsive E-Learning Framework and Adapt Builder.

Learning Pool are one of the founding members of the open source Adapt Framework and Adapt Builder.  Adapt is a free and easy to use e-learning authoring tool that creates fully responsive, multi-device, HTML5 e-learning content using the award-winning Adapt developer framework.

Goal

As a user I can combine and intuitively customise a Theme and Menu to create a course.

Research

Research that was conducted apart from the initial workshop is listed below:

  • Follow up workshops with fewer participants
  • User survey 
  • User interviews
  • Stakeholder interviews
  • Interviews with Support team
  • Grooming bugs for repeatedly raise issues
  • Data – queries ran on production database for metrics
  • Affinity Mapping
  • Expectation Testing
  • User Testing

Discovery

From this I discovered that there were two main sources of ambiguity:

  1. What Theme/Menu customisations compatibility?
  2. Why did the user go to Theme customisations to customise the menu?

To solve the above issues I proposed to the project Stakeholders the following solutions:

  1. Theme/Menu Compatibility Matrix
  2. Menu Customisation

Theme/Menu Compatibility Matrix

As mentioned before there were 4 Themes and 12 Menus. Through ideation and the debate after it was decided that the Theme’s would be the point of reference, only allowing the user to select menus that are compatible with the currently selected Theme.

We already knew that there were some menus that were customisable via certain themes, but to get better scope of user impact, I got a developer to run query on the courses production database across all tenants and return the metrics of Theme/Menu combinations. We also drilled down into the metrics to show the master tenant only to eliminate QA test courses. The following Diagram shows the outcome that the Steakholder was happy to sign off as it had the least impact on the users.

As a requirement all menus had to be displayed in the Menu Picker. This again is a problem as initially I wanted to show only compatible menus, but, the steakholder wanted all menus to be on view. The challenge now is how to differentiate between compatible/incompatible Menus. There was various suggestions and we decided that dulling the new Menu Image and adding a shudder transition ‘on-click’ the to enhance the user experience.

Through further user testing, I discovered that the shudder transition and greyscale styling wasn’t obvious enough for the user that the Menu wasn’t compatible with the currently selected theme. On the next iteration I added a message that appeared on hover, “Menu not compatible with current theme”.

 

Menu Customisation

Previously all customisations available are located within Theme Customisations. This applies to any menu customisations, this is mis-leading as Theme Picker and Menu Picker are two different screens. To have Menu Customisations as a sub section of Theme customisations was always misleading as the available options did not relate to all menus.

I proposed that we create menu customisations for all menus that are unique to the selected/active menu. This will allow better more intuitive menu specific customisations. Due to the restriction that two of the themes only support an Open Source menu, Vanilla, the decision was made that the only menus that are customisable are the menus compatible with Base Theme and Salsa Theme, apart for Vanilla Menu.

Summing Up

This was an incredibly tricky operation as existing courses required updated themes, menus and the already applied customisations would need to have scripts ran on the database to move the JSON while ensuring that the course continued to build and appeared in the same way.

To date this was the biggest Adapt release, which was successfully released without a hitch.