I was tasked by eThree, a digital education startup, with designing and implementing a responsive update to the core education feature of their app, the Experience Player, which presented short multimedia lessons in a step-based interface.
The prior version of the app was built for in-house iPad use only, and the templates used for the Experience steps were defined with fixed layouts and a lot of single-use markup and styling. We needed to make our UI work across all devices while retaining our bold, design-forward look.
The Experience Player — Before
After deconstructing our existing design language, I realized we could rebuild our current step templates with a suite of intelligent, modular components for presenting and organizing different kinds of learning content. These “Experience Panels” shared a robust set of common functionality and styling, and could flexibly rearrange themselves to look great on any screen. They were also designed to display bold and design-forward on large screens and compact and efficient for small ones, while still using all the same markup and components.
The Experience Player — After
The shift to panel-based layouts led to a more semantic and particularized process for thinking about and designing step templates. Where before we would add new templates whole cloth, now we could think of templates as collections of different panel types—and, thus, collections of different ways of presenting learning content. Plus, the shift to a more minimal UI took back valuable screen space for content, and made the player as a whole feel more mature, professional, and composed.