MindTap Visual Design


eLearning, UX, Visual

Branding of a New Learning Experience

Problem to Solve

Class trials of the new learning management platform for Cengage Learning were yielding excellent results, and the pressure was on to deliver to market more than 700 titles for college courses by the beginning of the school year. Marketing of the new product was in full swing, and guidelines for how to incorporate all the branding elements were delivered to our UX team. The online courses and ebooks included a wide range of subjects including Biology, World Languages, Economics, Math and Physics, just to name a few.

MindTap Branding Guidelines from marketing
MindTap Branding Guidelines from marketing

Constraints

Time to market was an obvious constraint, as the academic calendar provides 6 month windows to launch and sell new products. Unlike print books, the digital versions could not be customized per text. Regardless of their subject, all ebooks needed to adhere to a universal style that was applied programmatically. The ebooks also needed to be highly readable online and on various devices. Branding guidelines needed to be adhered to, and the look and feel of the interface must complement the content delivered.

Approach

Master styles were defined to render the ebook content for all disciplines in a standardized way. Fonts, colors and styles were selected on my recommendations with collaboration from the editorial and book production departments. Vendors were hired to convert the textbooks designed for print to digital format, mapping the element styles to the new style sheets. I initiated the enterprise agreement with Adobe’s TypeKit, and consulted with them on selecting typefaces that would provide high readability online and support the special character needs of disciplines like math, statistics, music and world languages.

Various content types common to all disciplines were specified by editorial, and I designed a universal style sheet to render then all. A color-coding system was defined to differentiate how the content types were displayed to provide both visual variety and continuity. We tested the new styles on all operating systems, browsers and devices to ensure content legibility.

Last but certainly not least, the look and feel of the MindTap interface was modified to match the new branding. Each discipline was color-coded and identified prominently in the header and splash screen. The dark theme provided focus to the content and menu selections, allowing for the interface to be invisible except when needed. I also defined the visual language for the icons used in the platform, adhering to a simple and modern aesthetic.

Learnings

In some cases, web fonts could not support the special characters needed for all disciplines. After speaking with the designer of the typeface in Berlin, and tons of online research with trial and error, we relied on system fonts for many characters in the math and sciences to maintain accuracy in presentation.

The massive undertaking of converting textbooks to a digitally consumed format brought to light better practices for producing books and tagging content styles to account for digital conversion from the beginning. Oversees vendors were not always equipped to translate editorial needs into standardized markup. MindTap was the catalyst towards defining the digital strategy for Cengage Learning, and I was proud to be a part of it.

Credits

Wendy Constantine, senior ux designer (lead)

Many thanks to the collaborative design efforts of:
— Michael Hairston, ux architect
— Scott Whitmore, ux manager
— Rob Dumas, executive director of ux
— Tim Brown, ux designer
— Debbie Piper, ux researcher