Tutorials product image

Case Study: Tutorials for Apex Learning

Apex Learning was creating a new online learning product and wanted a completely new, modern design to go with it.

Challenge: Support students and accomodate content

Ensure that the interface accommodated the wide variety of content needed and supported how students process information and learn. We wanted the challenge to be in learning the material, not the interface.

Approach: Agility, research, and testing

I worked with agile teams of product managers, visual designers, instructional designers, and developers to design and build the system. I did extensive research on learning interfaces, and conducted ad hoc, “guerrilla” usability tests throughout.

Outcome: Excitement and a foundation for the future

Everyone in the company was excited about the new product. Apex Learning launched an initial version that has grown to become a large part of their product portfolio.

My Roles

  • User Experience Designer
  • Usability Tester
  • Visual Designer

Accomodating Different Devices and Types of Content

We built in a degree of flexibility to the instruction and assessment areas to accommodate very different types of content on different types of devices. It’s amazing how many different forms a multiple choice question can take, for instance, based on the size and shape of the supporting information, the question, and the answers, let alone the device it’s on. I worked with instructional designers to identify the most important content scenarios and then designed elements to support how students typically process and answer each kind of content.
  • Image Alt Text
    Make the best use of available space. A common question type in English courses involves a long, skinny poem with a series of questions about it. To make the best use of space on a wide screen, we moved the question to the side of the poem.

Interaction Design

I provided interaction design for 18 interactive assessment and instructional objects. This included wireframes and user flows for the objects, as well as some interaction details, such as for the “matching” object shown below.
  • Don't make them think. Their legacy products mimicked how matching problems worked on paper, having the student draw lines between matching items. I convinced the clients that switching to a version where students moved the answers to the matching spot would reduce the cognitive load on the student, allowing him to focus more on the problem, itself.

Performance and Progress

We wanted to provide clear indication to the student of where she was, what she needed to do, and how she was doing.
  • Stars 'n cards. As the student takes various assessments, her scores are shown inline with the main navigation. The column of stars provide an easy to scan indicator of performance.

Side note: this was one of those situations where clients love something beyond what you would have expected. A number of people kept going on about how much they loved the “Stars ‘n Cards”.

Visual Design Exploration

To help with the visual design of the new tutorial product, I collected a number of external sites to use as inspiration. I then created a handful of design mockups with real content to show how some of the design elements we had discussed in the inspiration sites could be brought together for their product.